/* =============================================================
   IHB ROU Monitoring System - Consolidated External Stylesheet
   Extracted from inline <style> blocks across all JSP views
   ============================================================= */

/* ===== Login Page ===== */
html, body { height: 100%; }
body { margin: 0 !important; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.login-wrap {
  min-height: 100vh !important; width: 100% !important; display: flex !important;
  align-items: center !important; justify-content: center !important; padding: 26px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(32,128,192,.10), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(224,96,32,.10), transparent 45%),
    linear-gradient(180deg, #fafcff, #eef3fb) !important;
}
.login-card {
  width: 440px !important; max-width: 92vw !important; background: #fff !important;
  border-radius: 22px !important; border: 1px solid rgba(0,32,64,.12) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.18) !important; position: relative !important; padding: 18px !important;
}
.login-frame { position: absolute !important; inset: 12px !important; border-radius: 18px !important;
  border: 2px solid rgba(32,128,192,.18) !important; pointer-events: none !important;
}
.login-frame:before, .login-frame:after {
  content: "" !important; position: absolute !important; width: 26px !important; height: 26px !important;
  border: 3px solid rgba(32,128,192,.35) !important;
}
.login-frame:before { top: -2px !important; left: -2px !important; border-right: none !important; border-bottom: none !important; border-top-left-radius: 14px !important; }
.login-frame:after  { bottom: -2px !important; right: -2px !important; border-left: none !important; border-top: none !important; border-bottom-right-radius: 14px !important; }
.login-inner  { position: relative !important; padding: 16px 14px 12px !important; }
.login-head   { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.login-logo   { width: 64px !important; height: 64px !important; border-radius: 16px !important;
  border: 2px solid rgba(32,128,192,.25) !important; display: flex !important; align-items: center !important;
  justify-content: center !important; background: #fff !important;
}
.login-logo img { max-width: 48px !important; max-height: 46px !important; width: auto !important; height: auto !important; display: block !important; }
.login-head h1  { margin: 10px 0 4px !important; font-size: 22px !important; font-weight: 900 !important; color: var(--ihb-navy) !important; }
.login-head p   { margin: 0 !important; font-size: 13px !important; color: var(--muted) !important; }
.curve      { margin: 12px 0 16px !important; position: relative !important; }
.curve svg  { width: 100% !important; height: 16px !important; display: block !important; }
.curve .dot { position: absolute !important; right: 56px !important; top: 8px !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--ihb-blue) !important; }
.field      { margin-bottom: 12px !important; }
.field label { font-size: 12px !important; font-weight: 800 !important; color: var(--ihb-navy) !important; margin-bottom: 6px !important; display: block !important; }
.field input, .field select { width: 100% !important; padding: 11px 14px !important; border-radius: 14px !important; border: 1px solid var(--border) !important; font-size: 13px !important; background: #fff !important; }
.captcha-box  { display: flex !important; gap: 10px !important; align-items: center !important; }
.captcha-code { padding: 10px 14px !important; border-radius: 14px !important; border: 1px dashed rgba(0,32,64,.35) !important; background: rgba(0,32,64,.05) !important; font-weight: 900 !important; letter-spacing: 4px !important; min-width: 150px !important; text-align: center !important; }
.btn-login    { width: 100% !important; padding: 12px !important; border: none !important; border-radius: 999px !important;
  background: linear-gradient(90deg, var(--ihb-red), var(--ihb-orange)) !important; color: #fff !important;
  font-weight: 900 !important; cursor: pointer !important; box-shadow: 0 14px 30px rgba(192,32,32,.25) !important;
}
.login-actions { text-align: center !important; margin-top: 10px !important; }
.login-actions a { font-size: 12px !important; font-weight: 800 !important; color: var(--ihb-blue) !important; text-decoration: none !important; }
.login-footer { text-align: center !important; font-size: 12px !important; color: var(--muted) !important; margin-top: 12px !important; padding-top: 10px !important; border-top: 1px dashed rgba(0,32,64,.18) !important; }

/* ===== Role-based visibility (layout_top.jsp) ===== */
.role-client .filter-state,
.role-client .filter-station { display: none !important; }
.role-supervisor .filter-state { display: none !important; }
.filter-field { margin-bottom: 6px; }

/* ===== Topbar (topbar.jsp) ===== */
.ihb-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #ffffff; border-bottom: 2px solid #cfd6dd; padding: 8px 16px;
  box-shadow: none; border-radius: 0;
}

