/* =========================================================
   Base layout
   ========================================================= */
html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* iOS Safari baseline so -webkit-fill-available can work if needed */
@supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
}

#sideTree {
  width: 340px;
  max-width: 98vw;
  position: absolute;
  inset: 0 auto 0 0;
  background: #fff;
  overflow: auto;
  border-right: 1px solid #eee;
  z-index: 1000;
}

#map {
  position: absolute;
  left: 340px;
  top: 0;
  right: 0;
  bottom: 0;
}

/* =========================================================
   Tree / Lists
   ========================================================= */
#sideTree h5 {
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.treeview {
  padding: 8px 10px 16px;
}

.treeview ul {
  list-style: none;
  margin: 0;
  padding-left: 20px;
}

.treeview .tree-project,
.treeview .tree-job {
  cursor: pointer;
  padding: 2px 0 2px 3px;
}

.treeview .caret {
  cursor: pointer;
  user-select: none;
  margin-right: 5px;
  font-size: 1.09em;
}

.treeview .caret::before {
  content: "\25B6";
  color: #777;
  display: inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
}

.treeview .caret.caret-down::before { content: "\25BC"; }

.treeview .collapsed > ul { display: none; }

.treeview .tree-project > .caret:hover,
.treeview .tree-job .tree-job-header:hover {
  color: #007bff;
  background: #f4faff;
  border-radius: 5px;
}

.tree-job-header {
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.tree-job.tree-selected .tree-job-header {
  background: #f2f6ff;
  color: #007bff;
  border-radius: 5px;
}

.defect-list {
  margin: 4px 0 8px;
  padding-left: 8px;
}

.defect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.defect-item:hover { background: #f7faff; }

.defect-item.selected {
  background: #eef4ff;
  outline: 1px solid #cfe0ff;
}

.def-label { font-size: .93rem; line-height: 1.2; }
.def-meta  { font-size: .78rem; opacity: .75; }

/* =========================
   Mobile panel polish
   ========================= */
@media (max-width: 750px) {

  /* Panel bg + safe scroll area */
  #mobilePanel { background: #f6f8fb; }
  #mobilePanelBody { padding: 10px 12px max(16px, env(safe-area-inset-bottom)); }

  /* Sticky header with subtle blur */
  #mobilePanel > div:first-child {
    position: sticky; top: 0; z-index: 2;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid #e9eef5;
    backdrop-filter: saturate(140%) blur(6px);
  }

  /* Segmented tab group */
  #mobilePanel > div:first-child > div {
    background: #eef2f8;
    border: 1px solid #e1e7f0;
    border-radius: 999px;
    padding: 6px;
  }

  /* Tabs */
  #mobilePanel .mobtab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #2a2e37;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: transform .06s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    display: inline-flex; align-items: center; gap: 8px;
  }
  #mobilePanel .mobtab:active { transform: scale(0.98); }
  #mobilePanel .mobtab.active {
    background: #fff; color: #0b63f6;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px #cfe0ff inset;
  }
  #mobilePanel .mobtab svg { width: 18px; height: 18px; display: block; }

  /* Close button hit area & style */
  #mobileClose {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid #e1e7f0 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
  }
  #mobileClose:active { transform: scale(0.96); }

  /* Filters: chunkier chips */
  #mFilters { gap: 10px; }
  #mFilters .filter-chip {
    padding: 8px 12px;
    font-size: .95rem;
    border-color: #e1e7f0;
    background: #fff;
  }
  #mFilters .filter-chip.active {
    background: #eaf2ff;
    border-color: #c2d7ff;
    color: #0b63f6;
  }

  /* Lists as cards */
  #mobDefectList, #mobJobList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Works whether items have .defect-item/.job-item or plain <li> */
  /* Card styling – do NOT force all #mobJobList li into a row */
#mobDefectList .defect-item,
#mobDefectList li,
#mobJobList .job-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 56px;
  background: #fff;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16,24,40,.06);
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

  #mobDefectList .defect-item:active,
  #mobJobList .job-item:active,
  #mobDefectList li:active,
  #mobJobList li:active { transform: scale(0.98); }

  /* Text hierarchy */
  #mobDefectList .def-label { font-size: 1rem; font-weight: 600; line-height: 1.2; }
  #mobDefectList .def-meta  { font-size: .82rem; opacity: .72; }

  /* Priority dot alignment */
  #mobDefectList .dot { flex: 0 0 12px; margin-right: 6px; }

  /* Hide scrollbars (iOS & Chromium) */
  #mobilePanelBody::-webkit-scrollbar { width: 0; height: 0; }
}

