/* PokeGlass Lite v1.1 — Unified (Android + iOS Safari) CSS
   - Single drop-in file; no HTML changes required
   - Includes stacking-context/z-index fixes so backdrop-filter works on Safari & Android WebView
   - Safe fallbacks when backdrop-filter is unsupported
*/

:root{
  --pg-brand1:#667eea;
  --pg-brand2:#764ba2;
  --pg-accent:#ffd700;
  --pg-nav-bg:rgba(33,37,41,.85);
  --pg-glass-bg:rgba(255,255,255,.14);
  --pg-glass-border:rgba(255,255,255,.28);
  --pg-card-bg:rgba(255,255,255,.12);
  --pg-card-border:rgba(255,255,255,.25);
  --pg-form-bg:rgba(255,255,255,.92);
  --pg-form-border:rgba(0,0,0,.08);
  --pg-focus-ring:0 0 0 .25rem rgba(255,215,0,.25);
  --pg-text-dark:#14213d;
}

/* ===== Background (scoped & safe) ===== */
html, body{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
body {
  min-height: 100vh;
  background: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* 供 ::before 定位 */
  overflow-x: hidden;
  z-index: 0; /* 與 ::before 置於同層，供玻璃面板疊合 */
}

/* 手機版背景 */
@media (max-width: 768px) {
  body {
    background: url('background-mobile.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Safari 相容：不用 inset，改用 top/right/bottom/left */
body::before{
  content:"";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events:none;
  z-index:0; /* 重要：避免 -1 造成 Safari 看不到可被模糊的背景 */
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.12) 2%, transparent 2.6%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 2%, transparent 2.6%),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,.08) 1.6%, transparent 2.1%),
    radial-gradient(circle at 60% 90%, rgba(255,255,255,.12) 2%, transparent 2.6%),
    radial-gradient(circle at 90% 60%, rgba(255,255,255,.08) 1.6%, transparent 2.1%);
  background-size:100px 100px,120px 120px,80px 80px,110px 110px,90px 90px;
}

