/* SalesPhoto — ToDoList-style: blue primary, small components, one-line rows */
:root {
  --blue:      #1565C0;
  --blue-dark: #0D47A1;
  --blue-soft: #E3F2FD;
  --ink:       #1A1A1A;
  --muted:     #6B7280;
  --line:      #E0E0E0;
  --bg:        #F5F7FA;
  --red:       #C62828;
  --radius:    6px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px;
  background: var(--blue); color: #fff;
  position: sticky; top: 0; z-index: 50;
}
.brand { color:#fff; font-weight:700; font-size:16px; text-decoration:none; letter-spacing:.2px; }
.topnav { display:flex; gap:6px; align-items:center; }

/* ---------- buttons (text only, no icons) ---------- */
.btn {
  display:inline-block; border:0; cursor:pointer; text-decoration:none;
  font-size:14px; padding:7px 12px; border-radius:var(--radius);
  background:#fff; color:var(--ink); line-height:1.1; text-align:center;
  font-family:inherit;
}
.btn-sm { font-size:13px; padding:5px 10px; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:active { background:var(--blue-dark); }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-ghost-dark { background:transparent; color:var(--blue); border:1px solid var(--blue); }
.btn-danger { background:#fff; color:var(--red); border:1px solid var(--red); }
.btn-block { width:100%; padding:10px; }
.wrap .btn-ghost, .card .btn-ghost, .lb-top .btn-ghost {
  color: var(--blue); border-color: var(--line);
}

/* ---------- layout ---------- */
.wrap { max-width: 900px; margin: 0 auto; padding: 10px 12px 90px; }
.page-title { font-size:17px; margin:10px 0; }
.muted { color: var(--muted); }
.small { font-size:12px; }
.right { text-align:right; }
.empty { text-align:center; color:var(--muted); padding:40px 10px; }

/* ---------- flashes ---------- */
.flashes { max-width:900px; margin:8px auto 0; padding:0 12px; }
.flash { padding:8px 12px; border-radius:var(--radius); font-size:13px; margin-bottom:6px; }
.flash-ok { background:#E8F5E9; color:#1B5E20; }
.flash-error { background:#FFEBEE; color:#B71C1C; }

/* ---------- login ---------- */
.login-card {
  max-width:320px; margin:12vh auto; background:#fff; padding:22px;
  border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.08); text-align:center;
}
.login-card h1 { font-size:20px; margin:0 0 2px; color:var(--blue); }
.login-card p { margin:0 0 18px; font-size:13px; }
.login-card label { display:block; text-align:left; font-size:13px; margin-bottom:10px; color:var(--muted); }
.login-card input { width:100%; margin-top:4px; }

input[type=text], input[type=password], input[type=search], .taginput {
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius);
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink);
}
input:focus { outline:none; border-color:var(--blue); }

/* ---------- toolbar / filters ---------- */
.toolbar { background:#fff; border-radius:var(--radius); padding:8px 10px; margin-bottom:8px; }
.row1 { margin-bottom:7px; }
.modes { display:flex; gap:6px; flex-wrap:wrap; }
.mode {
  font-size:13px; padding:4px 10px; border-radius:14px; text-decoration:none;
  color:var(--blue); background:var(--blue-soft); white-space:nowrap;
}
.mode.on { background:var(--blue); color:#fff; }
.row2 { display:flex; gap:6px; }
.search { flex:1; }

/* ---------- tag chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chip-group { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-right:10px; }
.chip-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-right:2px; }
.chip {
  display:inline-block; font-size:13px; padding:3px 10px; border-radius:13px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  text-decoration:none; white-space:nowrap; line-height:1.4;
}
.chip.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.chip.recent { border-color:var(--blue); color:var(--blue); }
.chips.inline .chip { display:inline-flex; align-items:center; }
.hidden-cb { position:absolute; opacity:0; width:0; height:0; }
.chip.toggle { cursor:pointer; }
.chip.toggle input:checked + span { }
.chip.toggle:has(input:checked) { background:var(--blue); border-color:var(--blue); color:#fff; }
.add-chip { cursor:pointer; font-family:inherit; color:var(--blue); border-style:dashed; }

/* ---------- photo grid ---------- */
.grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:3px;
}
@media (min-width:560px) { .grid { grid-template-columns:repeat(4, 1fr); } }
@media (min-width:820px) { .grid { grid-template-columns:repeat(6, 1fr); } }
.cell {
  position:relative; margin:0; aspect-ratio:1/1; overflow:hidden;
  background:#E8EAED; border-radius:3px; cursor:pointer;
}
.cell img { width:100%; height:100%; object-fit:cover; display:block; }
.fav-badge {
  position:absolute; top:4px; right:5px; color:#FFD54F;
  font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ---------- select mode ---------- */
.select-btn { cursor:pointer; font-family:inherit; }
.select-btn.on { background:#fff; color:var(--blue); border-color:#fff; }

/* 阻止手機長按彈「儲存圖片」系統 menu，令長按可以自己處理
   ⚠️ iOS 要直接落喺 <img> 先有效，落喺 parent 唔夠 */
.cell,
.cell img {
  -webkit-touch-callout: none;      /* iOS: 唔彈 callout menu */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: auto;
}
.cell img { pointer-events: none; }   /* 令 touch 直接落喺 .cell（唔會被 img 截） */

.pick {
  position:absolute; top:5px; left:5px; width:20px; height:20px;
  border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.28);
  transition:background .12s, transform .12s; pointer-events:none;
}
body.selecting .pick { display:block; }
body:not(.selecting) .pick { display:none; }
.cell.picked .pick {
  background:var(--blue); border-color:#fff;
  box-shadow:inset 0 0 0 2px #fff;
}
.cell.picked { outline:3px solid var(--blue); outline-offset:-3px; }
.cell.picked img { opacity:.72; }
body.selecting .cell { cursor:pointer; }

/* 長按觸發時閃一下，畀用戶知道已經觸發 */
.cell.longpress-flash { animation: lpflash .4s ease-out; }
@keyframes lpflash {
  0%   { box-shadow: inset 0 0 0 4px var(--blue); }
  100% { box-shadow: inset 0 0 0 0 var(--blue); }
}

.cell-cap {
  position:absolute; left:0; right:0; bottom:0; padding:3px 5px;
  font-size:10px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.62));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:none;
}
body.selecting .cell-cap { display:block; }

/* bulk action bar */
.bulk-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
}
.bulk-bar[hidden] { display:none; }
.bulk-count { font-size:13px; color:var(--blue); font-weight:600; }
.bulk-actions { display:flex; gap:6px; }
.bulk-bar .btn-danger { color:var(--red); border-color:var(--red); }
.bulk-bar .btn-ghost { color:var(--muted); border-color:var(--line); }

/* ---------- modal ---------- */
.modal {
  position:fixed; inset:0; z-index:300; background:rgba(12,16,22,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal[hidden] { display:none; }
@media (min-width:600px) { .modal { align-items:center; } }

.modal-card {
  background:#fff; width:100%; max-width:520px; max-height:88vh;
  border-radius:10px 10px 0 0; display:flex; flex-direction:column;
}
@media (min-width:600px) { .modal-card { border-radius:10px; } }

.modal-head { padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.modal-body { padding:12px 14px; overflow-y:auto; flex:1; }
.modal-group { margin-bottom:14px; }
.modal-hint { margin:4px 0 0; }

/* modal 內 caption 輸入框 */
.modal-caption { width:100%; font-size:15px; padding:8px 10px; }
.modal-cap-hint { margin-top:4px; font-size:11px; }
.modal-foot {
  display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.modal-foot .btn { flex:1; padding:10px; }
.modal-foot .btn-ghost { color:var(--muted); border-color:var(--line); }

/* 三態 chip：off / add(藍) / remove(紅) */
.chip.tri { cursor:pointer; user-select:none; }
.chip.tri.off-remove {
  background:#FFEBEE; border-color:var(--red); color:var(--red);
  text-decoration:line-through;
}

/* ---------- lightbox ---------- */
.lightbox {
  position:fixed; inset:0; background:rgba(12,16,22,.96); z-index:200;
  display:flex; flex-direction:column;
}
.lightbox[hidden] { display:none; }

.lb-top {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; flex:0 0 auto;
}
.lb-left, .lb-right { display:flex; gap:6px; align-items:center; }
.lb-top .btn-ghost { color:#fff; border-color:rgba(255,255,255,.45); }

/* 旋轉掣：icon 大啲，清楚見到係順時針箭頭 */
.lb-rotate-btn {
  font-size:20px; line-height:1; padding:4px 12px;
  min-width:46px; text-align:center;
}
.lb-rotate-btn.spinning { animation: spin .5s linear; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.lb-rotate-btn:disabled { opacity:.5; }

.lb-stage { flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:0; }
#lbImg { max-width:100%; max-height:100%; object-fit:contain; }
.lb-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.16); color:#fff; border:0; cursor:pointer;
  font-size:26px; width:42px; height:56px; border-radius:var(--radius); line-height:1;
}
.lb-prev { left:6px; } .lb-next { right:6px; }

.lb-info { padding:10px 14px 14px; color:#fff; flex:0 0 auto; }
.lb-caption { font-size:14px; margin-bottom:5px; }
.lb-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:5px; }
.lb-tags .chip { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; }
.lb-info .muted { color:#9AA4B2; }

/* 底部一行：左邊 metadata、右邊 Close 掣（大啲，方便單手撳） */
.lb-bottom {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px; margin-top:6px;
}
.btn-close {
  flex:0 0 auto; font-size:15px; padding:10px 22px;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important; border-color:rgba(255,255,255,.45) !important;
}
.btn-close:active { background:rgba(255,255,255,.28) !important; }

#lbFav.on { color:#FFD54F; border-color:#FFD54F; }

/* ---------- upload form ---------- */
.field { background:#fff; border-radius:var(--radius); padding:10px; margin-bottom:8px; }
.lbl { display:block; font-size:12px; color:var(--muted); text-transform:uppercase;
       letter-spacing:.4px; margin-bottom:6px; }
.field input[type=file] { width:100%; font-size:13px; }
.field input[type=text] { width:100%; }
.previews { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.previews img { width:56px; height:56px; object-fit:cover; border-radius:4px; }

/* camera input 隱藏，用 label 當按鈕（手機先開相機） */
.camera-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.camera-row { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.camera-row .btn { display:inline-block; }

/* ---------- quick tags（上載頁一撳即揀）---------- */
.quick-field { background:#F0F7FF; border:1px solid var(--blue-soft); }
.quick-row { display:flex; flex-wrap:wrap; gap:6px; }
.quick-btn {
  font-family:inherit; font-size:14px; padding:7px 14px; border-radius:16px;
  background:#fff; border:1px solid var(--blue); color:var(--blue);
  cursor:pointer; line-height:1.2; font-weight:500;
}
.quick-btn.recent { border-width:2px; }
.quick-btn.on { background:var(--blue); color:#fff; }
.chip.quick-on { background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; }
.newtag-input { width:100%; margin-top:6px; }
.sticky-actions {
  position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line);
}
.sticky-actions .btn { flex:1; padding:11px; }
.sticky-actions .btn-ghost { color:var(--muted); border-color:var(--line); }

/* ---------- tags admin ---------- */
.card { background:#fff; border-radius:var(--radius); padding:12px; margin-bottom:10px; }
.card h3 { margin:0 0 8px; font-size:14px; color:var(--blue); }

/* 頁面標題 + 返回掣同一行 */
.page-head {
  display:flex; align-items:center; gap:10px;
  margin:10px 0 4px;
}
.page-head .inline-title { margin:0; }
.page-head .btn { flex:0 0 auto; }
.tagtable { width:100%; border-collapse:collapse; }
.tagtable td { padding:3px 0; vertical-align:middle; }
.inline-form { display:inline-flex; gap:6px; align-items:center; }
.inline-form input[type=text] { width:auto; }
.addrow { margin-top:8px; width:100%; }
.addrow input[type=text] { flex:1; }
.taginput { min-width:120px; }