/* ===== Mobile Defects: list cards ===== */
.mdef-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px;}
.mdef-title{font-weight:700;font-size:1.05rem;}
.mdef-filter-btn{border:1px solid #ddd;background:#fff;border-radius:10px;padding:6px 10px;font-size:.9rem;}

.mdef-list{list-style:none;margin:0;padding:0;}
.mdef-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eee;border-radius:12px;background:#fff;margin-bottom:8px;}
.mdef-item:active{background:#f9fbff}
.mdef-left .dot{width:14px;height:14px;margin-top:4px;}
.mdef-body{flex:1;min-width:0}
.mdef-desc{font-weight:600;line-height:1.25;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mdef-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mdef-meta .badge-pri{font-size:.78rem;padding:3px 8px}
.mdef-meta .badge.badge-light{background:#f6f7fb;border:1px solid #e6e8f2;border-radius:999px;padding:3px 8px;font-weight:600}

/* ===== Bottom-sheet drawer (mobile filters) ===== */
.sheet{position:fixed;inset:0;display:none;z-index:10050}
.sheet.open{display:block}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .18s ease-out;will-change:transform}
.sheet.open .sheet-panel{transform:translateY(0)}
.sheet.dragging .sheet-panel{transition:none}
.sheet-grabber{width:44px;height:4px;border-radius:2px;background:#d9dbe1;margin:8px auto}
.sheet-title{font-weight:700;padding:4px 14px 8px}
.sheet-content{padding:6px 12px 10px;display:flex;gap:8px;flex-wrap:wrap;max-height:42vh;overflow:auto;-webkit-overflow-scrolling:touch}
.sheet-actions{display:flex;justify-content:flex-end;padding:8px 12px 12px}
.mdef-primary{border:none;background:#0b63f6;color:#fff;border-radius:10px;padding:8px 14px;font-weight:600}

/* ===== Mobile Inspections: tree view ===== */
/* --- Mobile Inspections tree (cards + branch lines) --- */
#mobInspections .mobtree { list-style: none; margin: 0; padding: 0; }

/* Project container (stacks header + children) */
#mobInspections .mobtree > .mt-project {
  display: block;
  margin: 10px 0;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16,24,40,.06);
}

/* Project header row */
#mobInspections .mt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px; cursor: pointer;
}
#mobInspections .mt-title { font-weight: 700; flex: 1; }
#mobInspections .mt-count { font-size: .85rem; opacity: .65; }
#mobInspections .mt-caret { width: 12px; height: 12px; display: inline-block; transform: rotate(0deg); transition: transform .12s ease; }
#mobInspections .mt-caret::before {
  content: ""; display: block; width: 0; height: 0;
  border-left: 6px solid #777; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
#mobInspections .mt-project:not(.collapsed) .mt-caret { transform: rotate(90deg); }

/* Children list under each project */
#mobInspections .mt-children {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 6px 12px 12px 24px; /* left pad leaves space for the spine */
}
#mobInspections .mt-project.collapsed > .mt-children { display: none; }

/* Vertical spine (branch) left of children */
#mobInspections .mt-children::before {
  content: "";
  position: absolute;
  left: 12px; top: 0; bottom: 8px;
  width: 1px; background: #e4e9f1;
}

/* Each job row as a card */
#mobInspections .mt-job { position: relative; padding: 6px 0; }
#mobInspections .mt-job-row {
  position: relative;
  padding: 10px 12px;
  border: 1px solid #edf1f6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}

/* Horizontal connector from spine to job card */
#mobInspections .mt-job-row::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  width: 12px; height: 1px;
  background: #e4e9f1;
  transform: translateY(-50%);
}

/* =========================================================
   Filters
   ========================================================= */
#filters, #mFilters {
  padding: 6px 12px 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .92rem;
  cursor: pointer;
  user-select: none;
  background: #fff;
}

.filter-chip.active {
  background: #eef4ff;
  border-color: #bcd3ff;
  color: #0b63f6;
}