/* 讓使用 Bootstrap 的 bg-light / bg-white 能蓋過漸層 */
body.bg-light{ background:#f8f9fa !important; }
body.bg-light::before{ display:none !important; }
body.bg-white{ background:#fff !important; }
body.bg-white::before{ display:none !important; }

/* ===== Glass Surfaces（加上 Safari/Android 穩定屬性） ===== */
.glass-effect,
.glass-card,
.glass-nav,
.hero-section,
.order-summary,
.modal-content,
.alert.glass {
  position: relative;         /* 建立局部 stacking context */
  z-index: 1;                 /* 站在 body::before 之上 */
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  background-color: rgba(255,255,255,.01); /* 確保有透明底可混合 */
}

/* Individual glass tokens */
.glass-effect{
  background:var(--pg-glass-bg);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid var(--pg-glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}
.glass-card{
  background:var(--pg-card-bg);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border:1px solid var(--pg-card-border);
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  border-radius:1rem;
}
.glass-nav{
  background:var(--pg-nav-bg);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.2);
  white-space:nowrap; /* keep items in one row */
}
.text-shadow{ text-shadow:2px 2px 4px rgba(0,0,0,.25); }

/* === Navbar pill borders (active 有框) === */
.navbar .nav-link.rounded-pill{
  border: 1px solid transparent;            /* 預留邊框避免跳動 */
  padding: .375rem .75rem;                  /* pill 高度一致 */
  white-space: nowrap;                      /* 不換行 */
}
.navbar .nav-link.rounded-pill:hover{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}
.navbar .nav-link.active.rounded-pill{
  color: #fff;                              /* 深色 navbar 上保持可讀 */
  border-color: rgba(255,255,255,.65);      /* 外框 */
  background: rgba(255,255,255,.12);        /* 淡玻璃底 */
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12); /* 微光暈 */
}
/* 若用的是 .navbar-dark 補文字色 */
.navbar-dark .navbar-nav .nav-link.active.rounded-pill{ color:#fff; }

/* ===== Forms & Buttons ===== */
.form-control{
  background:var(--pg-form-bg);
  border:1px solid var(--pg-form-border);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#212529;
  background-clip: padding-box; /* Android WebView 邊界拼接縫 */
}
.form-control:focus{
  background:#fff;
  border-color:var(--pg-accent);
  box-shadow:var(--pg-focus-ring);
}
.input-group-text{
  background:rgba(255,255,255,.9);
  border-color:var(--pg-form-border);
}
.btn-primary{
  background:linear-gradient(135deg,var(--pg-brand1) 0%,var(--pg-brand2) 100%);
  border:none;
}
.btn-primary:hover{ filter:brightness(.96); }
.btn-outline-light.glass-effect{ border-color:rgba(255,255,255,.5); }
.btn-ghost{ background:transparent; border:none; color:#495057; }

/* ===== Product cards ===== */
.product-card{
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  border:2px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  border-radius:1rem;
}
.product-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.5);
}
.product-card img{
  object-fit:cover; height:220px; border-radius:1rem 1rem 0 0;
}
.product-card.selected{
  border-color:var(--pg-accent);
  box-shadow:0 20px 56px rgba(255,215,0,.35);
  background:rgba(255,215,0,.16);
  transform:translateY(-6px) scale(1.02);
}

/* ===== Sections ===== */
.hero-section{
  background:rgba(30,144,255,.15);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:1rem;
}
.order-summary{
  background:rgba(255,20,147,.18);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:1rem;
}

/* ===== Modals & Alerts ===== */
.modal-content{
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(26px);
  backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:1rem;
}
.modal-header{
  background:rgba(30,144,255,.16);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.alert.glass{
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* ===== Tables (glass) ===== */
.table-wrap {
  border-radius:1rem;
  overflow:hidden;
  height: auto !important;   /* 不固定高度 */
  max-height: none !important;
  overflow-y: visible !important; /* 跟隨內容 */
}

.table.glass thead th{
  background:rgba(30,144,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  vertical-align:middle;
}
.table.glass tbody td{
  background:rgba(255,255,255,.18);
  color:var(--pg-text-dark);
  border-color:rgba(255,255,255,.25);
}
.table.glass tbody tr:hover td{ background:rgba(255,255,255,.24); }

/* ===== Badges ===== */
.badge.glass{
  background:rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.3);
}
.badge.market{
  background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.badge-status{ letter-spacing:.4px; }

/* ===== Utilities ===== */
.nowrap{ white-space:nowrap; }
.thumb{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff; }
.qr{ max-width:260px; border-radius:12px; }
.preview{ width:160px; height:160px; object-fit:cover; border:1px solid #eee; border-radius:10px; }

/* Company cards (appraisal) */
.company-card img{ object-fit:contain; height:48px; }
.company-card{
  cursor:pointer;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.9);
}
.company-card.active{ border-color:#0d6efd; box-shadow:0 0 0 2px rgba(13,110,253,.25); }

/* Centered titles inside .card-header */
.card-header h3, .card-header .card-title{ text-align:center; width:100%; }

/* ===== Backdrop-filter Fallbacks（拆兩段，避開 Safari `or` 怪癖） ===== */
@supports not (backdrop-filter: blur(1px)) {
  .glass-effect,
  .glass-card,
  .order-summary,
  .hero-section,
  .modal-content,
  .alert.glass{ background:#ffffffee; }
  .glass-card,
  .order-summary,
  .modal-content{ border-color:rgba(0,0,0,.06); }
  .glass-nav{ background:#212529; }
}
@supports not (-webkit-backdrop-filter: blur(1px)) {
  .glass-effect,
  .glass-card,
  .order-summary,
  .hero-section,
  .modal-content,
  .alert.glass{ background:#ffffffee; }
  .glass-card,
  .order-summary,
  .modal-content{ border-color:rgba(0,0,0,.06); }
  .glass-nav{ background:#212529; }
}

/* ===========================
   Admin (scoped) – Products
   只對 <body class="pg-admin"> 生效
   =========================== */
.pg-admin .admin-wrap .card {
  border: 1px solid var(--pg-card-border);
  background: var(--pg-card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  /* Safari 穩定屬性 */
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  background-color: rgba(255,255,255,.01);
}
.pg-admin .admin-wrap .card-header {
  border-bottom: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  font-weight: 700;
}

/* 縮圖與小工具列 */
.pg-admin .thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.40);
  background: #fff;
}

/* 表格玻璃風（不影響其他頁，須配合 .glass） */
.pg-admin .table.glass thead th{
  background: rgba(30,144,255,.18);
  color:#fff; border-color: rgba(255,255,255,.25); vertical-align:middle;
}
.pg-admin .table.glass tbody td{
  background: rgba(255,255,255,.18);
  color:#14213d; border-color: rgba(255,255,255,.25);
}
.pg-admin .table.glass tbody tr:hover td{ background: rgba(255,255,255,.24); }

/* 操作按鈕群 */
.pg-admin .table-actions .btn{
  border-radius: 9999px;
}
.pg-admin .table-actions .btn-primary{
  background: linear-gradient(135deg, var(--pg-brand1) 0%, var(--pg-brand2) 100%);
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.pg-admin .table-actions .btn-primary:hover{
  filter: brightness(.96);
}
.pg-admin .table-actions .btn-outline-warning.glass-effect,
.pg-admin .table-actions .btn-outline-success.glass-effect{
  border-color: rgba(255,255,255,.45);
  background: var(--pg-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Safari 穩定屬性 */
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  background-color: rgba(255,255,255,.01);
}

/* 狀態徽章更協調（膠囊） */
.pg-admin .status-badge{
  border-radius: 9999px;
  padding: .4rem .7rem;
  letter-spacing: .3px;
}

/* 欄位寬度微調（價格輸入框對齊） */
.pg-admin .col-price{
  min-width: 160px;
}
.pg-admin .nowrap{ white-space: nowrap; }

/* ===========================
   Admin (scoped) – shared
   只對 <body class="pg-admin"> 生效
   =========================== */

/* 卡片容器（與上方定義相同，保留以免你原本就有兩段） */
.pg-admin .admin-wrap .card {
  border: 1px solid var(--pg-card-border);
  background: var(--pg-card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  background-color: rgba(255,255,255,.01);
}
.pg-admin .admin-wrap .card-header {
  border-bottom: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  font-weight: 700;
}

/* 共同工具：縮圖、nowrap */
.pg-admin .thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.40);
  background: #fff;
}
.pg-admin .nowrap { white-space: nowrap; }

/* 表格玻璃風（搭配 .table.glass 使用） */
.pg-admin .table-wrap { border-radius: 1rem; overflow: hidden; }
.pg-admin .table.glass thead th{
  background: rgba(30,144,255,.18);
  color:#fff; border-color: rgba(255,255,255,.25); vertical-align:middle;
}
.pg-admin .table.glass tbody td{
  background: rgba(255,255,255,.18);
  color:#14213d; border-color: rgba(255,255,255,.25);
}
.pg-admin .table.glass tbody tr:hover td{ background: rgba(255,255,255,.24); }

/* 操作按鈕群（儲存/換圖、上架/下架、催繳等） */
.pg-admin .table-actions .btn{
  border-radius: 9999px;
}
.pg-admin .table-actions .btn-primary{
  background: linear-gradient(135deg, var(--pg-brand1) 0%, var(--pg-brand2) 100%);
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.pg-admin .table-actions .btn-primary:hover{ filter: brightness(.96); }
.pg-admin .table-actions .btn-outline-warning.glass-effect,
.pg-admin .table-actions .btn-outline-success.glass-effect,
.pg-admin .table-actions .btn-outline-danger.glass-effect {
  border-color: rgba(255,255,255,.45);
  background: var(--pg-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  background-color: rgba(255,255,255,.01);
}

/* 狀態徽章（膠囊） */
.pg-admin .status-badge{
  border-radius: 9999px;
  padding: .4rem .7rem;
  letter-spacing: .3px;
}

/* 欄位寬度微調（價格輸入框對齊） */
.pg-admin .col-price{ min-width: 160px; }

/* 過濾列（搜尋/狀態/送出） */
.pg-admin .filter-bar .form-control,
.pg-admin .filter-bar .form-select{
  background: var(--pg-form-bg);
  border: 1px solid var(--pg-form-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter;
  background-color: rgba(255,255,255,.01);
}
.pg-admin .filter-bar .btn-primary{
  background: linear-gradient(135deg, var(--pg-brand1) 0%, var(--pg-brand2) 100%);
  border: none;
  border-radius: 9999px;
}

/* 小小訊息區 */
.pg-admin #msg .alert{ margin-bottom: 0; }

/* ===== Admin (scoped) — 不影響前台 ===== */
.pg-admin .admin-toolbar .form-control,
.pg-admin .admin-toolbar .form-select { max-width: 320px; }

.pg-admin .pill {
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.85);
  border-radius:999px;
  padding:.35rem .75rem;
}

.pg-admin .table-wrap { border-radius: 1rem; overflow: hidden; }
.pg-admin .table.glass thead th{
  background: rgba(30,144,255,.18);
  color:#fff; border-color: rgba(255,255,255,.25); vertical-align:middle;
}
.pg-admin .table.glass tbody td{
  background: rgba(255,255,255,.18);
  color:#14213d; border-color: rgba(255,255,255,.25);
}
.pg-admin .table.glass tbody tr:hover td{ background: rgba(255,255,255,.24); }

.pg-admin .action-group .btn { border-radius: 999px; }
.pg-admin .badge-state { border:1px solid rgba(255,255,255,.4); }
.pg-admin .minw-140 { min-width: 140px; }

.product-card .small i { opacity: .8; }
.product-card.disabled { filter: grayscale(.15) brightness(.9); }


/* ================================
   iOS / Safari compatibility patch
   Generated: 2025-09-30 07:00:16
   Notes:
   - Fixes 100vh issues on iOS (svh/dvh)
   - Ensures background images show via body::before
   - Adds .glass-btn (legible on glass) and safer fallbacks
   - Adds overrides for .btn-outline-light on glass
   ================================ */

/* Viewport height fixes for iOS Safari */
html, body { height: 100%; }
body {
  min-height: 100svh;
  min-height: 100dvh;
}
@supports not (height: 1svh) {
  body { min-height: 100vh; }
}

/* Background layer (ensure images live next to this CSS file) */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("background.jpg") center/cover no-repeat;
  z-index: 0;
}
@media (max-width: 768px) {
  body::before {
    background: url("background-mobile.jpg") center/cover no-repeat;
  }
}

/* Generic stacking context helper so content stays clickable */
.container, .navbar, .main, .content {
  position: relative;
  z-index: 1;
}

/* Glass effect (safe defaults) */
.glass-effect {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  z-index: 1;
}

.glass-nav {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255,255,255,0.20);
  position: sticky;
  top: 0;
  z-index: 10;
}

.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}

.glass-card {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.20);
  position: relative;
  z-index: 1;
}

/* New, legible glass button */
.glass-btn {
  color: #212529 !important;          /* dark text for contrast */
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.glass-btn:hover {
  background: rgba(255,255,255,0.90);
  color: #000 !important;
}

/* If keeping Bootstrap's outline-light with glass, make it readable */
.btn-outline-light.glass-effect,
.btn-outline-light.glass-btn {
  color: #212529 !important;
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.65);
}
.btn-outline-light.glass-effect:hover,
.btn-outline-light.glass-btn:hover {
  background: rgba(255,255,255,0.90);
  color: #000 !important;
  border-color: rgba(255,255,255,0.45);
}

/* Fallback when backdrop-filter is unavailable (older iOS) */
@supports not (backdrop-filter: blur(1px)) {
  .glass-effect,
  .glass-nav,
  .glass-card,
  .glass-btn {
    background: rgba(255,255,255,0.85) !important;
    color: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}