/* ============================================================
   Daily Image Report - ธีมเข้ม control-room โทนเขียว-ฟ้า (NEXTOPIA)
   ============================================================ */
/* ให้ attribute hidden ซ่อน element ได้เสมอ (กัน .lightbox/.pager ที่ตั้ง display:flex ทับ) */
[hidden]{display:none !important;}

:root{
  --bg:        #07141a;
  --bg-2:      #0b1c23;
  --panel:     #0f242c;
  --panel-2:   #142e37;
  --line:      #1f4551;
  --line-soft: #183843;
  --text:      #e6f3f2;
  --text-dim:  #9ab8bc;
  --text-mute: #5f8085;
  --amber:     #86c53f;
  --amber-dim: #4f9a2f;
  --cyan:      #34b3d6;
  --radius:    14px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(134,197,63,.14), transparent 62%),
    radial-gradient(1000px 560px at -8% 108%, rgba(52,179,214,.13), transparent 62%),
    radial-gradient(800px 500px at 50% 45%, rgba(47,168,155,.07), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* เกรนบาง ๆ ให้พื้นมีมิติ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 24px;
  background:rgba(7,20,26,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:13px;}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(120deg, #86c53f, #34b3d6);
  box-shadow:0 0 0 1px rgba(134,197,63,.30), 0 6px 18px rgba(52,179,214,.18);
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; inset:9px; border-radius:3px;
  background:var(--bg); opacity:.85;
}
.brand-text h1{font-size:16px; font-weight:700; margin:0; letter-spacing:.2px;}
.brand-text span{font-size:12px; color:var(--text-dim);}

.controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.date-input{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-family:var(--mono); font-size:13px; padding:8px 10px; border-radius:9px;
  color-scheme:dark;
}
.btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-family:var(--sans); font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:9px; cursor:pointer; transition:.15s;
}
.btn:hover{border-color:var(--amber-dim); color:var(--amber);}
.btn.icon{padding:8px 12px; font-size:16px; line-height:1;}
.btn.ghost{background:transparent;}
.btn.sm{padding:6px 11px; font-size:12px;}
a.btn{text-decoration:none; display:inline-block;}

/* ---------- Layout ---------- */
.wrap{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:24px;}
.panel{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:22px;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.panel-head h2{font-size:14px; font-weight:600; margin:0; color:var(--text); letter-spacing:.3px;}
.panel-actions{display:flex; gap:8px;}
.muted{color:var(--text-mute); font-size:12px; font-family:var(--mono);}
.date-tag{font-family:var(--mono); color:var(--amber); font-weight:600;}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:16px; margin-bottom:22px;}
.kpi{
  background:linear-gradient(160deg, var(--panel), var(--bg-2));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:18px 20px; position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); opacity:.55;}
.kpi-video::before{background:var(--cyan); opacity:.6;}
.kpi-label{font-size:12px; color:var(--text-dim); margin-bottom:8px;}
.kpi-value{font-family:var(--mono); font-size:30px; font-weight:600; line-height:1; color:var(--text);}
.kpi-value.sm{font-size:19px;}
.kpi-sub{font-size:11px; color:var(--text-mute); margin-top:7px;}