.tree-defects-count {
  font-size: .9rem;
  opacity: .75;
  margin-left: 6px;
}

#filtersDrawer {
  display: none;
  border-bottom: 1px solid #eee;
}

#filtersDrawer.open { display: block; }

#filterToggle {
  float: right;
  margin: 8px 10px 0 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 4px 8px;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}

/* =========================================================
   Priority dots / badges
   ========================================================= */
:root {
  --p-high: #d92d20;
  --p-med:  #f59e0b;
  --p-low:  #16a34a;
  --p-fi:   #6b7280;
}

.badge-pri {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
}

.badge-high   { background: var(--p-high); }
.badge-medium { background: var(--p-med); }
.badge-low    { background: var(--p-low); }
.badge-fi     { background: var(--p-fi); }

.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.dot-high   { background: var(--p-high); }
.dot-medium { background: var(--p-med); }
.dot-low    { background: var(--p-low); }
.dot-fi     { background: var(--p-fi); }

/* =========================================================
   Tooltip (popup content styling)
   ========================================================= */
.leaflet-tooltip.defect-tooltip {
  background: #fff;
  color: #222;
  border-radius: 9px;
  border: 1.5px solid #e44134;
  box-shadow: 0 2px 12px #0002;
  max-width: 340px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.3;
}

.defect-tooltip .defect-desc {
  margin-bottom: 4px;
  font-weight: 600;
}

.defect-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.defect-thumbs img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  cursor: pointer;
}

.defect-thumbs .more-count {
  align-self: center;
  font-size: .8rem;
  opacity: .7;
}

/* =========================================================
   Annotorious look
   ========================================================= */
.a9s-annotationlayer [class="a9s-inner"] {
  stroke: #940e05 !important;
  stroke-width: 3px !important;
}
.a9s-annotationlayer .a9s-annotation.hover [class="a9s-inner"] {
  stroke: #fff000 !important;
}

#anno-tooltip {
  position: absolute;
  background: #fffbe6;
  color: #222;
  border: 1.5px solid #e44134;
  border-radius: 9px;
  box-shadow: 0 8px 32px #0003, 0 2px 8px #e4413422;
  padding: 7px 13px;
  font-size: 1.06em;
  z-index: 10010;
  pointer-events: none;
  display: none;
}

.popper-arrow {
  position: absolute;
  width: 16px;
  height: 8px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.popper-arrow::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fffbe6;
  filter: drop-shadow(0 -1px 0 #e44134);
}

/* =========================================================
   Image modal / OSD — cleaned
   ========================================================= */

/* Shared: make the modal a flex column so the body can grow */
#imageModal .modal-content {
  display: flex;
  flex-direction: column;
}

/* Ensure the modal stack can stretch correctly */
#imageModal .modal-content {
  display: flex;
  flex-direction: column;
}

/* The extra wrapper inside .modal-content must also be a flex column */
#imageModal .modal-content > div {
  position: relative;
  display: flex;           /* <-- key fix */
  flex-direction: column;  /* <-- key fix */
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important; /* override any inline 100% */
}

/* Let the body actually take the space */
#imageModal .modal-body {
  position: relative;
  flex: 1 1 auto;          /* <-- grows to fill wrapper */
  min-height: 0;
  padding: 0 !important;
  /* no explicit height here */
}

/* ---------------- Desktop (>= 751px) ---------------- */
@media (min-width: 751px) {
  #imageModal .modal-dialog,
  #imageModal .modal-content {
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
  }
  #imageModal .modal-body {
    padding: 0 !important;
    display: flex;        /* keep for consistency (not strictly needed) */
    flex: 1 1 auto;
    min-height: 0;        /* critical so children can fill */
  }
}