.ihb-topbar .top-left, .ihb-topbar .top-right { flex: 0 0 140px; display: flex; align-items: center; }
.ihb-topbar .top-left  { justify-content: flex-start; }
.ihb-topbar .top-right { justify-content: flex-end; }
.ihb-topbar .logo-sm   { height: 44px; width: auto; display: block; }
.ihb-topbar .top-center { flex: 1; text-align: center; line-height: 1; }
.ihb-topbar .system-title { display: inline-block; font-size: 24px; font-weight: 800; letter-spacing: 0.3px; color: #0a7ea4; }
.ihb-topbar .ihb-actions  { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }
.ihb-topbar .welcome-text  { font-size: 12px; color: #222; white-space: nowrap; }
.ihb-topbar .logout-link   { font-size: 12px; font-weight: 700; color: #0a7ea4; text-decoration: none; padding: 4px 10px; border: 1px solid #0a7ea4; border-radius: 14px; background: transparent; }
.ihb-topbar .logout-link:hover { background: #0a7ea4; color: #fff; }
@media (max-width: 768px) {
  .ihb-topbar .top-left, .ihb-topbar .top-right { flex: 0 0 90px; }
  .ihb-topbar .logo-sm { height: 34px; }
  .ihb-topbar .system-title { font-size: 18px; }
  .ihb-topbar .welcome-text { display: none; }
}

/* ===== Footer ===== */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  color: #555;
  background: #f5f7fa;
  border-top: 1px solid #ddd;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-logo {
  height: 20px;
}

/* ===== Filter / Selector (selector.jspf, selectorpl.jspf) ===== */
.filter-row1, .filter-row2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-field { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.filter-field.filter-state   { min-width: 220px; }
.filter-field.filter-station { min-width: 260px; }
.filter-field.filter-tracker { flex: 1; min-width: 320px; }
.filter-field label { white-space: nowrap; margin: 0; }
.filter-field select { height: 32px; width: 100%; }

/* ===== Monitoring filter (selector_station.jspf) ===== */
.mon-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mon-field { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.mon-field label { white-space: nowrap; margin: 0; font-size: 12px; font-weight: 600; color: #1a3c6e; }
.mon-field select {
  height: 32px; width: 100%; box-sizing: border-box; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #cfd8dc; background: #fff; font-size: 13px; color: #1a3c6e; font-weight: 500;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #1a3c6e 50%), linear-gradient(135deg, #1a3c6e 50%, transparent 50%);
  background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ===== Common Filter Select Styling (Live, History, Reports) ===== */
.filter-strip select, .filter-common select {
  height: 32px; width: 100%; box-sizing: border-box; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #cfd8dc; background-color: #fff; font-size: 13px; color: #1a3c6e; font-weight: 500;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #1a3c6e 50%), linear-gradient(135deg, #1a3c6e 50%, transparent 50%);
  background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.filter-strip label, .filter-common label { font-size: 12px; font-weight: 600; color: #1a3c6e; margin-right: 6px; }

/* ===== Geofence status badges (trace.jsp, io.jsp, oneday_trace.jsp) ===== */
.geo-in  { color: #1a8f3a; font-weight: 700; }
.geo-out { color: #c62828; font-weight: 700; }

/* ===== Dashboard Modal ===== */
.ihb-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px;
}
.ihb-modal-backdrop.show { display: flex; }
.ihb-modal {
  width: min(1100px, 96vw); max-height: 88vh; background: #fff;
  border-radius: 14px; box-shadow: 0 10px 35px rgba(0,0,0,.25); overflow: hidden;
}
.ihb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.08); background: #fff; }
.ihb-modal-title  { font-weight: 700; color: var(--ihb-navy); }
.ihb-modal-body   { padding: 14px 16px; overflow: auto; max-height: calc(88vh - 54px); }
.ihb-modal .table { margin: 0; }
.dash-selbar      { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.dash-selbar .ff  { display: flex; gap: 8px; align-items: center; min-width: 220px; margin: 0; }
.dash-selbar .ff label  { white-space: nowrap; margin: 0; font-size: 12px; font-weight: 700; color: var(--ihb-navy); }
.dash-selbar .ff select { height: 32px; width: 100%; min-width: 160px; border-radius: 8px; }
body.role-client    .dash-selbar .ff-state,
body.role-client    .dash-selbar .ff-station { display: none !important; }
body.role-supervisor .dash-selbar .ff-state  { display: none !important; }
.yesterday-card { background: rgba(102,153,255,.42); border: 1px solid rgba(255,208,90,.35); }
.chart-row  { display: flex; gap: 16px; margin-top: 14px; width: 100%; }
.chart-card { flex: 1; min-height: 360px; }
.chart-title { font-weight: 700; color: var(--ihb-navy); margin-bottom: 12px; font-size: 18px; }
.chart-wrap  { position: relative; height: 220px; width: 100%; margin-bottom: 14px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-stats { font-size: 14px; color: var(--ihb-navy); line-height: 1.8; }
@media (max-width: 1100px) { .chart-row { flex-direction: column; } .chart-card { width: 100%; } }

/* ===== Quick Monitoring ===== */
.qm-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
.qm-legend  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qm-legend .badge { font-size: 11px; }
.qm-table-wrap { overflow: auto; }
.qm-table { width: 100%; border-collapse: collapse; min-width: 1200px; }
.qm-table th, .qm-table td { border-bottom: 1px solid #e6eaf0; padding: 10px 8px; font-size: 13px; vertical-align: middle; text-align: left; white-space: nowrap; }
.qm-table thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; color: #173b63; }
.qm-table tbody tr:hover { background: #f7fbff; }
.row-critical { background: #ffe3e3 !important; }
.row-warning  { background: #fff8cc !important; }
.row-install  { background: #fff0d9 !important; }
.row-reboot   { background: #ffeaea !important; }
.row-no-data  { background: #f5f7fa !important; }
.status-pill  { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; }
.pill-normal  { background: #e9f7ef; color: #1e7e34; }
.pill-info    { background: #e8f1ff; color: #1f5fbf; }
.pill-warn    { background: #fff4d6; color: #9a6700; }
.pill-danger  { background: #ffe3e3; color: #c92a2a; }
.pill-muted   { background: #eef2f6; color: #5c6b7a; }
.muted { color: #6c7a89; }
.mono  { font-family: Consolas, "Courier New", monospace; }
.right { text-align: right; }

/* ===== Field Gallery ===== */
.ihb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ihb-tile    { border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.04); cursor: pointer; }
.ihb-tile:hover { transform: translateY(-1px); }
.ihb-thumb       { width: 100%; height: 120px; object-fit: cover; display: block; background: #f4f6f9; }
.ihb-video-thumb { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; background: #eef2f7; color: #1a3c6e; font-size: 42px; font-weight: 700; }
.ihb-empty-thumb { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; background: #f4f6f9; color: #6b7280; font-size: 14px; }
.ihb-meta       { padding: 10px; }
.ihb-meta .dt   { font-size: 12px; color: var(--muted); }
.ihb-meta .msg  { margin-top: 4px; font-size: 13px; color: #1f2a37; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; }
.ihb-modal-card { position: relative; margin: 40px auto; width: min(1100px, calc(100% - 24px)); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 70px rgba(0,0,0,.30); }
.ihb-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
.ihb-modal-body { display: grid; grid-template-columns: 1.3fr .9fr; gap: 12px; padding: 12px 14px 14px; }
.ihb-modal-imgwrap { min-height: 420px; }
.ihb-modal-media { width: 100%; height: 420px; object-fit: contain; background: #f7f8fa; border-radius: 14px; border: 1px solid rgba(0,0,0,.06); }
.ihb-modal-map   { width: 100%; height: 320px; border-radius: 14px; border: 1px solid rgba(0,0,0,.06); background: #eef2f7; }
@media (max-width: 980px) { .ihb-modal-body { grid-template-columns: 1fr; } .ihb-modal-media { height: 360px; } .ihb-modal-map { height: 280px; } }

/* ===== IO Report ===== */
.io-table th, .io-table td { text-align: center; vertical-align: middle; }
.io-table td { font-size: 13px; padding: 6px 8px; }
.io-row-alert  { background: rgba(220,53,69,0.08); }
.io-cell-alert { color: #c62828; font-weight: 600; }
.io-cell-alert::after { content: " ⚠"; font-size: 11px; }

/* ===== Monthly Attendance ===== */
.card { max-width: 100%; }
.table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.table.attendance { width: max-content; min-width: 100%; table-layout: auto; white-space: nowrap; }
.table.attendance th, .table.attendance td { padding: 8px 10px; font-size: 13px; text-align: center; }
.table.attendance th:first-child, .table.attendance td:first-child { min-width: 140px; text-align: left; }
.table.attendance th:first-child, .table.attendance td:first-child { position: sticky; left: 0; background: #fff; z-index: 2; }
.table.attendance thead th { position: sticky; top: 0; background: #f7f8fa; z-index: 3; }

/* =============================================================
   IHB – Inline-style elimination utility classes
   These replace every style="..." attribute across all JSPs
   so that CSP style-src can work without 'unsafe-inline'
   ============================================================= */

/* ── color helpers ── */
.c-navy   { color: var(--ihb-navy); }
.c-muted  { color: var(--muted); }
.c-navy-b { color: var(--ihb-navy); font-weight: 600; }
.c-gray   { color: #777; font-weight: 600; }
.c-navy-sm{ color: var(--ihb-navy); font-size: 14px; }
.c-muted-sm{ color: var(--muted); font-size: 12px; margin-top: 6px; }
.c-muted-xs{ color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ── display / flex helpers ── */
.d-flex-sb   { display: flex; justify-content: space-between; align-items: center; }
.d-flex-sb-b { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.d-flex-sb-b6{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.d-flex-sb-b8{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.d-flex-gap  { display: flex; gap: 10px; }
.d-flex-gap-a{ display: flex; gap: 10px; align-items: center; }
.d-flex-gap12{ display: flex; gap: 12px; align-items: center; }
.d-flex-mt   { display: flex; gap: 10px; margin-top: 12px; }
.d-flex-mt10 { display: flex; gap: 10px; margin-top: 10px; }
.d-flex-mt10w{ display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.d-flex-mt-m { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.d-flex-fw   { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.d-flex-fw-mb{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.d-none      { display: none; }

/* ── spacing helpers ── */
.m-0      { margin: 0; }
.mt-6     { margin-top: 6px; }
.mt-8     { margin-top: 8px; }
.mt-10    { margin-top: 10px; }
.mt-12    { margin-top: 12px; }
.mb-8     { margin: 0 0 8px 0; }
.mb-10    { margin-bottom: 10px; }
.mb-12    { margin-bottom: 14px; }
.mb-14    { margin-bottom: 14px; }
.mb-mt12  { margin-top: 12px; box-shadow: none; }
.mb-mt14  { margin-top: 14px; box-shadow: none; }
.p-10-12  { padding: 10px 12px; margin-bottom: 10px; }
.p-10-12b { padding: 10px 12px; }
.p-18     { padding: 18px; }
.hint-sm  { margin: 0; font-size: 11px; }
.field-mn240{ margin: 0; min-width: 240px; }
.field-mn200{ margin: 0; min-width: 200px; }

/* ── button helpers ── */
.btn-h36  { height: 36px; padding: 0 18px; }
.btn-icon-close { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }

/* ── chart containers ── */
.chart-h220 { height: 220px; }

/* ── map / loader containers ── */
.map-canvas {
  height: 720px;
  border-radius: 14px;
  border: 1px dashed rgba(0,32,64,.25);
  background:
    radial-gradient(circle at 20% 25%, rgba(32,128,192,.10), transparent 40%),
    radial-gradient(circle at 80% 35%, rgba(224,96,32,.12), transparent 45%),
    linear-gradient(180deg, rgba(0,32,64,.03), rgba(0,32,64,.01));
  position: relative;
  overflow: hidden;
}
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.show { display: flex; }

/* ── live dot / label ── */
.live-dot {
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ihb-red);
  box-shadow: 0 0 0 10px rgba(192,32,32,.12);
  display: none;
}
.live-label {
  position: absolute;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--ihb-navy);
  font-weight: 800;
  display: none;
  white-space: nowrap;
}

/* ── table / card helpers ── */
.td-muted  { color: var(--muted); }
.tr-alert  { background: rgba(192,32,32,.06); }
.code-cell { padding: 6px 8px; background: #f4f6f9; border-radius: 6px; font-weight: 700; }
.w100-r14  { width: 100%; border-radius: 14px; border: 1px solid var(--border); padding: 10px; }
.w100-iframe{ width: 100%; height: 100%; border: none; }
.shadow-none{ box-shadow: none; }

/* ── alert banner (all-devices warning) ── */
.all-devices-msg {
  display: none;
  margin: 0 0 12px 0;
  padding: 12px 14px;
  border: 1px solid #f0d7a1;
  background: #fff8e5;
  color: #7a5a00;
  border-radius: 10px;
}

/* ── misc ── */
.mt-8-fw6-navy { margin-top: 8px; font-weight: 600; color: #1a3c6e; }
.d-inline-mt8  { display: inline-block; margin-top: 8px; text-decoration: none; }
.topbar-actions{ display: flex; align-items: center; gap: 14px; }
.video-bg      { display: none; background: #000; }
.no-data-row   { display: none; color: var(--muted); padding: 10px 0; }
.m-0-mb12      { margin: 2px 0 0 0; }

/* ── additional utility classes ── */
.d-none-i     { display: none !important; }
.mon-field-w  { min-width: 280px; }
.modal-footer { padding: 14px 18px; display: flex; justify-content: flex-end; gap: 10px; }

/* ── edit/view modal components ── */
.edit-modal-box    { background: #fff; width: 420px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); overflow: hidden; }
.modal-header-blue { padding: 14px 18px; background: #1a3c6e; color: #fff; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.modal-grid-2col   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px; }

/* ── modal title table (performance location viewOnMapLoc) ── */
.modal-title-table { display: inline-table; border-collapse: collapse; color: #fff; border: 2px solid #fff; }
.modal-title-table th { padding: 6px; border: 2px solid #fff; font-weight: 600; font-size: 13px; }


/* ════════════════════════════════════════════════════════════
   FIELD GALLERY — tiles + photo/video modal
   ════════════════════════════════════════════════════════════ */

/* ── Gallery grid ── */
.ihb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* ── Photo modal overlay — hidden until JS adds .open ── */
#photoModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.60);
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 16px;
}
#photoModal.open { display: flex; }

/* ── Modal card inside the overlay ── */
#photoModal .ihb-modal-card {
  position: relative;
  margin: auto;
  width: min(1100px, calc(100% - 24px));
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

/* ── Media img in modal ── */
#mImg {
  display: none;         /* shown by JS after load */
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: #f7f8fa;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  transition: opacity .3s;
}

/* ── Video in modal ── */
#mVideo {
  display: none;         /* shown by JS */
  width: 100%;
  height: 420px;
  background: #000;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}

/* ── Error message in modal ── */
#mImgErr {
  display: none;         /* shown by JS on load error */
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

/* ── Thumbnail image in tiles ── */
.ihb-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #f4f6f9;
  transition: opacity .25s;
}
.ihb-thumb.loading { opacity: 0; }
.ihb-thumb.loaded  { opacity: 1; }

/* ── Video placeholder in tiles ── */
.ihb-video-thumb {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  color: #fff;
  font-size: 38px;
  cursor: pointer;
}

/* ── allDevicesMsg — hidden by default, shown by JS ── */
#allDevicesMsg { display: none; }

@media (max-width: 980px) {
  #photoModal .ihb-modal-body { grid-template-columns: 1fr; }
  #mImg, #mVideo { height: 300px; }
}


/* ── Loading spinner + monitoring overlay ── */
.ihb-spinner {
  width: 36px; height: 36px;
  border: 4px solid rgba(26,46,74,.15);
  border-top-color: var(--ihb-navy, #1a2e4a);
  border-radius: 50%;
  animation: ihb-spin .7s linear infinite;
}
@keyframes ihb-spin { to { transform: rotate(360deg); } }

.mon-map-card { position: relative; }

.mon-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,.72);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.mon-loading-label {
  font-size: .85rem;
  color: var(--ihb-navy, #1a2e4a);
  font-weight: 600;
  letter-spacing: .02em;
}


.map-card-wrap { position: relative; }

.map-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,.72);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.map-loading-overlay.active { display: flex; }

.map-loading-label {
  font-size: .85rem;
  color: var(--ihb-navy, #1a2e4a);
  font-weight: 600;
  letter-spacing: .02em;
}