:root {
      --p: #ea580c;
      /* Operations Orange */
      --pl: #fff7ed;
      --navy: #0f172a;
      --navyl: #1e293b;
      --text: #1e293b;
      --sub: #64748b;
      --bd: #cbd5e1;
      --bg: #f1f5f9;
      --ok: #10b981;
      --warn: #f59e0b;
      --card-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: "Sarabun", sans-serif;
      background-color: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

    /* LOGIN CONTAINER */
    .login-container {
      max-width: 420px;
      margin: 60px auto;
      padding: 30px 24px;
      background: #fff;
      border-radius: 16px;
      box-shadow: var(--card-shadow);
      text-align: center;
    }

    .login-logo {
      width: 80px;
      height: 80px;
      background: var(--pl);
      color: var(--p);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2rem;
      margin: 0 auto 20px;
    }

    /* MAIN WRAPPER */
    .app-wrapper {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
      position: relative;
      padding-bottom: 120px;
    }

    /* HEADER */
    .app-header {
      background: var(--navy);
      color: #fff;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 4px solid var(--p);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      background: var(--p);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 0.9rem;
    }

    .app-title-text h1 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
    }

    .app-title-text p {
      margin: 2px 0 0;
      font-size: 0.75rem;
      color: #cbd5e1;
    }

    .back-btn {
      color: #fff;
      cursor: pointer;
      font-size: 1.2rem;
      margin-right: 15px;
    }

    /* VIEW CONTAINERS */
    .app-view {
      display: none;
      padding: 16px;
    }

    .app-view.active {
      display: block;
    }

    /* HOME HUB GRID */
    .hub-btn {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      cursor: pointer;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      transition: all 0.2s;
      font-family: inherit;
      outline: none;
      width: 100%;
    }

    .hub-btn:active {
      transform: scale(0.96);
      background: #f8fafc;
    }

    .hub-icon {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
    }

    .hub-text {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--navy);
    }

    #view-map {
      padding: 0;
      position: absolute;
      top: 68px;
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      z-index: 10;
      display: none;
      flex-direction: column;
    }

    #view-map.active {
      display: flex !important;
    }

    #map-container {
      width: 100%;
      flex: 1;
      z-index: 1;
    }

    .leaflet-popup-content-wrapper {
      border-radius: 12px;
      font-family: "Sarabun", sans-serif;
    }

    /* CUSTOM LEAFLET CONTROLS */
    .leaflet-control-layers {
      border: 1px solid var(--bd) !important;
      box-shadow: var(--card-shadow) !important;
      border-radius: 8px !important;
    }

    .leaflet-control-layers-toggle {
      background-image: none !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 36px !important;
      height: 36px !important;
      text-decoration: none;
    }

    .leaflet-control-layers-toggle::after {
      content: "\f5fd";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.1rem;
      color: var(--text);
    }

    .leaflet-bar {
      border: 1px solid var(--bd) !important;
      box-shadow: var(--card-shadow) !important;
      border-radius: 8px !important;
      overflow: hidden;
    }

    .leaflet-bar a {
      border-bottom: 1px solid var(--bd) !important;
    }

    /* CUSTOM PIN MARKERS (SAME AS CENTER) */
    .c-pin {
      background: none !important;
      border: none !important;
    }

    .pin-wrap {
      position: relative;
      width: 22px;
      height: 22px;
      transform: translate(4px, -0.34px);
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
    }

    .pin-head {
      width: 22px;
      height: 22px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      border: 2px solid #fff;
    }

    .pin-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      animation: pin-pulse-ani 1.5s infinite;
    }

    @keyframes pin-pulse-ani {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }

      100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
      }
    }

    /* TOGGLE SWITCH */
    .switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 24px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #cbd5e1;
      transition: 0.4s;
      border-radius: 24px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked+.slider {
      background-color: var(--p);
    }

    input:checked+.slider:before {
      transform: translateX(16px);
    }

    /* FORM INPUTS */
    .input-group {
      margin-bottom: 16px;
      text-align: left;
    }

    .input-label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
      font-size: 0.9rem;
    }

    .input-control {
      width: 100%;
      padding: 12px;
      border: 1.5px solid var(--bd);
      border-radius: 8px;
      font-family: inherit;
      font-size: 1rem;
      outline: none;
      background: #f8fafc;
      transition: all 0.25s;
    }

    .input-control:focus {
      border-color: var(--p);
      background: #fff;
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s;
    }

    .btn-primary {
      background: var(--p);
      color: #fff;
    }

    .btn-primary:active {
      transform: scale(0.98);
    }

    .btn-secondary {
      background: var(--sub);
      color: #fff;
    }

    .btn-secondary:active {
      transform: scale(0.98);
    }

    /* INCIDENTS LIST */
    .list-header {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid #e2e8f0;
    }

    .filter-badge {
      padding: 6px 14px;
      background: #f1f5f9;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--sub);
      cursor: pointer;
    }

    .filter-badge.active {
      background: var(--pl);
      border-color: var(--p);
      color: var(--p);
      font-weight: 600;
    }

    .search-box {
      position: relative;
      margin-bottom: 16px;
    }

    .search-box i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--sub);
    }

    .search-box input {
      padding-left: 36px;
    }

    /* INCIDENT CARD */
    .incident-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
      cursor: pointer;
      transition: all 0.2s;
    }

    .incident-card:active {
      transform: scale(0.99);
      background: #fafafa;
    }

    .incident-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
    }

    .incident-name {
      font-weight: 700;
      font-size: 1.05rem;
      margin: 0;
    }

    .status-pill {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
    }

    .status-pending {
      background: #fef3c7;
      color: #d97706;
    }

    .status-active {
      background: #eff6ff;
      color: #2563eb;
    }

    .status-completed {
      background: #d1fae5;
      color: #059669;
    }

    .status-moved {
      background: #f3e8ff;
      color: #7c3aed;
    }

    .incident-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.8rem;
      color: var(--sub);
      margin-bottom: 10px;
    }

    .incident-meta span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .incident-type-tag {
      font-size: 0.72rem;
      color: #4f46e5;
      background: #f5f3ff;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1.5px solid #ddd6fe;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* SHELTER CARD */
    .shelter-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
    }

    .shelter-name {
      font-weight: 700;
      font-size: 1.05rem;
      margin: 0 0 8px;
    }

    .shelter-stats {
      display: flex;
      gap: 16px;
      margin-bottom: 10px;
    }

    .shelter-stat-box {
      flex: 1;
      background: #f8fafc;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
    }

    .shelter-stat-val {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--navy);
    }

    .shelter-stat-lbl {
      font-size: 0.7rem;
      color: var(--sub);
    }

    /* MODAL WINDOWS */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    @media (min-width: 601px) {
      .modal-backdrop {
        align-items: center;
      }
    }

    .modal-content {
      background: #fff;
      width: 100%;
      max-width: 600px;
      border-radius: 20px;
      padding: 24px;
      max-height: 95vh;
      overflow-y: auto;
      box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1);
    }

    @media (min-width: 601px) {
      .modal-content {
        border-radius: 16px;
        width: 90%;
      }
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 12px;
    }

    .modal-header h2 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: var(--sub);
      cursor: pointer;
    }

    /* LOADER */
    #loader {
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid var(--bd);
      border-top-color: var(--p);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }


    /* ── BADGES & STATUS TAGS (Central Standard) ── */
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 10px;
      font-size: 0.82rem;
      font-weight: 700;
      white-space: nowrap;
      text-align: center;
      border: 1.5px solid transparent;
      transition: all 0.2s ease;
    }

    .badge-ok {
      background: #ecfdf5;
      color: var(--ok);
      border-color: #a7f3d0;
    }

    .badge-warn {
      background: #fffbeb;
      color: var(--warn);
      border-color: #fde68a;
    }

    .badge-err {
      background: #fef2f2;
      color: var(--err);
      border-color: #fecaca;
    }

    .badge-info {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
    }

    .badge-primary {
      background: var(--pl);
      color: var(--p);
      border-color: rgba(79, 70, 229, 0.2);
    }

    .badge-neutral {
      background: #f1f5f9;
      color: var(--sub);
      border-color: var(--bd);
    }

    .badge-walkin {
      background: #fffbeb;
      color: #92400e;
      border-color: #fde68a;
    }

    .badge-incident {
      background: #f5f3ff;
      color: #3730a3;
      border-color: #ddd6fe;
    }

    /* BOTTOM NAVIGATION */
    .bottom-nav {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 560px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      justify-content: space-around;
      padding: 10px 12px;
      border-radius: 24px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      z-index: 1000;
    }

    .nav-item {
      color: #94a3b8;
      text-decoration: none;
      font-size: 0.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      flex: none;
      width: 33.33%;
      padding: 12px 4px;
      border-radius: 16px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      outline: none;
      position: relative;
    }

    .nav-item i {
      font-size: 1.5rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-item span {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: 'Sarabun', sans-serif;
    }

    .nav-item.active {
      color: #fff;
      background: rgba(234, 88, 12, 0.15);
    }

    .nav-item.active i {
      color: var(--p);
      transform: translateY(-2px);
      filter: drop-shadow(0 4px 6px rgba(234, 88, 12, 0.4));
    }

    .nav-item.active span {
      font-weight: 700;
    }

    /* Prevent Leaflet attribution from overlapping bottom nav */
    .leaflet-bottom.leaflet-right {
      margin-bottom: 90px !important;
    }

/* ซ่อนลายน้ำของไลบรารีกล้อง (Powered by ScanApp) */
#qr-reader a {
  display: none !important;
}
#qr-reader img {
  display: none !important;
}
#qr-reader video {
  border-radius: 8px !important;
}