/* ---------- Hour chart ---------- */
.hourchart{display:grid; grid-template-columns:repeat(24,1fr); gap:5px; align-items:end; height:150px;}
.hbar-wrap{display:flex; flex-direction:column; align-items:center; gap:6px; height:100%;}
.hbar-track{flex:1; width:100%; display:flex; align-items:flex-end;}
.hbar{
  width:100%; min-height:2px; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--amber), var(--amber-dim));
  transition:height .4s cubic-bezier(.2,.8,.2,1);
}
.hbar.peak{background:linear-gradient(180deg, #a6e05a, var(--amber));}
.hbar.zero{background:var(--line);}
.hbar-label{font-family:var(--mono); font-size:9px; color:var(--text-mute);}
.hbar-wrap:hover .hbar{filter:brightness(1.15);}
.hbar-wrap{position:relative;}
.hbar-wrap[data-count]:hover::after{
  content:attr(data-count) " ภาพ"; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  font-family:var(--mono); font-size:10px; padding:3px 7px; border-radius:6px; white-space:nowrap; z-index:5;
}

/* ---------- Day strip ---------- */
.daystrip{display:flex; gap:7px; overflow-x:auto; padding-bottom:6px;}
.daycell{
  flex:0 0 auto; min-width:62px; background:var(--panel-2); border:1px solid var(--line-soft);
  border-radius:10px; padding:10px 8px; text-align:center; cursor:pointer; transition:.15s;
}
.daycell:hover{border-color:var(--amber-dim);}
.daycell.active{border-color:var(--amber); background:rgba(134,197,63,.10);}
.daycell .dc-spark{height:30px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:6px;}
.daycell .dc-fill{width:22px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--cyan),#2c8c83); min-height:3px;}
.daycell.active .dc-fill{background:linear-gradient(180deg,var(--amber),var(--amber-dim));}
.daycell .dc-date{font-family:var(--mono); font-size:11px; color:var(--text);}
.daycell .dc-count{font-family:var(--mono); font-size:10px; color:var(--text-mute);}

/* ---------- Grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.tile{
  position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line-soft); cursor:pointer;
  opacity:0; transform:translateY(8px); animation:rise .4s forwards;
  /* ข้ามการ render ใบที่ยังไม่เข้าจอ ทำให้ grid ใหญ่ ๆ ลื่นขึ้นมาก */
  content-visibility:auto; contain-intrinsic-size:auto 180px;
}
/* ปิด animation ให้ผู้ที่ตั้งค่าลดการเคลื่อนไหว + กันภาพค้างโปร่งใส */
@media (prefers-reduced-motion:reduce){
  .tile{opacity:1; transform:none; animation:none;}
}
@keyframes rise{to{opacity:1; transform:none;}}
.tile img{width:100%; height:100%; object-fit:cover; display:block; transition:.3s;}
.tile:hover img{transform:scale(1.06);}
.tile .tile-time{
  position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px;
  font-family:var(--mono); font-size:10px; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.7));
  opacity:0; transition:.2s;
}
.tile:hover .tile-time{opacity:1;}

/* ป้าย/ไอคอนสำหรับวิดีโอ */
.tile.is-video::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(7,20,26,.55); border:1.5px solid rgba(255,255,255,.85); z-index:2;
}
.tile.is-video::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-38%,-50%);
  border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; z-index:3;
}
.tile .vid-dur{
  position:absolute; top:7px; right:7px; z-index:3;
  font-family:var(--mono); font-size:10px; color:#fff;
  background:rgba(7,20,26,.72); padding:2px 6px; border-radius:6px;
}
.grid-empty{text-align:center; color:var(--text-mute); padding:40px; font-family:var(--mono);}
.pager{display:flex; align-items:center; gap:14px; justify-content:center; margin-top:18px;}

.footer{display:flex; justify-content:space-between; color:var(--text-mute); font-size:11px; font-family:var(--mono); padding:8px 4px;}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(5,16,20,.95); display:flex; align-items:center; justify-content:center;}
.lb-stage{max-width:90vw; max-height:82vh; display:flex;}
.lb-stage img{max-width:90vw; max-height:82vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6);}
.lb-stage video{max-width:90vw; max-height:82vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); background:#000;}
.lb-close{position:absolute; top:18px; right:22px; font-size:22px; background:none; border:none; color:#fff; cursor:pointer; opacity:.8;}
.lb-close:hover{opacity:1;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); font-size:40px; background:none; border:none; color:#fff; cursor:pointer; opacity:.6; padding:0 20px;}
.lb-nav:hover{opacity:1;}
.lb-nav.prev{left:8px;} .lb-nav.next{right:8px;}
.lb-info{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:12px; color:var(--text-dim); background:rgba(0,0,0,.5); padding:8px 16px; border-radius:8px; text-align:center;}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .topbar{flex-direction:column; align-items:stretch;}
  .wrap{padding:16px;}
  .hourchart{height:120px; gap:3px;}
  .hbar-label{display:none;}
}

