/* POPNIX Flood - กล้อง CCTV ถนน กทม. (section #cctv + หน้าต่างดูภาพ + หมุดบนแผนที่) ใช้ token สีจาก water.css เท่านั้น
   layout: แถบค้นหา + ผนังภาพกล้อง (ภาพจากกล้องขนาด 352x288 = 11:9) */

/* ---------- toolbar ---------- */
.cc-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.cc-bar .search { max-width: 420px; }
.cc-near { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--core); color: var(--strong);
    cursor: pointer; box-shadow: var(--inset); transition: border-color .3s var(--ease), transform .4s var(--ease); }
.cc-near i { color: var(--accent); }
.cc-near:hover, .cc-near[aria-pressed="true"] { border-color: var(--accent); }
.cc-near:active { transform: scale(.98); }
.cc-near.busy i { animation: ccPulse 1s var(--ease) infinite alternate; }
@keyframes ccPulse { to { opacity: .25; } }
.cc-head { color: var(--muted); font-size: .95rem; margin-bottom: 14px !important; min-height: 1.6em; }

/* ---------- tiles ---------- */
.cc-tiles > li { display: flex; }
.cc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cc-tile { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 6px; text-align: left; cursor: pointer; border-radius: var(--r-shell); border: 1px solid var(--line);
    background: var(--shell); color: var(--text); box-shadow: var(--shadow); transition: transform .5s var(--ease), border-color .35s var(--ease); }
.cc-tile:hover { transform: translateY(-3px); border-color: var(--line-2); }
.cc-tile:active { transform: scale(.985); }
.cc-shot { position: relative; display: block; aspect-ratio: 11 / 9; border-radius: var(--r-core); overflow: hidden; background: var(--bg-2); }
.cc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cc-tile:hover .cc-shot img { transform: scale(1.03); }
.cc-age { position: absolute; top: 10px; left: 10px; font-style: normal; font-size: .8rem; line-height: 1; padding: 6px 10px; border-radius: 999px;
    background: var(--glass); color: var(--strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cc-flag { align-self: flex-start; font-size: .78rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 9px; border-radius: 999px; margin-bottom: 4px; }
.cc-age.old { color: var(--warn); font-weight: 600; }
.cc-none { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.cc-none i { font-size: 1.8rem; color: var(--faint); }
.cc-cap { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 8px; min-width: 0; }
.cc-cap b { color: var(--strong); font-weight: 600; line-height: 1.4; }
.cc-cap small { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.cc-cap small:empty { display: none; }
.cc-cap .cc-org { color: var(--faint); font-size: .78rem; margin-top: 2px; }
.cc-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; border-radius: var(--r-core);
    border: 1px dashed var(--line-2); color: var(--muted); text-align: center; }
.cc-empty i { font-size: 2rem; color: var(--accent); opacity: .7; }
.cc-empty p { max-width: 42ch; }
.cc-more { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 6px; }
.cc-more button { border: 1px solid var(--line-2); background: transparent; color: var(--strong); border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: border-color .3s var(--ease); }
.cc-more button:hover { border-color: var(--accent); }
.cc-sk { aspect-ratio: 11 / 10; border-radius: var(--r-shell); background: linear-gradient(90deg, var(--line) 0%, var(--line-2) 50%, var(--line) 100%); background-size: 220% 100%; animation: sk 1.5s var(--ease) infinite; }

/* ---------- sheet ---------- */
.cc-big { position: relative; margin: 18px 0 10px; min-height: 12rem; border-radius: var(--r-core); overflow: hidden; background: var(--bg-2); }
.cc-big img { display: block; width: 100%; height: auto; max-height: 78dvh; object-fit: contain; }   /* ขนาดจริงเต็มความกว้างหน้าต่าง */
@media (min-width: 641px) { .cc-sheet .modal-dialog { max-width: min(96vw, var(--ccw, 820px)); } }   /* --ccw = ความกว้างจริงของภาพ + ขอบ (cctv.js) */
.cc-when { color: var(--muted); font-size: .95rem; }
.cc-when.old { color: var(--warn); font-weight: 600; }
.cc-sibs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cc-sibs:empty { display: none; }
.cc-sibs span { color: var(--muted); font-size: .88rem; margin-right: 2px; }
.cc-sibs button { border: 1px solid var(--line-2); background: var(--shell); color: var(--strong); border-radius: 999px; padding: 6px 14px; font-size: .9rem; cursor: pointer; }
.cc-sibs button:hover { border-color: var(--accent); }

/* ---------- map ---------- */
.cc-pin { background: none; border: 0; }   /* หมุดละ 1 node: ไอคอนวาดด้วย ::before (บนแผนที่เห็นพร้อมกันหลายร้อยตัว) ไม่ใส่ transform ที่ตัว .cc-pin เพราะ Leaflet ใช้วางตำแหน่ง */
.cc-pin::before { content: "\f8ac"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; font: 900 11px/1 var(--fa-family-classic, 'Font Awesome 7 Pro');
    color: var(--core); background: var(--muted); box-shadow: 0 0 0 1.5px var(--core), 0 4px 10px -4px var(--shadow-c); transition: transform .3s var(--ease); }
.cc-pin.flood::before { background: var(--accent); }
.cc-pin:hover::before { transform: scale(1.15); }
.cc-legend { align-items: center; margin-top: 8px; }
.cc-legend b { color: var(--strong); font-weight: 600; }
.cc-legend .cc-sq { width: 12px; height: 12px; border-radius: 3px; background: var(--muted); }
.cc-legend .cc-sq.flood { background: var(--accent); }
.cc-legend small { color: var(--faint); }
.cc-toggle { border: 0; background: none; color: var(--accent); padding: 4px 2px; cursor: pointer; font-weight: 600; }

@media (max-width: 640px) {
    .cc-bar .search { max-width: none; }
    .cc-near { width: 100%; justify-content: center; }
    .cc-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cc-tile { padding: 4px; border-radius: 22px; }
    .cc-shot { border-radius: 18px; }
    .cc-age { top: 7px; left: 7px; font-size: .72rem; padding: 5px 8px; }
    .cc-cap { padding: 9px 8px 6px; } .cc-cap b { font-size: .95rem; } .cc-cap small { font-size: .8rem; } .cc-cap .cc-org { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-near.busy i, .cc-sk { animation: none !important; }
    .cc-tile, .cc-shot img, .cc-pin::before { transition: none; }
}