:root {
  --bg: #eef1f6;
  --panel: #ffffff;
  --border: #e5e8ef;
  --text: #1a2233;
  --text-muted: #6b7280;
  --text-faint: #9aa3b2;

  /* Nepal government color scheme -- flag blue + flag crimson */
  --primary: #003893;
  --primary-dark: #00256b;
  --primary-soft: #e5ebf7;
  --accent: #DC143C;
  --accent-soft: #fbe6ea;

  --danger: #DC143C;
  --danger-soft: #fbe6ea;
  --success: #1a9e5c;
  --success-soft: #e6f7ee;
  --warning: #c8850a;
  --warning-soft: #fdf3e0;
  --info: #3457d5;
  --info-soft: #eaefff;

  --sidebar-bg: #001f52;
  --sidebar-bg-2: #002d78;
  --sidebar-text: #a9b8d9;
  --sidebar-active-bg: #DC143C;

  --radius: 12px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 1px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14), 0 4px 10px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

.main {
  animation: page-in 0.2s ease both;
}
.main.leaving {
  animation: page-out 0.12s ease both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes page-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", Arial, sans-serif;
  /* A faint top-down tint instead of a flat fill -- closer to how Windows 11's
     Mica material reads (subtle depth, not a solid poster color). */
  background: radial-gradient(1400px 700px at 18% -10%, #f5f7fb 0%, var(--bg) 45%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Every tappable element gets native-app-style press feedback instead of
   the default gray flash iOS/Android browsers show on tap. */
a, button, .btn, .sidebar a, .kpi-card, .dropdown-menu a {
  -webkit-tap-highlight-color: transparent;
}

.layout { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */

.sidebar {
  width: 234px;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  box-shadow: 2px 0 18px rgba(0, 10, 40, 0.12);
  position: relative;
  z-index: 5;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar .brand .mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.sidebar .brand .mark svg { width: 20px; height: 20px; }
.sidebar .brand .mark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Official emblems (login/setup letterhead, PDF-style pairing) ---------- */

.emblem-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.emblem-row img { height: 48px; width: auto; }
.emblem-row .divider { width: 1px; height: 36px; background: var(--border); }

.emblem-watermark {
  position: absolute;
  opacity: 0.10;
  pointer-events: none;
}

.sidebar .brand .title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.25; }
.sidebar .brand .subtitle { font-size: 10.5px; color: var(--sidebar-text); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.sidebar a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.sidebar a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }

.sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar a:active { transform: scale(0.98); }
.sidebar a.active { background: var(--sidebar-active-bg); color: #fff; box-shadow: 0 2px 8px rgba(220, 20, 60, 0.35); }
.sidebar a.active svg { opacity: 1; }

.sidebar .footer-note {
  font-size: 11px;
  color: var(--text-faint);
  padding: 10px 12px 2px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 8px;
}

/* ---------- Main content ---------- */

.main { flex: 1; padding: 28px 36px 60px; max-width: 1240px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header h1 { font-size: 21px; margin: 0; letter-spacing: -0.01em; }
.page-header .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

/* ---------- KPI cards ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.kpi-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary);
}
.kpi-card .icon svg { width: 18px; height: 18px; }
.kpi-card.working .icon { background: var(--success-soft); color: var(--success); }
.kpi-card.notworking .icon { background: var(--danger-soft); color: var(--danger); }
.kpi-card.flickering .icon { background: var(--warning-soft); color: var(--warning); }
.kpi-card.repair .icon { background: var(--info-soft); color: var(--info); }
.kpi-card.accent .icon { background: var(--accent-soft); color: var(--accent); }

.kpi-card .body { min-width: 0; }
.kpi-card .label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi-card .value { font-size: 22px; font-weight: 700; margin-top: 3px; }
.kpi-card.notworking .value { color: var(--danger); }
.kpi-card.working .value { color: var(--success); }

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
th { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; font-weight: 700; background: #f8f9fc; }
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
tbody tr:hover td { background: #f6f8fd; }
tbody tr:last-child td { border-bottom: none; }
table a { color: var(--primary); text-decoration: none; font-weight: 600; }
table a:hover { text-decoration: underline; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.badge.status-active { background: var(--success-soft); color: var(--success); }
.badge.status-inactive { background: var(--danger-soft); color: var(--danger); }
.badge.status-working { background: var(--success-soft); color: var(--success); }
.badge.status-flickering { background: var(--warning-soft); color: var(--warning); }
.badge.status-notworking { background: var(--danger-soft); color: var(--danger); }
.badge.status-damaged { background: var(--danger-soft); color: var(--danger); }
.badge.status-repair { background: var(--info-soft); color: var(--info); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease, filter 0.15s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 8px rgba(16, 24, 40, 0.14); }
.btn:active { transform: scale(0.97); filter: brightness(0.96); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); }
.btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.btn.secondary { background: #fff; color: var(--primary); border-color: var(--border); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.btn.secondary:hover { background: var(--primary-soft); border-color: var(--primary); }
.btn.secondary:active { background: var(--primary-soft); filter: none; }
.btn.accent { background: var(--accent); border-color: var(--accent); }
.btn.accent:hover { background: #b5102f; border-color: #b5102f; }
.btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.small { padding: 5px 11px; font-size: 12px; }

form.inline { display: inline; }

/* ---------- Dropdown menu (Export button etc.) ---------- */

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 20;
}
.dropdown-menu.open { display: block; }
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.dropdown-menu a:hover { background: var(--primary-soft); color: var(--primary); }
.dropdown-menu a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.dropdown-menu a:hover svg { color: var(--primary); }
.dropdown-menu .menu-note {
  padding: 6px 10px 4px;
  font-size: 11px;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.form-grid .full { grid-column: 1 / -1; }

label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: #fbfbfd;
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea { resize: vertical; min-height: 60px; }

.form-actions { margin-top: 20px; display: flex; gap: 10px; }

/* ---------- Empty states ---------- */

.empty-state {
  color: var(--text-muted);
  padding: 46px 20px;
  text-align: center;
}
.empty-state .icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state .icon svg { width: 22px; height: 22px; }
.empty-state a { color: var(--primary); font-weight: 600; text-decoration: none; }
.empty-state a:hover { text-decoration: underline; }

/* ---------- Misc ---------- */

.summary-row { display: flex; gap: 36px; margin-bottom: 4px; flex-wrap: wrap; }
.summary-row .item .label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.summary-row .item .value { font-size: 19px; font-weight: 700; margin-top: 2px; }

.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.section-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }

.toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* A real iOS/Android/Windows-style pill switch instead of a plain OS
   checkbox square -- same <input type=checkbox>, just restyled. */
.toggle-row input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 25px;
  border-radius: 999px;
  background: #d3d8e2;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.2s ease;
}
.toggle-row input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
  transition: transform 0.18s ease;
}
.toggle-row input[type=checkbox]:checked { background: var(--primary); }
.toggle-row input[type=checkbox]:checked::before { transform: translateX(17px); }
.toggle-row input[type=checkbox]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Person avatar chips ---------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.avatar-0 { background: var(--primary); }
.avatar-1 { background: var(--accent); }
.avatar-2 { background: var(--warning); }
.avatar-3 { background: #7c5cbf; }
.avatar-4 { background: #c04a72; }

code {
  background: #f2f4f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 600;
}
.alert svg { width: 17px; height: 17px; flex-shrink: 0; }
.alert.success { background: var(--success-soft); color: var(--success); }
.alert.error { background: var(--danger-soft); color: var(--danger); }

input[type=file] {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fbfbfd;
  font-size: 13.5px;
}

/* ---------- Geolocation tagging ---------- */

.geo-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fbfbfd;
  margin-bottom: 16px;
}
.geo-tag-row .status { font-size: 12.5px; color: var(--text-muted); }
.geo-tag-row .status.ok { color: var(--success); font-weight: 600; }
.geo-tag-row .status.err { color: var(--danger); font-weight: 600; }

/* ---------- Map ---------- */

.map-container {
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.leaflet-popup-content b { color: var(--primary); }
.pole-map-marker { filter: drop-shadow(0 3px 5px rgba(16, 24, 40, 0.35)); cursor: grab; }
.pole-map-marker:active { cursor: grabbing; }

/* Calms down OpenStreetMap's default busy/saturated styling (harsh oranges
   on major roads, high-contrast labels) toward a softer, more modern read --
   without needing a different (and, as it turns out, now key-gated) tile
   provider. Hue is left alone so parks/water are still readable at a
   glance, just less shouty. */
.map-tiles-muted { filter: saturate(0.72) brightness(1.06) contrast(0.94); }

/* ---------- Photo gallery ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.photo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.photo-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.photo-card .meta { padding: 8px 10px; font-size: 11px; color: var(--text-muted); }
.photo-card a { text-decoration: none; }

/* ---------- Timeline (inspection history) ---------- */

.timeline { border-left: 2px solid var(--border); margin-left: 6px; padding-left: 20px; }
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -25.5px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.timeline-item .date { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.timeline-item .desc { margin-top: 4px; font-size: 13.5px; }
.timeline-item .action { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* ---------- Mobile nav (top bar + off-canvas drawer) ---------- */

.mobile-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  height: 54px;
  /* When installed as a standalone PWA (no browser chrome), this bar sits
     right under the phone's status bar/notch -- env() pads it clear of
     that on iOS; it's a no-op (falls back to 0) everywhere else. */
  padding: env(safe-area-inset-top) 14px 0;
  min-height: calc(54px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1001;
}

.hamburger-btn {
  background: none;
  border: none;
  color: #fff;
  /* 44px is Apple's minimum comfortable touch target -- the icon itself
     stays 22px, padding just widens the tappable area around it. */
  width: 44px;
  height: 44px;
  margin: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hamburger-btn svg { width: 22px; height: 22px; }
.hamburger-btn:active { opacity: 0.6; }

.mobile-topbar-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
.mobile-topbar-brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.mobile-topbar-brand .mark svg { width: 16px; height: 16px; }
.mobile-topbar-brand .mark img { width: 100%; height: 100%; object-fit: contain; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 25, 0.5);
  z-index: 1002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  .mobile-topbar { display: flex; }
  .sidebar-overlay { display: block; }

  .layout { flex-direction: column; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    /* 100vh is the LARGEST possible mobile viewport (address bar hidden) --
       using it alone can make this fixed drawer taller than what's
       actually visible once the browser chrome is showing, pushing "Log
       out" past the bottom of the screen. 100dvh tracks the real visible
       height as the browser chrome shows/hides; kept as a fallback since
       older mobile browsers don't support dvh. */
    height: 100vh;
    height: 100dvh;
    width: 78vw;
    max-width: 280px;
    z-index: 1003;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    /* Without this, iOS Safari can fail to enable touch/drag scrolling
       inside a fixed-position container, making an overflowing sidebar
       feel "stuck" even though overflow-y: auto is set correctly. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* This drawer covers the full screen height including the notch and
       home-indicator areas -- pad those in rather than letting the brand
       row or "Log out" sit underneath them. */
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-md); }

  .sidebar a { padding: 12px; min-height: 24px; }

  body.drawer-open { overflow: hidden; }

  .main {
    max-width: 100%;
    padding: 16px 14px calc(40px + env(safe-area-inset-bottom));
  }

  .page-header { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .page-header h1 { font-size: 18px; }

  .panel { padding: 16px; }

  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel table { min-width: 560px; }

  .form-grid { grid-template-columns: 1fr; }

  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-row { gap: 20px; }

  .btn { padding: 11px 16px; }
  .btn.small { padding: 8px 13px; }

  .map-container { height: 300px; }
}

@media (max-width: 460px) {
  .kpi-grid { grid-template-columns: 1fr; }
}