/* ---------- Print (พิมพ์รายงาน) ---------- */
@media print{
  body{background:#fff; color:#000;}
  .grain,.topbar,.controls,.panel-actions,.pager,.lightbox,.daystrip{display:none !important;}
  .panel,.kpi{border:1px solid #ccc; background:#fff; break-inside:avoid;}
  .kpi-value,.muted,.date-tag,.kpi-sub,.kpi-label{color:#000 !important;}
  .hbar{background:#666 !important;}
  .grid{grid-template-columns:repeat(6,1fr); gap:4px;}
  .tile{opacity:1 !important; transform:none !important; border:1px solid #ddd;}
  .tile .tile-time{display:none;}
  .tile.is-video::before,.tile.is-video::after,.tile .vid-dur{display:none !important;}
}

/* ============================================================
   ตัวดูรูป (viewer) - ค่าเริ่มต้นซ่อน (display:none) เปิดด้วย .open เท่านั้น
   ============================================================ */
.viewer{display:none; position:fixed; inset:0; z-index:200; background:rgba(5,16,20,.96); flex-direction:column;}
.viewer.open{display:flex;}
.viewer-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;}
.viewer-back{display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#fff; font-family:inherit; font-size:14px; padding:8px 15px; border-radius:9px; cursor:pointer;}
.viewer-back:hover{background:rgba(255,255,255,.18);}
.viewer-count{color:var(--text); font-family:var(--mono,monospace); font-size:13px;}
.viewer-close{background:none; border:none; color:#fff; font-size:22px; cursor:pointer; opacity:.85; padding:4px 8px; line-height:1;}
.viewer-close:hover{opacity:1;}
.viewer-stage{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 8px;}
.viewer-stage img{max-width:94vw; max-height:100%; object-fit:contain; border-radius:8px;}
.viewer-stage video{max-width:94vw; max-height:100%; border-radius:8px; background:#000;}
.viewer-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.38); border:none; color:#fff; font-size:30px; width:52px; height:66px; border-radius:10px; cursor:pointer; opacity:.75;}
.viewer-nav:hover{opacity:1;}
.viewer-nav.prev{left:10px;} .viewer-nav.next{right:10px;}
.viewer-info{text-align:center; color:var(--text-dim); font-family:var(--mono,monospace); font-size:12px; padding:10px 16px 18px; word-break:break-all;}

/* ============================================================
   การ์ดสรุปภาพรวมทั้งหมด (แทนบรรทัดตัวเล็ก)
   ============================================================ */
.overview-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
.ov-card{background:linear-gradient(160deg, var(--panel), var(--bg-2)); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px 14px; text-align:center; position:relative; overflow:hidden;}
.ov-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); opacity:.6;}
.ov-card.vid::before{background:var(--cyan);}
.ov-num{font-family:var(--mono); font-size:27px; font-weight:600; color:var(--text); line-height:1.15;}
.ov-lbl{font-size:12px; color:var(--text-dim); margin-top:7px;}
.daystrip-head{font-size:12px; color:var(--text-mute); margin-bottom:10px; font-family:var(--mono);}
@media(max-width:640px){ .overview-stats{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   กราฟย้อนหลัง 7 วัน (แท่งพอดี 7 วัน ไม่ต้องเลื่อน)
   ============================================================ */
.weekchart{display:grid; grid-template-columns:repeat(7,1fr); gap:12px; align-items:end; height:180px;}
.wc-col{display:flex; flex-direction:column; align-items:center; height:100%; cursor:pointer; border-radius:10px; padding:6px 2px; transition:background .15s;}
.wc-col:hover{background:var(--panel-2);}
.wc-col.active{background:rgba(134,197,63,.12);}
.wc-val{font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:6px;}
.wc-barwrap{flex:1; width:100%; max-width:46px; display:flex; align-items:flex-end; justify-content:center;}
.wc-fill{width:100%; min-height:4px; border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--cyan), #2c8c83);}
.wc-col.active .wc-fill{background:linear-gradient(180deg, var(--amber), var(--amber-dim));}
.wc-date{font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-top:8px;}
.wc-col.active .wc-date{color:var(--amber);}