*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* F7: ป้องกัน horizontal scroll บน mobile — ใช้ clip (ไม่ใช่ hidden) เพื่อไม่ break position:sticky */
html,body{overflow-x:clip;max-width:100vw}
:root{
--blue:#1a73e8;--blue-d:#1557b0;--red:#e53935;--green:#2e7d32;
--orange:#f57c00;--purple:#7b1fa2;--bg:#0f1923;--card:#1a2332;
--text:#e8eaed;--muted:#9aa0a6;--border:#2d3748;
--r:10px;--sh:0 2px 16px rgba(0,0,0,.4);--nav:58px;
}
body{font-family:'Sarabun',sans-serif;background:var(--bg);color:var(--text);font-size:15px}

/* LOGIN */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0f1923,#1a2332);display:flex;align-items:center;justify-content:center;z-index:9999}
.login-box{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:42px 38px;width:390px;box-shadow:0 10px 50px rgba(0,0,0,.5);text-align:center}
.login-logo{width:74px;height:74px;background:linear-gradient(135deg,#e53935,#b71c1c);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;color:#fff;box-shadow:0 4px 20px rgba(229,57,53,.4)}
.login-title{font-size:22px;font-weight:700;color:var(--text)}.login-subtitle{font-size:13px;color:var(--muted);margin:4px 0 26px}.login-hint{font-size:12px;color:var(--muted);margin-top:14px}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,#e53935,#b71c1c);color:#fff;border:none;border-radius:var(--r);font-size:16px;font-family:inherit;font-weight:600;cursor:pointer;margin-top:8px}
.btn-login:hover{opacity:.9}
.btn-register-link{width:100%;margin-top:12px;padding:12px;background:transparent;color:#64b5f6;border:1px solid #64b5f6;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:600;font-size:15px}
.btn-register-link:hover{background:rgba(100,181,246,.15)}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 20px;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#e53935;margin-right:16px;white-space:nowrap}
.nav-brand i{font-size:20px}
.nav-menu{display:flex;gap:4px;flex:1}
.nav-link{padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:background .15s,color .15s;white-space:nowrap}
.nav-link:hover{background:rgba(255,255,255,.08);color:var(--text)}.nav-link.active{background:rgba(229,57,53,.15);color:#ef5350;font-weight:600}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-add-pin{padding:7px 14px;background:#e53935;color:#fff;border:none;border-radius:8px;font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.btn-add-pin:hover{background:#b71c1c}.btn-add-pin.active{background:#424242}
.btn-link-mode{width:34px;height:34px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.btn-link-mode:hover{background:rgba(26,115,232,.3);color:#64b5f6}.btn-link-mode.active{background:#7b1fa2;color:#fff;border-color:#7b1fa2}
.user-badge{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text)}
.role-badge{color:#fff;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700}
.btn-logout{padding:6px 12px;background:transparent;border:1px solid var(--border);border-radius:8px;color:#ef5350;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap}
.btn-logout:hover{background:rgba(229,57,53,.15)}

/* SECURITY BADGE — เซสชั่นปลอดภัย indicator (P08, P15) */
.security-badge{background:rgba(46,125,50,.18);border:1px solid rgba(46,125,50,.4);color:#81c784;padding:5px 10px;border-radius:14px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s;white-space:nowrap}
.security-badge:hover{background:rgba(46,125,50,.3);border-color:#2e7d32}
.security-badge i{font-size:12px}
.security-label{font-size:11px}
@media (max-width: 1100px){
  .security-label{display:none}
  .security-badge{padding:5px 8px}
}

/* PRINT — Dashboard PDF export + Briefing print improvements (มิ.ย. 2026) */
.print-only{display:none}
@media print{
  /* @page: A4 portrait, margin เผื่อข้อความหัวศาล + ไม่มี URL header (browser ไม่แสดงเสมอ — ต้องตั้งใน print dialog) */
  @page{margin:18mm 14mm;size:A4 portrait}
  @page :first{margin-top:14mm}
  html,body{background:#fff!important;color:#000!important;font-family:'Sarabun','TH Sarabun New',serif!important}
  /* ซ่อนทุก UI ที่ไม่เกี่ยวกับเอกสาร */
  .navbar,.map-controls,.legend-box,.map-stats,.gps-team-panel,.side-panel,.modal-overlay,.toast,.page-header .header-controls,#notifBell,#draftModal,.fab-wrap,.btn-mobile-sheet,#mobileBottomSheet,.bottom-sheet-backdrop,#maintenanceOverlay{display:none!important}
  .page{padding-top:0!important;display:none!important}
  .page.active{display:block!important}
  .print-only{display:block!important}
  /* Cards + tables — high contrast, no shadow, page-break safe */
  .dash-card,.kpi-card{break-inside:avoid;page-break-inside:avoid;border:1px solid #999!important;background:#fff!important;color:#000!important;box-shadow:none!important;border-radius:4px!important}
  .dash-card-title,.kpi-val{color:#000!important}
  .dash-charts-row{break-inside:avoid;page-break-inside:avoid}
  canvas{max-width:100%!important;height:auto!important}
  /* table for evidence/timeline lists */
  table{border-collapse:collapse;width:100%;font-size:11pt;page-break-inside:auto}
  table thead{display:table-header-group}
  tr{page-break-inside:avoid}
  th,td{border:1px solid #999;padding:5px 8px;text-align:left;color:#000;background:#fff}
  th{background:#f0f0f0!important;font-weight:700}
  /* Heading hierarchy — เป็นทางการ */
  h1,h2,h3{color:#000!important;font-weight:700}
  h1{font-size:18pt;border-bottom:2px solid #000;padding-bottom:4mm;margin-bottom:6mm}
  h2{font-size:14pt;border-bottom:1px solid #666;padding-bottom:2mm;margin-top:6mm;margin-bottom:3mm}
  h3{font-size:12pt;margin-top:4mm}
  /* Links — แสดง URL ในวงเล็บ (สำหรับเอกสารกระดาษ) */
  a[href]:after{content:" ("attr(href)")";font-size:9pt;color:#555}
  a[href^="javascript"]:after,a[href^="#"]:after{content:""}
  /* QR code + signature blocks */
  .print-qr,.print-sig{break-inside:avoid;page-break-inside:avoid}
  /* Footer page number ใช้ counter (browser support บ้าง) */
  @page{@bottom-right{content:"หน้า " counter(page) " / " counter(pages);font-size:9pt;color:#555}}
}

/* NAV ICON LABELS — แสดง text เล็ก ๆ ข้าง icon บน desktop เพื่อช่วยกลุ่มสูงอายุ/IT ต่ำ */
.btn-link-mode .btn-label,
.btn-gps-nav .btn-label,
.btn-search-adv .btn-label{font-size:11px;color:inherit;white-space:nowrap;margin-left:6px;font-weight:500;font-family:inherit}
.btn-link-mode:has(.btn-label),
.btn-gps-nav:has(.btn-label),
.btn-search-adv:has(.btn-label){width:auto;min-width:34px;padding:0 10px;gap:4px}
@media (max-width: 1100px){
  .btn-link-mode .btn-label,
  .btn-gps-nav .btn-label,
  .btn-search-adv .btn-label{display:none}
  .btn-link-mode:has(.btn-label),
  .btn-gps-nav:has(.btn-label),
  .btn-search-adv:has(.btn-label){width:34px;padding:0}
}

/* GPS TEAM ONLINE PANEL */
.gps-team-panel{position:fixed;top:calc(var(--nav)+10px);right:200px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:550;width:240px;max-height:calc(100vh - var(--nav) - 40px);display:none;flex-direction:column;overflow:hidden}
.gps-team-header{padding:10px 14px;background:linear-gradient(135deg,#1a73e8,#1557b0);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;border-radius:12px 12px 0 0}
.gps-team-count{background:rgba(255,255,255,.25);padding:1px 8px;border-radius:10px;font-size:11px;margin-left:auto;margin-right:6px}
.gps-team-close{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;padding:2px 6px;opacity:.7;transition:opacity .15s}
.gps-team-close:hover{opacity:1}
.gps-team-body{overflow-y:auto;flex:1;padding:6px}
.gps-team-empty{padding:20px 12px;text-align:center;font-size:12px;color:var(--muted)}
.gps-team-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;margin-bottom:2px}
.gps-team-item:hover{background:rgba(255,255,255,.08)}
.gps-team-avatar{width:32px;height:32px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;flex-shrink:0;font-family:inherit}
.gps-team-info{flex:1;min-width:0}
.gps-team-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gps-team-meta{font-size:10px;color:var(--muted);margin-top:1px}
.gps-team-arrow{color:var(--muted);font-size:11px;opacity:.6}
@media (max-width: 768px){
  .gps-team-panel{right:10px;left:10px;width:auto;top:auto;bottom:80px;max-height:40vh}
}

/* MAP FILTER CHIPS — clickable + active state */
.stat-chip.filter-chip{transition:background .15s,border-color .15s,transform .1s;user-select:none}
.stat-chip.filter-chip:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.stat-chip.filter-chip.active{background:rgba(229,57,53,.18);border-color:rgba(229,57,53,.5);box-shadow:0 0 0 1px rgba(229,57,53,.3)}

/* PROGRESS BAR — reusable */
.progress-bar-track{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;position:relative}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#1a73e8,#64b5f6);border-radius:4px;transition:width .2s ease;box-shadow:0 0 8px rgba(26,115,232,.5)}
.progress-bar-fill.success{background:linear-gradient(90deg,#2e7d32,#81c784);box-shadow:0 0 8px rgba(46,125,50,.5)}
.progress-bar-fill.error{background:linear-gradient(90deg,#c62828,#ef5350);box-shadow:0 0 8px rgba(229,57,53,.5)}

/* NAV MORE — Hamburger dropdown สำหรับเมนูรอง */
.nav-more-wrap{position:relative;display:flex;align-items:center;margin-right:4px}
.btn-nav-more{padding:7px 12px;background:rgba(229,57,53,.12);border:1px solid rgba(229,57,53,.3);border-radius:8px;color:#ef5350;cursor:pointer;font-size:14px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.btn-nav-more:hover{background:rgba(229,57,53,.22);border-color:rgba(229,57,53,.55);color:#ff6b6b}
.btn-nav-more.active{background:#e53935;border-color:#e53935;color:#fff}
.nav-more-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);min-width:220px;padding:6px;z-index:1100;display:none;flex-direction:column;gap:2px}
.nav-more-dropdown.open{display:flex;animation:navMoreIn .12s ease-out}
@keyframes navMoreIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.nav-more-link{padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:background .15s,color .15s;white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-more-link:hover{background:rgba(229,57,53,.12);color:#ef5350}
.nav-more-link i{width:16px;text-align:center;font-size:13px}
.nav-more-link span{flex:1}
.nav-more-divider{height:1px;background:var(--border);margin:6px 4px;opacity:.6}

/* S10 Phase 2 (UX Batch C): Hamburger section group headers — categorize items */
.nav-more-section-header{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.6px;padding:8px 12px 4px;display:flex;align-items:center;gap:6px;user-select:none;pointer-events:none}
.nav-more-section-header i{font-size:9px;opacity:.6}

/* S10 Phase 2: FAB (Floating Action Button) — primary add pin action — thumb-zone */
.fab-wrap{position:fixed;bottom:20px;right:20px;z-index:550;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#e53935,#c62828);color:#fff;border:none;box-shadow:0 6px 18px rgba(229,57,53,.45),0 2px 6px rgba(0,0,0,.3);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .2s}
.fab:hover{transform:scale(1.06);box-shadow:0 8px 22px rgba(229,57,53,.55),0 3px 8px rgba(0,0,0,.4)}
.fab:active{transform:scale(.95)}
.fab.expanded{transform:rotate(45deg)}
.fab-sub{display:none;flex-direction:column;gap:8px;align-items:flex-end}
.fab-sub.open{display:flex;animation:fabSubIn .15s ease-out}
@keyframes fabSubIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fab-sub-item{display:flex;align-items:center;gap:10px;cursor:pointer;background:transparent;border:none;padding:0;font-family:inherit}
.fab-sub-item .fab-label{background:rgba(15,25,35,.95);color:#fff;padding:5px 11px;border-radius:6px;font-size:12px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4);font-weight:600}
.fab-sub-item .fab-mini{width:42px;height:42px;border-radius:50%;background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.4);font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.fab-sub-item:hover .fab-mini{background:rgba(0,137,123,.25);color:#fff}
@media(max-width:768px){
  .fab-wrap{bottom:14px;right:14px}
  .fab{width:52px;height:52px;font-size:20px}
}
/* FAB จะ hide บน page อื่นโดย JS — เพิ่ม class 'fab-hidden' บน .fab-wrap */
.fab-wrap.fab-hidden{display:none}

/* PAGES */
.page{display:none;padding-top:var(--nav)}.page.active{display:block}

/* MAP */
#map{height:calc(100vh - var(--nav));width:100%}
body.pin-mode #map{cursor:crosshair!important}
body.link-mode #map{cursor:cell!important}
.map-controls{position:fixed;top:calc(var(--nav)+10px);right:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:12px 16px;z-index:500;font-size:13px;display:flex;flex-direction:column;gap:8px;color:var(--text)}
.ctrl-group{display:flex;flex-direction:column;gap:5px}
.ctrl-group label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)}

/* MAP STATS */
.map-stats{position:fixed;top:calc(var(--nav)+10px);left:10px;z-index:500;display:flex;gap:8px;flex-wrap:wrap}
.stat-chip{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}

/* LEGEND */
.legend-box{position:fixed;bottom:30px;right:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;z-index:500;min-width:180px}
.legend-title{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;color:var(--text)}
.legend-section{font-size:11px;color:var(--muted);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.5px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0;color:var(--muted)}
.legend-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.legend-ring{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:2px solid;background:transparent}
.legend-header{width:100%;background:none;border:none;padding:0 0 8px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px;color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;user-select:none;text-align:left}
.legend-header span{display:flex;align-items:center;gap:6px}
.legend-header i.fa-chevron-up{font-size:10px;transition:transform .2s;color:var(--muted)}
.legend-box.collapsed{min-width:0}
.legend-box{max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain}

/* PRESENTATION MODE — สำหรับ briefing ผู้บริหารห้องประชุม (toggle ที่ ☰ → Presentation Mode) */
body.presentation-mode { font-size: 130% !important; }
body.presentation-mode .navbar { font-size: 110% }
body.presentation-mode .nav-link { padding: 10px 16px !important; font-size: 15px !important }
body.presentation-mode .legend-item, body.presentation-mode .legend-section { font-size: 15px !important }
body.presentation-mode .popup-content, body.presentation-mode .popup-action-btn { font-size: 16px !important }
body.presentation-mode .stat-chip { font-size: 15px !important; padding: 8px 16px !important }
/* ซ่อนปุ่ม edit-related ที่ไม่จำเป็นตอน briefing */
body.presentation-mode .fab-wrap,
body.presentation-mode .btn-add-pin,
body.presentation-mode #btnPinHere,
body.presentation-mode #btnLinkModeNav,
body.presentation-mode .btn-search-adv,
body.presentation-mode .btn-mobile-sheet,
body.presentation-mode #notifBell { display: none !important }
/* indicator แสดงสถานะ presentation */
body.presentation-mode::before { content: "🎯 Presentation Mode"; position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: rgba(229,57,53,.9); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; z-index: 9999; pointer-events: none }

/* MOBILE BOTTOM SHEET — รวม map-controls + legend ใน drawer เลื่อนขึ้นจากล่าง */
.bottom-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1500;opacity:0;pointer-events:none;transition:opacity .2s ease}
.bottom-sheet-backdrop.open{opacity:1;pointer-events:auto}
.bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:1600;background:var(--card);border-top:1px solid var(--border);border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.5);max-height:75vh;max-height:75dvh;overflow:hidden;transform:translateY(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.bottom-sheet.open{transform:translateY(0)}
.bs-handle-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:10px 0 6px;cursor:grab;user-select:none;touch-action:none}
.bs-handle-wrap:active{cursor:grabbing}
.bs-handle{width:42px;height:4px;background:rgba(255,255,255,.28);border-radius:2px}
.bs-title{font-size:13px;font-weight:600;color:var(--muted);margin-top:8px;letter-spacing:.3px}
.bs-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 24px}
.bs-section{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.bs-section:last-child{border-bottom:none}
.bs-section-header{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.bs-section-header i{font-size:11px;color:#00897b}
/* launcher button — small pill ที่ navbar */
.btn-mobile-sheet{display:none;background:rgba(0,137,123,.15);border:1px solid rgba(0,137,123,.4);color:#26a69a;padding:7px 12px;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}
.btn-mobile-sheet:hover,.btn-mobile-sheet.active{background:rgba(0,137,123,.3);border-color:#26a69a;color:#fff}
@media(max-width:768px),(max-height:500px){
  /* ซ่อน floating boxes บนมือถือ — แทนด้วย bottom sheet */
  .map-controls,.legend-box{display:none!important}
  .btn-mobile-sheet{display:inline-flex}
  .btn-mobile-sheet span{display:none}
  .btn-mobile-sheet{padding:7px 10px;font-size:14px}
}

/* GPS NAV BUTTON */
.btn-gps-nav{width:34px;height:34px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.btn-gps-nav:hover{background:rgba(26,115,232,.3);color:#64b5f6;border-color:#1a73e8}
.btn-gps-nav.active{background:rgba(229,57,53,.25);color:#ef5350;border-color:#ef5350;animation:gps-btn-blink 1.8s ease-in-out infinite}
@keyframes gps-btn-blink{0%,100%{box-shadow:0 0 0 0 rgba(239,83,80,0)}50%{box-shadow:0 0 0 4px rgba(239,83,80,.3)}}

/* DETECTIVE SEARCH ICON */
.btn-search-adv{width:34px;height:34px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative}
.btn-search-adv:hover{background:rgba(26,115,232,.3);color:#64b5f6}.btn-search-adv.active{background:rgba(26,115,232,.25);color:#64b5f6;border-color:#1a73e8}
.adv-search-icon-wrap{position:relative;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.adv-search-icon-wrap .fa-search{font-size:14px}
.adv-secret-overlay{position:absolute;font-size:7px;bottom:-3px;right:-4px;color:inherit;opacity:.85}

/* SIDE PANEL */
.side-panel{position:fixed;top:var(--nav);left:0;width:400px;height:calc(100vh - var(--nav));background:var(--card);border-right:1px solid var(--border);box-shadow:4px 0 20px rgba(0,0,0,.4);z-index:600;display:flex;flex-direction:column}
.side-panel-right{left:auto;right:0;border-right:none;border-left:1px solid var(--border);box-shadow:-4px 0 20px rgba(0,0,0,.4)}
.panel-header{padding:16px 20px;background:linear-gradient(135deg,#b71c1c,#7f0000);color:#fff;flex-shrink:0;display:flex;align-items:center;gap:8px}
.panel-header h3{font-size:16px;display:flex;align-items:center;gap:8px;flex:1}
.panel-body{flex:1;overflow-y:auto;padding:18px 20px}
.panel-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0}

/* TABS (legacy — kept hidden for backward compat ของ switchTab() calls ที่ยังเหลือ) */
.tab-bar{display:none}
.tab-btn{display:none}
.tab-content{display:block}.tab-content.active{display:block}
.suspect-header{background:rgba(123,31,162,.2);border:1px solid rgba(123,31,162,.4);border-radius:8px;padding:10px 14px;font-size:14px;font-weight:700;color:#ce93d8;margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* S10 (UX Phase 1): Collapsible form sections — แทน tabs ใน Add Pin Form */
.form-section{margin-bottom:14px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:background .15s}
.form-section[open]{background:rgba(255,255,255,.04)}
.section-header{padding:12px 14px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;transition:background .15s}
.section-header::-webkit-details-marker{display:none}
.section-header::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .2s;font-size:14px}
details[open] .section-header::after{transform:rotate(180deg)}
.section-header:hover{background:rgba(255,255,255,.04)}
.section-header > i:first-child{color:#00897b;font-size:14px}
.section-body{padding:6px 14px 14px;border-top:1px solid var(--border)}
.section-badge{background:rgba(0,137,123,.2);color:#4caf50;font-size:10px;padding:2px 8px;border-radius:8px;margin-left:4px;font-weight:600}
.section-badge:empty{display:none}

/* S10: Urgency chips — แทน <select> สำหรับ touch-friendly + visual */
.urgency-chips{display:flex;gap:6px;flex-wrap:wrap}
.ur-chip{flex:1;min-width:74px;padding:9px 8px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:12px;font-family:inherit;color:var(--muted);font-weight:600;transition:all .15s;text-align:center}
.ur-chip:hover{background:rgba(255,255,255,.08)}
.ur-chip[data-value="normal"].active{background:rgba(46,125,50,.20);border-color:#2e7d32;color:#fff}
.ur-chip[data-value="medium"].active{background:rgba(249,168,37,.20);border-color:#f9a825;color:#fff}
.ur-chip[data-value="high"].active{background:rgba(229,57,53,.20);border-color:#e53935;color:#fff}
.ur-chip[data-value="ended"].active{background:rgba(97,97,97,.20);border-color:#616161;color:#fff}

/* S10: Smart Paste button ใน panel-header (มุมขวาบน) */
.btn-smart-paste-header{background:rgba(26,115,232,.25);border:1px solid rgba(26,115,232,.6);color:#fff;padding:6px 11px;border-radius:7px;font-size:11px;cursor:pointer;font-family:inherit;font-weight:600;display:flex;align-items:center;gap:5px;transition:all .15s;flex-shrink:0;margin-left:auto}
.btn-smart-paste-header:hover{background:rgba(26,115,232,.45)}

/* S10: Context hint above save buttons */
.context-hint{font-size:11px;color:var(--muted);text-align:center;padding:8px 12px 0;display:flex;align-items:center;justify-content:center;gap:4px}
.context-hint i{font-size:10px;color:#00897b}

/* ซ่อน label/arrow ของเส้นเชื่อมหมุดตอน zoom ต่ำ (toggle ด้วย body.hide-link-labels จาก JS) */
body.hide-link-labels .link-label,
body.hide-link-labels .link-arrow{display:none!important}

/* POPUP */
.leaflet-popup-content-wrapper{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:0 4px 24px rgba(0,0,0,.5)!important;padding:0!important;color:var(--text)!important}
.leaflet-popup-content{margin:0!important}
.leaflet-popup-tip{background:var(--card)!important}
/* M-FIX: max-height + overflow — เดิม popup ขยายเกิน viewport เมื่อข้อมูลเยอะ
   (timeline preview + evidence ยาว + actions 8 ปุ่ม) — popup โผล่นอกจอ user ไม่เห็นด้านล่าง
   overscroll-behavior:contain กัน scroll bleed ไป map (Leaflet pan ตามนิ้ว) */
.popup-inner{padding:16px 18px;min-width:250px;max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
.popup-inner::-webkit-scrollbar{width:6px}
.popup-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.popup-inner::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
/* Mobile — เตี้ยลง + กว้างเต็ม - 40px */
@media(max-width:768px){
  .popup-inner{max-height:65vh}
  .leaflet-popup-content-wrapper{max-width:calc(100vw - 40px)!important}
}
.popup-title{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--text)}
.popup-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;margin-bottom:8px}
.popup-status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:4px}
.popup-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin:5px 0;color:var(--muted)}
.popup-row i{min-width:14px;margin-top:3px;color:#ef5350}
/* M-FIX: pre-wrap render newlines + word-wrap break long URLs/wallet addresses ไม่ให้ดัน popup ขยาย */
.popup-row span{color:var(--text);white-space:pre-wrap;word-break:break-word;flex:1;min-width:0}
.popup-nav{display:flex;align-items:center;gap:7px;background:rgba(26,115,232,.2);border-radius:9px;padding:8px 12px;margin:10px 0 6px;font-size:13px;font-weight:600;color:#64b5f6;text-decoration:none}
.popup-nav:hover{background:rgba(26,115,232,.3)}
.popup-streetview{display:flex;align-items:center;gap:7px;background:rgba(255,143,0,.2);border-radius:9px;padding:8px 12px;margin:0 0 6px;font-size:13px;font-weight:600;color:#ffb74d;text-decoration:none;cursor:pointer}
.popup-streetview:hover{background:rgba(255,143,0,.3)}
/* Street View modal — dvh fallback to vh สำหรับ iOS Safari address bar + ป้องกัน pull-to-refresh ขณะดู Street View */
.streetview-modal-box{height:82vh;height:82dvh;overscroll-behavior:contain}
@media (max-width:600px){
  .streetview-modal-box{width:96% !important;max-width:none !important;height:90vh;height:90dvh;padding:10px !important}
}
/* iframe inside SV modal — ปิด iOS touch callout/highlight ตอน user lap pan/zoom */
#streetViewFrame{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.popup-divider{border:none;border-top:1px solid var(--border);margin:10px 0}
.popup-actions{display:flex;gap:6px;flex-wrap:wrap}
.popup-action-btn{flex:1;min-width:80px;padding:7px;border:none;border-radius:7px;cursor:pointer;font-size:12px;font-family:inherit;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px;transition:opacity .2s}
.popup-action-btn:hover{opacity:.8}
.pab-edit{background:rgba(245,124,0,.2);color:#ffb74d}
.pab-tl{background:rgba(123,31,162,.2);color:#ce93d8}
.pab-file{background:rgba(46,125,50,.2);color:#81c784}
.pab-pdf{background:rgba(229,57,53,.2);color:#ef9a9a}

/* TABLE */
.page-container{padding:22px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.page-header h2{font-size:19px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text)}
.header-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:var(--card)}
.search-wrap i{color:var(--muted)}.search-wrap input{border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--text);width:180px}
.table-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--border)}

/* S10 Phase 4 (UX Batch E): Data page polish — sticky filter + row hover + cleaner table */
#dataPage .page-header{position:sticky;top:var(--nav);background:var(--bg);z-index:50;padding-top:14px;padding-bottom:14px;margin-top:-14px;margin-bottom:14px;border-bottom:1px solid var(--border)}
#dataPage .page-header h2{font-size:17px}
#dataPage tbody tr{transition:background .12s}
#dataPage tbody tr:hover{background:rgba(0,137,123,.08)}
#dataPage th{position:sticky;top:0;background:var(--card);z-index:5}
/* Row action buttons (✏️🗑️📅📎) — reveal on row hover */
#dataPage tbody tr .ibtn{opacity:.55;transition:opacity .15s,transform .12s}
#dataPage tbody tr:hover .ibtn{opacity:1}
#dataPage tbody tr .ibtn:hover{transform:scale(1.1)}
table{width:100%;border-collapse:collapse;background:var(--card)}
thead tr{background:#1a0000}
th{padding:12px 14px;text-align:left;font-weight:600;font-size:13px;white-space:nowrap;color:#ef9a9a;border-bottom:1px solid var(--border)}
td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;color:var(--text)}
tbody tr:hover{background:rgba(255,255,255,.03)}
tbody tr:last-child td{border-bottom:none}
.link{color:#64b5f6;font-weight:600;cursor:pointer}.link:hover{text-decoration:underline}
.coord-cell{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.cat-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;color:#fff}
.status-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.sc-tracking{background:rgba(26,115,232,.2);color:#64b5f6}
.sc-arrested{background:rgba(46,125,50,.2);color:#81c784}
.sc-cancelled{background:rgba(66,66,66,.4);color:#9e9e9e}
.sc-ended{background:rgba(244,67,54,.18);color:#e57373}
.urgency-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.uc-high{color:#ef5350}.uc-medium{color:#ffb74d}.uc-normal{color:#81c784}.uc-ended{color:#9e9e9e}
.no-data{text-align:center;color:var(--muted);padding:40px;font-size:14px}
.dim{color:var(--muted);font-style:italic}
.file-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(123,31,162,.2);color:#ce93d8;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer}
.file-badge:hover{background:rgba(123,31,162,.35)}
.ibtn{width:32px;height:32px;border:none;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:opacity .2s;flex-shrink:0}
.ibtn:hover{opacity:.7}
.ibtn-copy{background:rgba(26,115,232,.2);color:#64b5f6}
.ibtn-edit{background:rgba(245,124,0,.2);color:#ffb74d}
.ibtn-del{background:rgba(229,57,53,.2);color:#ef5350}
.ibtn-pdf{background:rgba(239,83,80,.15);color:#ef9a9a}
.ibtn-pdf:hover{background:rgba(239,83,80,.3)}
.ibtn-suspend{background:rgba(229,57,53,.18);color:#ef5350}
.ibtn-activate{background:rgba(67,160,71,.2);color:#66bb6a}
.ibtn-reset{background:rgba(255,179,0,.18);color:#ffb74d}
.ibtn-logout{background:rgba(123,31,162,.2);color:#ce93d8}
.pagination{display:flex;gap:6px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}
.page-btn{padding:6px 12px;border:1px solid var(--border);border-radius:7px;cursor:pointer;font-size:12px;background:var(--card);color:var(--muted);font-family:inherit}
.page-btn:hover{border-color:#ef5350;color:#ef5350}.page-btn.on{background:#e53935;color:#fff;border-color:#e53935}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* LOG */
.log-action{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;white-space:nowrap}
.la-login{background:rgba(26,115,232,.2);color:#64b5f6}
.la-add{background:rgba(46,125,50,.2);color:#81c784}
.la-update{background:rgba(245,124,0,.2);color:#ffb74d}
.la-delete{background:rgba(229,57,53,.2);color:#ef5350}
.la-upload{background:rgba(123,31,162,.2);color:#ce93d8}
.la-default{background:rgba(255,255,255,.1);color:var(--muted)}

/* TIMELINE */
.tl-item{display:flex;gap:12px;margin-bottom:16px;position:relative;align-items:flex-start}
.tl-item::before{content:'';position:absolute;left:15px;top:30px;bottom:-16px;width:2px;background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-dot{width:32px;height:32px;border-radius:50%;background:#7b1fa2;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex-shrink:0;z-index:1}
.tl-body{flex:1;background:rgba(255,255,255,.05);border-radius:8px;padding:10px 14px}
.tl-time{font-size:11px;color:var(--muted);margin-bottom:4px}
.tl-detail{font-size:13px;color:var(--text)}
.tl-by{font-size:11px;color:var(--muted);margin-top:4px}

/* FORMS */
.form-group{margin-bottom:13px}
.form-group label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--muted)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:rgba(255,255,255,.05);color:var(--text);transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#ef5350;box-shadow:0 0 0 3px rgba(229,57,53,.15)}
.form-group select option{background:#1a2332;color:var(--text)}
.form-row{display:flex;gap:10px}.form-row .form-group{flex:1}
.req{color:#ef5350}.hint-text{font-size:12px;color:#64b5f6;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.error-msg{color:#ef5350;font-size:13px;background:rgba(229,57,53,.15);border:1px solid rgba(229,57,53,.3);padding:9px 13px;border-radius:8px;margin:8px 0}
.cat-hint{font-size:12px;padding:6px 10px;border-radius:7px;margin-top:6px}
.cat-hint.all{background:rgba(46,125,50,.15);color:#81c784}
.cat-hint.admin{background:rgba(245,124,0,.15);color:#ffb74d}
.cat-hint.superadmin{background:rgba(123,31,162,.15);color:#ce93d8}
select{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer}

/* COLOR */
.color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.color-row input[type=color]{width:40px;height:40px;border:none;border-radius:8px;cursor:pointer;padding:2px;background:none}
.color-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border)}
.color-hex{font-size:12px;font-family:monospace;color:var(--muted);background:rgba(255,255,255,.08);padding:4px 9px;border-radius:6px}
.btn-sync-color{padding:6px 10px;background:rgba(26,115,232,.2);color:#64b5f6;border:none;border-radius:7px;font-size:12px;cursor:pointer;font-family:inherit}
.color-swatches{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:transform .15s}
.sw:hover{transform:scale(1.35)}

/* BUTTONS */
.btn-primary{flex:1;padding:10px;background:#e53935;color:#fff;border:none;border-radius:8px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-primary:hover{background:#b71c1c}
.btn-secondary{flex:1;padding:10px;background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer}
.btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn-danger{flex:1;padding:10px;background:#e53935;color:#fff;border:none;border-radius:8px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer}
.btn-danger:hover{background:#b71c1c}
.btn-success{flex:1;padding:10px;background:#2e7d32;color:#fff;border:none;border-radius:8px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-success:hover{background:#1b5e20}
.btn-green{padding:8px 16px;background:#2e7d32;color:#fff;border:none;border-radius:8px;font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.btn-green:hover{opacity:.9}

/* FILE */
.upload-area{border:2px dashed var(--border);border-radius:var(--r);padding:20px;text-align:center;cursor:pointer;color:var(--muted);transition:border-color .2s}
.upload-area:hover{border-color:#ef5350;color:#ef5350}
.upload-area i{font-size:26px;margin-bottom:8px;display:block}
.upload-area p{font-size:13px;font-weight:500;margin-bottom:4px}
.upload-area small{font-size:11px}
.file-list{display:flex;flex-direction:column;gap:7px}
.file-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:8px;padding:9px 12px;border:1px solid var(--border)}
.file-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.file-icon.img{background:rgba(26,115,232,.2);color:#64b5f6}
.file-icon.pdf{background:rgba(229,57,53,.2);color:#ef5350}
.file-info{flex:1;min-width:0}
.file-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.file-size{font-size:11px;color:var(--muted)}
.file-actions{display:flex;gap:5px;flex-shrink:0}
.file-btn{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.file-btn.view{background:rgba(26,115,232,.2);color:#64b5f6}
.file-btn.del{background:rgba(229,57,53,.2);color:#ef5350}
.file-btn:hover{opacity:.7}

/* MODAL FILES */
.modal-wide{width:620px;max-width:95vw}
.modal-files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px;max-height:55vh;overflow-y:auto}
.mf-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;background:var(--card)}
.mf-item:hover{border-color:#ef5350}
.mf-thumb{width:100%;height:110px;object-fit:cover;display:block;background:rgba(255,255,255,.05)}
.mf-pdf{width:100%;height:110px;display:flex;align-items:center;justify-content:center;background:rgba(229,57,53,.1);font-size:36px;color:#ef5350}
.mf-name{padding:7px 9px;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);background:var(--card)}
.mf-name-wrap{padding:0 9px 4px;background:var(--card)}
.mf-actions{display:flex;border-top:1px solid var(--border)}
.mf-btn{flex:1;padding:6px;border:none;background:transparent;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;gap:3px;font-family:inherit;color:var(--muted)}
.mf-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.mf-btn.del{color:#ef5350}.mf-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px;font-size:14px}

/* PREVIEW */
.preview-box{position:relative;max-width:90vw;display:flex;flex-direction:column;align-items:center}
.preview-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;background:var(--card);border:1px solid var(--border);border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--text)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:9000}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px 26px;width:440px;max-width:95vw;box-shadow:0 10px 40px rgba(0,0,0,.6);animation:pop .2s ease;max-height:90vh;overflow-y:auto}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-icon{text-align:center;margin-bottom:12px;font-size:42px}.modal-icon.warn{color:#f9a825}
.modal-box h3{font-size:17px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text)}
.modal-box>p{font-size:13px;color:var(--muted);text-align:center;margin-bottom:18px}
.modal-actions{display:flex;gap:10px;margin-top:14px}

/* ACCESS */
.access-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.ab-all{background:rgba(46,125,50,.2);color:#81c784}
.ab-admin{background:rgba(245,124,0,.2);color:#ffb74d}
.ab-superadmin{background:rgba(123,31,162,.2);color:#ce93d8}
.role-tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.rt-super{background:rgba(249,168,37,.2);color:#f9a825}
.rt-admin{background:rgba(26,115,232,.2);color:#64b5f6}
.rt-user{background:rgba(255,255,255,.1);color:var(--muted)}
.rt-viewer{background:rgba(123,31,162,.2);color:#ce93d8}
.exp-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.exp-never{background:rgba(38,166,154,.2);color:#26a69a}
.exp-ok{background:rgba(67,160,71,.2);color:#66bb6a}
.exp-soon{background:rgba(251,140,0,.22);color:#fb8c00}
.exp-expired{background:rgba(229,57,53,.2);color:#ef5350}
.exp-date{font-size:11px;color:var(--muted);margin-top:2px}
.ibtn-expiry{background:rgba(38,166,154,.2);color:#26a69a}
.exp-chip{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:5px 11px;font-size:12px;cursor:pointer;transition:background .15s,border-color .15s}
.exp-chip:hover{background:rgba(38,166,154,.16);border-color:#26a69a}
.color-chip{display:flex;align-items:center;gap:7px}
.color-chip-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.color-chip-hex{font-size:11px;font-family:monospace;color:var(--muted)}

/* LOADING */
.loading-overlay{position:fixed;inset:0;background:rgba(15,25,35,.8);display:flex;align-items:center;justify-content:center;z-index:9999}
.loading-box{text-align:center}
.spinner{width:44px;height:44px;border:4px solid rgba(229,57,53,.2);border-top-color:#ef5350;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);color:var(--text);padding:11px 24px;border-radius:30px;font-size:13px;font-weight:500;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.5);animation:fadeUp .25s ease;pointer-events:none}
.toast.success{background:#1b5e20;border-color:#2e7d32;color:#a5d6a7}
.toast.error{background:#7f0000;border-color:#c62828;color:#ef9a9a}
@keyframes fadeUp{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ADVANCED SEARCH BUTTON */
.btn-search-adv{width:34px;height:34px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.btn-search-adv:hover{background:rgba(229,57,53,.2);color:#ef9a9a}
.btn-search-adv.active{background:#b71c1c;color:#fff;border-color:#e53935}

/* ADVANCED SEARCH PANEL */
.adv-search-panel{position:fixed;top:var(--nav);right:0;bottom:0;width:380px;background:var(--card);border-left:1px solid var(--border);z-index:900;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.5);animation:slideInR .22s ease}
@keyframes slideInR{from{transform:translateX(100%)}to{transform:translateX(0)}}
.adv-search-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.adv-search-header h3{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.adv-search-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px}
.adv-search-close:hover{color:#ef5350}
.adv-search-body{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:16px}
.adv-search-input-wrap{display:flex;gap:8px;margin-bottom:12px}
.adv-search-input-wrap input{flex:1;background:#111c29;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:13px;font-family:inherit}
.adv-search-input-wrap input:focus{outline:none;border-color:var(--blue)}
.btn-adv-go{padding:9px 14px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-adv-go:hover{background:var(--blue-d)}
.adv-search-results{flex:1;overflow-y:auto}
.adv-empty{text-align:center;color:var(--muted);padding:40px 16px;font-size:13px;line-height:1.8}
.adv-count{font-size:12px;color:var(--muted);margin-bottom:10px;font-weight:600}
.adv-result-card{background:#111c29;border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px}
.adv-rc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.adv-place-name{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.adv-suspect-row{font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;margin-bottom:4px}
.adv-suspect-row strong{color:var(--text)}
.adv-rc-actions{display:flex;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.adv-btn-fly,.adv-btn-pdf{flex:1;padding:6px 10px;border:none;border-radius:6px;font-size:12px;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.adv-btn-fly{background:rgba(26,115,232,.2);color:#64b5f6}
.adv-btn-fly:hover{background:rgba(26,115,232,.4)}
.adv-btn-pdf{background:rgba(229,57,53,.2);color:#ef9a9a}
.adv-btn-pdf:hover{background:rgba(229,57,53,.4)}

/* DASHBOARD */
.dash-container{max-width:1400px;margin:0 auto;padding:24px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
/* S10 Phase 3: KPI card visual hierarchy — larger value + cleaner spacing */
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.kpi-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.kpi-val{font-size:30px;font-weight:800;line-height:1;letter-spacing:-0.5px}
.kpi-label{font-size:11px;color:var(--muted);margin-top:4px;font-weight:600}
.dash-charts-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px}
.dash-charts-row.row2{grid-template-columns:2fr 1fr}
/* S10 Phase 3: dash-card refined — softer border, subtle elevation */
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:box-shadow .15s}
.dash-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.18)}
.dash-card-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.dash-card-title i{color:#00897b;font-size:12px}

/* S10 Phase 3: Sticky filter bar in Dashboard (#dashPage .page-header) */
#dashPage .page-header{position:sticky;top:var(--nav);background:var(--bg);z-index:50;padding-top:14px;padding-bottom:14px;margin-top:-14px;margin-bottom:18px;border-bottom:1px solid var(--border)}
#dashPage .page-header h2{font-size:18px}
.chart-wrap{position:relative;height:200px}
.dash-empty{text-align:center;color:var(--muted);padding:24px;font-size:13px}
.dash-timeline{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.dtl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.dtl-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px}
.dtl-place{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px}
.dtl-detail{font-size:12px;color:var(--muted);line-height:1.4}
.dtl-meta{font-size:11px;color:#616161;margin-top:3px}
.dash-logs{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.dlog-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.dlog-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.dlog-action{font-size:11px;font-weight:700;letter-spacing:.3px}
.dlog-detail{font-size:12px;color:var(--muted)}
.dlog-meta{font-size:11px;color:#616161}

/* MOBILE RESPONSIVE */
@media(max-width:1024px){
.dash-charts-row{grid-template-columns:1fr 1fr}
.dash-charts-row.row2{grid-template-columns:1fr}
.side-panel{width:360px}
.adv-search-panel{width:340px}
}

@media(max-width:768px){
:root{ --nav:54px; }
/* V10-AUDIT: navbar overflow fix สำหรับ mobile (option C: horizontal scroll) —
   .nav-right มี 10+ ปุ่ม (Add Pin/Link Mode/Search/GPS/Share/Badge/Bell/Logout) → ล้น navbar ที่จอ 320-412px
   วิธีแก้: scroll แนวนอน — เห็นทุกปุ่ม + ปัดซ้ายขวาดู, hide scrollbar ให้ดูเรียบ + fade hint ที่ขอบ
   .nav-brand ค้างซ้าย, .nav-right scroll ตรงกลาง, .nav-more-wrap ค้างขวา (อยู่นอก nav-right อยู่แล้ว) */
.navbar{padding:0 8px;gap:6px;overflow:hidden}
.nav-brand span{display:none}
.nav-brand{flex-shrink:0;margin-right:8px}
/* nav-right scroll แนวนอน + ซ่อน scrollbar */
.nav-right{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-width:0;
  flex:1;
  /* fade hint ที่ขอบขวา (ฝั่งซ้าย no-fade เพราะ brand ติด) */
  mask-image:linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
}
.nav-right::-webkit-scrollbar{display:none}
/* ทุกปุ่มใน nav-right ห้าม shrink → ขนาดเดิม → ปัดเห็น */
.nav-right > *{flex-shrink:0}
/* nav-more-wrap (hamburger ขวา) ค้างขวา */
.nav-more-wrap{flex-shrink:0;margin-left:4px}
/* F7: nav-menu mobile — กัน overflow horizontal + scroll vertical ถ้ารายการเยอะ */
/* Android Chrome: ใช้ 100dvh กัน address bar กิน viewport แล้วเมนูล้นจอไม่มี scroll */
.nav-menu{display:none;position:fixed;top:var(--nav);left:0;right:0;
max-width:100vw;width:100%;box-sizing:border-box;
background:var(--card);border-bottom:1px solid var(--border);
flex-direction:column;gap:2px;padding:10px;z-index:999;
box-shadow:0 8px 24px rgba(0,0,0,.5);
overflow-y:auto;overflow-x:hidden;
max-height:calc(100vh - var(--nav));
max-height:calc(100dvh - var(--nav));
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch}
.nav-menu.open{display:flex}
.nav-link{padding:12px 16px;font-size:14px;border-radius:8px}
.btn-hamburger{display:flex}
.nav-right{gap:5px}
.user-badge span#userNameDisplay{display:none}
.btn-add-pin span{display:none}
.btn-add-pin{padding:8px 10px}
.btn-logout{padding:6px 8px;font-size:12px}
.login-box{width:calc(100vw - 32px);padding:28px 20px;border-radius:14px}
#map{height:calc(100vh - var(--nav))}
/* map-controls: ซ้ายล่าง ไม่ทับ legend */
.map-controls{top:auto;bottom:10px;left:8px;right:auto;padding:8px 12px;font-size:12px;gap:6px;max-width:155px}
/* legend: ขวาล่าง ไม่ทับ map-controls */
.legend-box{bottom:10px;right:8px;left:auto;font-size:12px;min-width:130px;padding:10px 12px}
.map-stats{top:calc(var(--nav)+6px);left:4px;gap:4px}
.stat-chip{padding:4px 8px;font-size:11px}
.side-panel{width:100%!important;top:var(--nav);height:calc(100vh - var(--nav));border-right:none}
.side-panel-right{border-left:none;left:0;right:0;width:100%}
.panel-body{-webkit-overflow-scrolling:touch}
.page-container{padding:12px}
.page-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px}
.page-header h2{font-size:16px}
.header-controls{flex-wrap:wrap;gap:6px;width:100%}
.header-controls select,.header-controls input{font-size:12px}
.search-wrap input{width:120px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
table{min-width:640px}
th,td{padding:9px 10px;font-size:12px}
.form-row{flex-direction:column;gap:0}
.modal-box{width:calc(100vw - 24px)!important;max-height:90vh;overflow-y:auto;padding:18px 16px;border-radius:14px}
.modal-wide{width:calc(100vw - 24px)!important}
.modal-files-grid{grid-template-columns:1fr 1fr!important}
.adv-search-panel{width:100%;top:var(--nav);border-left:none;border-top:1px solid var(--border)}
.dash-charts-row{grid-template-columns:1fr!important}
.dash-charts-row.row2{grid-template-columns:1fr!important}
.kpi-row{grid-template-columns:1fr 1fr;gap:8px}
.kpi-card{padding:12px;gap:10px}
.kpi-icon{width:36px;height:36px;font-size:15px}
.kpi-val{font-size:22px}
.chart-wrap{height:180px}
.log-filter-bar{flex-direction:column;gap:8px}
.log-filter-group{width:100%}
.log-filter-group select,.log-filter-group input{width:100%}
.pagination{justify-content:center}
.page-btn{padding:6px 10px;font-size:12px}
.toast{width:calc(100vw - 32px);text-align:center;bottom:16px}
}

@media(max-width:400px){
.kpi-row{grid-template-columns:1fr}
.modal-box{padding:14px 12px}
.tab-btn{font-size:11px;padding:6px 4px}
.modal-files-grid{grid-template-columns:1fr!important}
}

/* Landscape phone (สั้นเตี้ย) — แก้ legend ทับ FAB เพราะ @media(max-width:768) ไม่ติด */
/* max-height ต้องเผื่อ navbar (54) + bottom anchor (80) + gap = ~140px */
@media(max-height:500px){
.legend-box{bottom:80px;right:8px;left:auto;min-width:130px;padding:10px 12px;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
.fab-wrap{bottom:14px;right:14px}
.map-controls{top:auto;bottom:10px;left:8px;right:auto;padding:8px 12px;max-width:155px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto}
}

/* F7: nav-more-dropdown mobile — กัน overflow ขอบขวา + scroll ถ้ารายการเยอะ */
/* ย้าย breakpoint 480→768 ให้มือถือทุกขนาดได้ fixed full-width + ใช้ 100dvh กัน Android address bar */
@media(max-width:768px){
.nav-more-dropdown{
  position:fixed;top:var(--nav);right:0;left:0;
  max-width:100vw;width:100%;box-sizing:border-box;
  border-radius:0 0 10px 10px;
  max-height:calc(100vh - var(--nav) - 20px);
  max-height:calc(100dvh - var(--nav) - 20px);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.nav-more-link{padding:11px 14px;font-size:14px}
.nav-more-section-header{padding:10px 14px 4px;font-size:11px}
}

/* LOG FILTER BAR */
.log-filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;position:sticky;top:var(--nav);z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.log-filter-group{display:flex;flex-direction:column;gap:4px}
.log-filter-group label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.log-filter-group select{padding:8px 10px;background:#0f1923;border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:13px}
/* S10 Phase 5 (UX Batch F): Log page polish — sticky filter + row hover + cleaner scan */
#logPage tbody tr{transition:background .12s}
#logPage tbody tr:hover{background:rgba(0,137,123,.08)}
#logPage th{position:sticky;top:0;background:var(--card);z-index:5}

/* MISC */
#syncMapFilter{accent-color:var(--blue);width:14px;height:14px;cursor:pointer}
select:disabled{opacity:.75;cursor:not-allowed;border-style:dashed}

/* GPS TRACKING */
@keyframes gps-pulse{
0%{transform:translate(-50%,-50%) scale(1);opacity:.7}
100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}
}

/* MARKER CLUSTER CUSTOM */
.marker-cluster{background:transparent!important;border:none!important}
.marker-cluster div{margin:0!important}

#linkRelationType {
  width: 100%;
  min-height: 42px;
  height: auto;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
}

#linkRelationType optgroup {
  font-size: 13px;
  font-weight: 700;
}

#linkRelationType option {
  padding: 6px 12px;
  font-size: 13px;
  white-space: normal;
}

/* ============================================================
   UX-V2 (มิ.ย. 2026): จัดระเบียบ navbar — split-button ปักหมุด + กลุ่ม GPS
   ============================================================ */
.pin-split-wrap{position:relative;display:flex;align-items:stretch;flex-shrink:0}
.pin-split-wrap .btn-add-pin{border-top-right-radius:0;border-bottom-right-radius:0}
.btn-add-pin-caret{border-radius:0 8px 8px 0;border-left:1px solid rgba(255,255,255,.35);padding:7px 9px;min-width:26px;justify-content:center}
.btn-add-pin-caret i{font-size:10px;transition:transform .15s}
.btn-add-pin-caret.active i{transform:rotate(180deg)}
.pin-split-wrap .pin-dropdown{left:0;right:auto;min-width:235px}
.gps-wrap{position:relative;display:flex;flex-shrink:0}
/* รายการใน dropdown เป็น <button> — ล้าง default ให้หน้าตาเหมือน <a> เดิม */
.nav-more-dropdown button.nav-more-link{background:none;border:none;width:100%;text-align:left;font-family:inherit;font-size:13px}
/* สถานะเปิดอยู่ของรายการ GPS (JS เดิม add .active ให้ btnGpsNav / inline style ให้ btnGpsShare) */
.nav-more-dropdown .nav-more-link.active{background:rgba(46,125,50,.25);color:#81c784}
/* ปุ่มกลุ่ม GPS เรืองแสงเมื่อโหมดใดโหมดหนึ่งเปิดอยู่ */
.btn-gps-nav.gps-on{background:rgba(46,125,50,.3);color:#81c784;border-color:rgba(46,125,50,.6);box-shadow:0 0 8px rgba(76,175,80,.35)}
/* จุดเตือนสีส้มบน hamburger เมื่อมี Drafts ค้าง */
.btn-nav-more{position:relative}
.btn-nav-more.has-dot::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 4px rgba(245,158,11,.8)}
/* ป้ายสถานะใน popup หมุด — กดเพื่อเปลี่ยนสถานะได้ */
button.popup-status{cursor:pointer;border:none;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
button.popup-status:hover{filter:brightness(1.3)}
.quick-status-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}

/* UX-V2 fix: mask fade-hint ของ .nav-right (audit v10 mobile scroll) ทำให้ลูก position:fixed
   ถูก paint เป็น group แล้วโดน mask ตัดทิ้ง → dropdown ปักหมุด/GPS ล่องหนบนมือถือ
   แก้โดยปิด mask ชั่วคราวขณะ dropdown ใน nav-right เปิดอยู่ (JS toggle class dd-open) */
.nav-right.dd-open{mask-image:none !important;-webkit-mask-image:none !important;overflow:visible !important}

/* ============================================================
   UX-V3 (มิ.ย. 2026) — TACTICAL PLANNING MODE
   ============================================================ */
/* ขณะวางแผน: ซ่อนแผงควบคุม/สถิติ ให้โล่ง */
body.tac-active .map-controls,
body.tac-active #mapStats,
body.tac-active .legend-box { display:none !important; }

/* Header bar (ชื่อแผน + ปุ่ม) */
.tac-header{position:fixed;top:var(--nav);left:0;right:0;z-index:1250;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(135deg,#1a237e,#283593);color:#fff;padding:6px 12px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.tac-h-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.tac-h-left>i{font-size:15px;opacity:.9;flex-shrink:0}
.tac-h-name{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:7px;color:#fff;font-family:inherit;font-size:14px;font-weight:600;padding:6px 10px;min-width:0;flex:1;max-width:320px}
.tac-h-name::placeholder{color:rgba(255,255,255,.6)}
.tac-h-sel{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:7px;color:#fff;font-family:inherit;font-size:12px;padding:6px 8px;flex-shrink:0}
.tac-h-sel option{color:#1a1a2e}
.tac-h-right{display:flex;align-items:center;gap:5px;flex-shrink:0}
.tac-h-btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:7px;color:#fff;font-family:inherit;font-size:12px;font-weight:600;padding:7px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background .15s;white-space:nowrap}
.tac-h-btn:hover{background:rgba(255,255,255,.28)}
.tac-h-save.tac-unsaved{background:#f9a825;border-color:#f9a825;color:#1a1a2e;animation:tacPulse 1.4s ease-in-out infinite}
@keyframes tacPulse{0%,100%{box-shadow:0 0 0 0 rgba(249,168,37,.5)}50%{box-shadow:0 0 0 5px rgba(249,168,37,0)}}
.tac-h-close{background:rgba(229,57,53,.85);border-color:transparent}
.tac-h-close:hover{background:#e53935}

/* Toolbar (palette) */
.tac-toolbar{position:fixed;left:8px;top:calc(var(--nav) + 52px);z-index:1240;width:190px;max-height:calc(100vh - var(--nav) - 70px);
  overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.tac-tb-title{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.tac-tb-group-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 4px}
.tac-tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tac-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 3px;background:rgba(127,127,127,.08);border:1px solid var(--border);border-radius:9px;cursor:pointer;font-family:inherit;color:var(--text);transition:all .12s;min-height:52px}
.tac-tool i{font-size:15px;color:var(--tc,#888)}
.tac-tool span{font-size:9px;line-height:1.1;text-align:center;color:var(--muted)}
.tac-tool:hover{background:rgba(127,127,127,.16);border-color:var(--tc,#888)}
.tac-tool.active{background:var(--tc,#1a237e);border-color:var(--tc,#1a237e)}
.tac-tool.active i,.tac-tool.active span{color:#fff}
.tac-tb-hint{margin-top:8px;font-size:10px;color:var(--muted);background:rgba(26,35,126,.1);border-radius:7px;padding:6px 8px;line-height:1.3}

/* Tactical markers */
.tac-pin{position:relative;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.tac-pin-dot{width:30px;height:30px;border-radius:50%;background:var(--tc,#d32f2f);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;position:relative;cursor:pointer}
.tac-pin-seq{position:absolute;top:-6px;right:-6px;background:#fff;color:var(--tc,#d32f2f);font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--tc,#d32f2f);padding:0 2px}
.tac-pin-label{margin-top:2px;background:rgba(15,25,35,.9);color:#fff;font-size:10px;font-family:Sarabun,sans-serif;padding:1px 6px;border-radius:5px;white-space:nowrap;border:1px solid rgba(255,255,255,.15);max-width:140px;overflow:hidden;text-overflow:ellipsis}
.tac-route-label span{background:#444;color:#fff;font-size:10px;font-family:Sarabun,sans-serif;padding:2px 7px;border-radius:5px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.tac-ring-label{background:rgba(26,35,126,.85);color:#fff;font-size:10px;font-family:Sarabun,sans-serif;padding:1px 6px;border-radius:5px;white-space:nowrap;transform:translate(-50%,-50%)}

/* Point editor */
.tac-pt-editor{position:fixed;right:12px;top:calc(var(--nav) + 52px);z-index:1260;width:270px;max-width:92vw;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.5);overflow:hidden}
.tac-pe-head{padding:10px 14px;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px}
.tac-pe-body{padding:12px 14px;max-height:60vh;overflow-y:auto}
.tac-pe-lab{display:block;font-size:11px;color:var(--muted);font-weight:600;margin:8px 0 3px}
.tac-pe-lab:first-child{margin-top:0}
.tac-pe-in{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#0f1923;color:var(--text);font-family:inherit;font-size:13px;box-sizing:border-box}
.tac-pe-actions{display:flex;gap:8px;margin-top:14px}
.tac-pe-del{flex:1;padding:9px;border:none;border-radius:8px;background:rgba(229,57,53,.18);color:#ef5350;cursor:pointer;font-family:inherit;font-weight:600}
.tac-pe-save{flex:1;padding:9px;border:none;border-radius:8px;background:#1a237e;color:#fff;cursor:pointer;font-family:inherit;font-weight:600}

/* Route finish / present / checklist */
.tac-route-finish{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1270;display:flex;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.tac-route-finish button{padding:9px 16px;border:none;border-radius:8px;background:#2e7d32;color:#fff;font-family:inherit;font-weight:600;cursor:pointer}
.tac-route-finish button.cancel{background:rgba(127,127,127,.2);color:var(--text)}
.tac-exit-present{position:fixed;top:calc(var(--nav) + 10px);right:12px;z-index:1300;display:flex;align-items:center;gap:6px;padding:10px 16px;border:none;border-radius:10px;background:#1a237e;color:#fff;font-family:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tac-chk-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.tac-chk-row label{font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px;cursor:pointer;flex:1}
.tac-chk-row button{background:none;border:none;color:#ef5350;cursor:pointer;font-size:13px;padding:4px}

/* Presentation mode — ซ่อนทุกอย่างเหลือแผนที่ + แผน */
body.tac-present .tac-toolbar,
body.tac-present .tac-header,
body.tac-present .tac-pt-editor,
body.tac-present .navbar,
body.tac-present .fab-wrap,
body.tac-present .map-controls,
body.tac-present #mapStats { display:none !important; }
body.tac-present #map{top:0 !important}

/* Mobile — toolbar ลงล่างเป็นแถบเลื่อน, header ย่อ label */
@media(max-width:768px){
  .tac-header{padding:5px 8px}
  .tac-h-lbl{display:none}
  .tac-h-name{font-size:13px;max-width:none}
  .tac-h-btn{padding:8px 9px}
  .tac-toolbar{left:0;right:0;bottom:0;top:auto;width:100%;max-height:40vh;border-radius:14px 14px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.5)}
  .tac-tb-grid{grid-template-columns:repeat(4,1fr)}
  .tac-pt-editor{right:0;left:0;top:auto;bottom:0;width:100%;max-width:100%;border-radius:14px 14px 0 0}
}

/* UX-V3.1: ปุ่มสลับดาวเทียมใน tac-header — เรืองแสงเมื่อกำลังดูดาวเทียม */
.tac-h-btn.tac-sat-on{background:rgba(0,200,150,.25);border-color:rgba(0,200,150,.5)}

/* UX-V3.2: เครื่องมือวาดอิสระ — palette สี + undo/redo + text label */
.tac-color-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:2px 0}
.tac-swatch{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;transition:transform .1s,border-color .1s;flex-shrink:0}
.tac-swatch:hover{transform:scale(1.15)}
.tac-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--card),0 0 0 4px rgba(255,255,255,.55);transform:scale(1.1)}
#tacColorCustom{width:28px;height:28px;border:none;border-radius:6px;background:none;cursor:pointer;padding:0;flex-shrink:0}
.tac-undo-row{display:flex;gap:6px;margin-top:8px}
.tac-undo-row button{flex:1;padding:8px 4px;border:1px solid var(--border);border-radius:8px;background:rgba(127,127,127,.1);color:var(--text);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:background .12s}
.tac-undo-row button:hover:not(:disabled){background:rgba(127,127,127,.22)}
.tac-undo-row button:disabled{opacity:.35;cursor:default}
.tac-text-label{font-family:Sarabun,sans-serif;font-size:14px;font-weight:800;white-space:nowrap;cursor:grab;
  text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px rgba(0,0,0,.9);letter-spacing:.3px}
/* geoman cursor/vertex ปรับให้เข้าธีม */
.leaflet-pm-draggable{cursor:grab}

/* UX-V3.3: ซ่อน overlay ยุทธวิธีเมื่อซูมไกล (zoom < 16) — กันแผนที่รก */
body.tac-zoom-far .tac-mk,
body.tac-zoom-far .tac-route-label,
body.tac-zoom-far .tac-ring-label,
body.tac-zoom-far path.tac-vector{display:none}
.tac-zoom-hint{position:fixed;top:calc(var(--nav) + 52px);left:50%;transform:translateX(-50%);z-index:1245;
  display:flex;align-items:center;gap:7px;padding:8px 16px;border:1px solid rgba(255,193,7,.45);border-radius:20px;
  background:rgba(40,33,10,.92);color:#ffd54f;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.tac-zoom-hint:hover{background:rgba(60,50,15,.95)}
@media(max-width:768px){.tac-zoom-hint{font-size:11px;padding:7px 12px}}

/* ============================================================
   AUDIT-V11 (13 มิ.ย. 2026) — Light theme ครอบให้ครบ + a11y + ความทันสมัย
   ทั้งหมดเป็น additive ไม่เปลี่ยน dark theme เดิม
   ============================================================ */

/* 1. การ์ดผลค้นหาขั้นสูง — เดิมพื้นเข้มตายตัว ตัวหนังสือดำบน light อ่านไม่ออก */
[data-theme="light"] .adv-result-card{background:var(--card2);border-color:var(--border)}

/* 2. หัวข้อกลุ่มในเมนู ☰ — เดิมขาวจาง ล่องหนบนพื้นขาว */
[data-theme="light"] .nav-more-section-header{color:var(--muted)}

/* 3. palette สีโหมดวางแผน — ขอบ/วงแหวน active มองเห็นบน light */
[data-theme="light"] .tac-swatch{border-color:rgba(0,0,0,.2)}
[data-theme="light"] .tac-swatch.active{border-color:#1a237e;box-shadow:0 0 0 2px var(--card),0 0 0 4px rgba(26,35,126,.55)}

/* 4. พื้นผิว/hover ที่ใช้ขาวจาง — สลับเป็นดำจางบน light */
[data-theme="light"] .btn-secondary{background:rgba(0,0,0,.05);color:#3c4043}
[data-theme="light"] .btn-secondary:hover{background:rgba(0,0,0,.09)}
[data-theme="light"] .tl-body,[data-theme="light"] .file-item,
[data-theme="light"] .form-section,[data-theme="light"] .color-hex{background:rgba(0,0,0,.04)}
[data-theme="light"] .form-section[open]{background:rgba(0,0,0,.02)}
[data-theme="light"] .ur-chip{background:rgba(0,0,0,.04)}
[data-theme="light"] .ur-chip:hover{background:rgba(0,0,0,.08)}
[data-theme="light"] .gps-team-item:hover,[data-theme="light"] .mf-btn:hover,
[data-theme="light"] .nav-more-link:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .bs-handle{background:rgba(0,0,0,.25)}
[data-theme="light"] .legend-header{border-bottom-color:rgba(0,0,0,.08)}

/* 5. chips สถานะ/ความเร่งด่วน + ลิงก์ — เพิ่ม contrast สำหรับใช้กลางแจ้งบน light */
[data-theme="light"] .link{color:#1565c0}
[data-theme="light"] .sc-tracking{color:#1565c0}
[data-theme="light"] .sc-arrested{color:#1b5e20}
[data-theme="light"] .sc-ended{color:#b71c1c}
[data-theme="light"] .sc-cancelled{color:#5f6368;background:rgba(0,0,0,.08)}
[data-theme="light"] .uc-high{color:#c62828}
[data-theme="light"] .uc-medium{color:#b35900}
[data-theme="light"] .uc-normal{color:#1b5e20}
[data-theme="light"] .uc-ended{color:#5f6368}
[data-theme="light"] .nav-more-dropdown .nav-more-link.active{color:#1b5e20;background:rgba(46,125,50,.15)}

/* 6. focus ring สำหรับคีย์บอร์ด (ติดเฉพาะ Tab — ไม่กระทบ mouse/touch) */
:where(button,a,[tabindex],summary):focus-visible{outline:2px solid #1a73e8;outline-offset:2px;border-radius:4px}

/* 7. หัวตารางบน light — เดิมชมพูจางบนขาว */
[data-theme="light"] thead tr{background:#fbe9e7}
[data-theme="light"] th{color:#b71c1c;background:#fbe9e7}
[data-theme="light"] #dataPage th,[data-theme="light"] #logPage th{background:#fbe9e7}

/* 8. ขยาย tap target ปุ่มเล็กบน touch โดยไม่ขยับ layout */
@media(pointer:coarse){
  .ibtn,.file-btn,.gps-team-close,.adv-search-close,.mf-btn{position:relative}
  .ibtn::after,.file-btn::after,.gps-team-close::after,.adv-search-close::after,.mf-btn::after{
    content:"";position:absolute;inset:-6px}
}

/* 9. scrollbar บางสม่ำเสมอทุกแผง (สี neutral ใช้ได้สองธีม) */
.panel-body,.nav-more-dropdown,.adv-search-results,.bs-body,.tac-toolbar,
.dash-timeline,.dash-logs,.modal-box,.gps-team-body,.tac-pe-body{
  scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.4) transparent}
.panel-body::-webkit-scrollbar,.nav-more-dropdown::-webkit-scrollbar,
.adv-search-results::-webkit-scrollbar,.bs-body::-webkit-scrollbar,
.modal-box::-webkit-scrollbar{width:6px}
.panel-body::-webkit-scrollbar-thumb,.nav-more-dropdown::-webkit-scrollbar-thumb,
.adv-search-results::-webkit-scrollbar-thumb,.bs-body::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb{background:rgba(127,127,127,.4);border-radius:3px}

/* 10. backdrop blur — modal/dropdown ดูเป็นแอพยุคปัจจุบัน (@supports กันเครื่องเก่า) */
@supports(backdrop-filter:blur(4px)){
  .modal-overlay{background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
  .bottom-sheet-backdrop{backdrop-filter:blur(2px)}
  .nav-more-dropdown{backdrop-filter:blur(8px)}
}

/* 11. transition + press feedback ปุ่มหลัก */
.btn-primary,.btn-danger,.btn-success,.btn-green,.btn-login,.page-btn,.popup-action-btn,.ibtn{
  transition:background .15s,opacity .15s,transform .08s}
.btn-primary:active,.btn-danger:active,.btn-success:active,.btn-green:active,
.btn-login:active{transform:scale(.97)}

/* 12. เคารพ prefers-reduced-motion (เมารถ/ไมเกรน) — spinner ยังหมุน */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .spinner{animation-duration:.8s!important;animation-iteration-count:infinite!important}
}

/* 13. ปุ่ม ⋮ + เมนูรองใน popup บน light (ชนะ inline style จาก JS) */
[data-theme="light"] .pab-more{background:rgba(0,0,0,.06)!important}
[data-theme="light"] .popup-more-menu{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.15)!important}

/* 14. checkbox/radio เข้าธีม (เดิมฟ้า default browser) */
:root{accent-color:#e53935}
html[data-theme="light"]{accent-color:#c62828}

/* 15. radius ใน popup เกาะ 8px grid */
.popup-action-btn{border-radius:8px}
.popup-nav,.popup-streetview{border-radius:8px}