/* ---------------- Mobile (<= 750px) ---------------- */
@media (max-width: 750px) {
  /* Map + sidebar tweaks you already have */
  #sideTree { display: none !important; }
  #map { left: 0 !important; top: 0 !important; }

  /* Full-viewport modal */
  #imageModal { padding: 0 !important; }
  #imageModal .modal-dialog,
  #imageModal .modal-content {
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;      /* modern dynamic viewport */
    border-radius: 0 !important;
  }
  @supports (height: 100svh) {
    #imageModal .modal-dialog,
    #imageModal .modal-content { height: 100svh !important; }
  }
  @supports (-webkit-touch-callout: none) {
    /* iOS fallback for older Safari */
    #imageModal .modal-dialog,
    #imageModal .modal-content { height: -webkit-fill-available !important; }
  }

  /* Make the anonymous wrapper inside .modal-content stretch correctly */
  #imageModal .modal-content > div {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important; /* override any inline 100% */
  }

  /* Let the body be the anchor with real height */
  #imageModal .modal-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
  }

  /* Hide filename + filmstrip on phones */
  #photoMeta, #modalThumbBar { display: none !important; }
}

/* Keep the lightbox above other overlays if you have any */
#imageModal { z-index: 1400; }
.modal-backdrop { z-index: 1350; }

/* iOS portrait: force the OSD wrapper to fill the modal body */
#imageModal .modal-body {
  position: relative !important;   /* anchor for absolute child */
}

#imageModal .modal-body #osdContainer {
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: 0;  /* avoid 'inset' shorthand */
  display: block;
  /* Remove any height %/auto battles */
  height: auto !important;
  min-height: 0 !important;
}

/* ---------- Lightbox chrome (HUD + arrows) ---------- */
#imageHud { transition: opacity .18s ease; }
#imageModal.chrome-hidden #imageHud { opacity: 0; pointer-events: none; }

/* Arrows (same look on desktop & iOS) */
#prevPhoto, #nextPhoto {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem !important; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  color: #fff;
}
#prevPhoto:hover, #nextPhoto:hover { transform: scale(1.04); background: rgba(0,0,0,.7) !important; }
#prevPhoto:active, #nextPhoto:active { transform: scale(0.98); }

/* During OSD drag: stop accidental arrow taps */
#imageModal.dragging #prevPhoto,
#imageModal.dragging #nextPhoto { pointer-events: none; opacity: .25; }

/* ---------- Filmstrip ---------- */
#modalThumbBar {
  height: 78px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; overflow-x: auto;
  padding: 12px 0 4px 0;
  background: rgba(25,25,25,.88);
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 10; border-top: 2px solid #333;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
/* Hidden when user toggles chrome OR when our JS autohide wants it hidden */
#imageModal.chrome-hidden #modalThumbBar,
#modalThumbBar.thumbbar-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
#modalThumbBar.thumbbar-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.modal-thumb {
  width: 88px; height: 62px; object-fit: cover; flex: 0 0 auto;
  border-radius: 6px; border: 2px solid transparent; cursor: pointer;
}
.modal-thumb:hover  { border-color: #ccc; }
.modal-thumb.active { border: 3px solid #e44134; box-shadow: 0 0 0 2.5px #fff8; }


/* =========================================================
   Leaflet zoom (gray out at bounds)
   ========================================================= */
.leaflet-control-zoom a.leaflet-disabled {
  opacity: .4 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* =========================================================
   Mobile (<= 750px) — no fullscreen used
   ========================================================= */
@media (max-width: 750px) {
  /* Give map full width; hide sidebar */
  #sideTree { display: none !important; }
  #map { left: 0 !important; top: 0 !important; }

  /* Larger tap targets */
  .tree-job-header { padding: 10px 8px; }
  .defect-item     { padding: 10px 12px; }
  #filters, #mFilters { padding: 8px 12px; }
}

/* =========================================================
   Accessibility helpers
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   Map stroke halo
   ========================================================= */
.leaflet-interactive.defect-stroke {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff);
}

/*===========================================================
  Prevent pinch to zoom triggering buttons
  =========================================================== */
  /* During a two-finger pinch, don't let the arrows receive clicks */
#imageModal.pinching #prevPhoto,
#imageModal.pinching #nextPhoto {
  pointer-events: none;
  opacity: .25;
}

/* Optional: avoid weird touch gestures on the buttons themselves */
#prevPhoto, #nextPhoto { touch-action: manipulation; }

/*==================================================================
  Force mobile template
  ================================================================== */

  /* Force mobile layout when JS adds .force-mobile (e.g., on iOS landscape) */
body.force-mobile #sideTree { display: none !important; }
body.force-mobile #map { left: 0 !important; top: 0 !important; }
body.force-mobile #mobileListBtn { display: inline-flex !important; }