/* ===============================
   ADVANCED GIS POPUP UI
=================================*/

.gis-popup {
   font-family: 'Segoe UI', Roboto, sans-serif;
   width: 380px;
   max-width: 92vw;
   box-sizing: border-box;
   border-radius: 14px;
   overflow: hidden;
   /* background: #ffffff; */
   /* box-shadow: */
   /* 0 10px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.08); */
   animation: popupFade 0.25s ease-out;
   border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Smooth appear animation */
@keyframes popupFade {
   from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* ================= HEADER ================= */

.gis-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   /* background: linear-gradient(135deg,#1f3c88,#2a5298); */
   background: linear-gradient(135deg, #190e6a, #1b1770);
   color: white;
   padding: 5px 14px;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: .3px;
}

/* Header left section */
.gis-header span:first-child {
   display: flex;
   align-items: center;
   gap: 8px;
}

/* Close & Back Buttons */
.gis-close,
.gis-back {
   cursor: pointer;
   font-size: 16px;
   transition: all 0.2s ease;
   opacity: 0.85;
}

.gis-close:hover,
.gis-back:hover {
   opacity: 1;
   transform: scale(1.1);
}

/* ================= BODY ================= */

.gis-body {
   max-height: 280px;
   overflow-y: auto;
   background: #010101d7;
   /* padding: 6px; */
}

/* Custom scrollbar */
.gis-body::-webkit-scrollbar {
   width: 6px;
}

.gis-body::-webkit-scrollbar-thumb {
   background: #010101d2;
   border-radius: 10px;
}

/* ================= TABLE ================= */

.gis-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 2px;
}

.gis-table tr {
   /* background: white; */
   border-radius: 8px;
   transition: all 0.2s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
   color: yellow;
}

/* .gis-table tr:hover {
   transform: translateX(3px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
} */

.gis-table td {
   padding: 0px 10px;
   font-size: 13px;
   border: none;
   word-break: break-word;
   color: white;
}

.gis-key {
   font-weight: 600;
   color: #34495e;
   width: 45%;
}

/* ================= LAYER SELECT LIST ================= */

.gis-layer-item {
   /* padding: 5px 12px;
   border-radius: 10px;
   margin-bottom: 8px;
   cursor: pointer;
   font-size: 14px;
   background: white;
   border: 1px solid #e3e8ef;
   transition: all 0.2s ease;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); */
   padding: 0px 7px;
   border-radius: 10px;
   margin-bottom: 8px;
   cursor: pointer;
   font-size: 14px;
   /* background: white; */
   /* border: 1px solid #e3e8ef; */
   transition: all 0.2s ease;
   box-shadow: 0 2px 5px rgb(0 0 0 / 4%);
   color: white;
   border-bottom: 1px solid #848298;

}

.gis-layer-item:hover {
   /* background: #eef4ff; */
   border-color: #e4f82f;
   transform: translateY(-2px);
   box-shadow: 0 5px 12px rgba(224, 255, 85, 0.2);
}

/* ================= BUTTON SECTION ================= */

.gis-body .btn {
   border-radius: 20px;
   font-size: 12px;
   padding: 6px 14px;
   font-weight: 500;
   transition: all .2s ease;
}

.gis-body .btn-primary {
   background: linear-gradient(135deg, #2196f3, #1e88e5);
   border: none;
}

.gis-body .btn-primary:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 10px rgba(33, 150, 243, .4);
}

.gis-body .btn-success {
   background: linear-gradient(135deg, #43a047, #2e7d32);
   border: none;
}

.gis-body .btn-success:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 10px rgba(67, 160, 71, .4);
}

/* ================= MOBILE ================= */

@media (max-width:768px) {

   .gis-popup {
      width: 280px;
   }

   .gis-body {
      max-height: 45vh;
   }

   .gis-table td {
      font-size: 12px;
   }
}

@media (max-width:480px) {

   .gis-popup {
      width: 95vw;
   }

   .gis-body {
      max-height: 50vh;
   }
}

#popupDocList {
   border: 1px solid #274b93;
   padding-top: 6px;
   padding-left: 11px;
   padding-right: 11px;
}

#popupDocListAll {
   border: 1px solid #274b93;
   padding-top: 6px;
   padding-left: 11px;
   padding-right: 11px;
}

.gis-body {
   max-height: 320px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.gis-content {
   flex: 1;
   overflow-y: auto;
   padding: 0px;
}

/* ONLY BUTTON FLOATS */
.gis-footer {
   position: sticky;
   bottom: 0;
   background: #121113;
   padding: 10px;
   border-top: 1px solid #ddd;
   display: flex;
   justify-content: center;
   z-index: 10;
   gap: 10px;
}

.gis-footer .btn {
   white-space: nowrap;
   font-size: 12px;
   padding: 4px 8px;
}

/* DOC LIST NORMAL (NOT FLOATING) */
.doc-list {
   margin-top: 10px;
   border: 1px solid #274b93;
   border-radius: 8px;
   padding: 0px;
   /* background: #fff; */
}

/* ############## */
/* .gis-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
   border-bottom: 1px solid #ddd;
} */

/* LEFT */
.gis-header-left {
   width: 40px;
   text-align: left;
}

/* CENTER */
.gis-header-center {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   gap: 8px;
   font-weight: 600;
}

/* RIGHT */
.gis-header-right {
   width: 40px;
   text-align: right;
}

/* ICON */
.gis-icon-circle {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #b9207c;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
}

/* TITLE */
.gis-title {
   white-space: nowrap;
}

#photoModal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

#photoModalClose {
   position: absolute;
   top: 20px;
   right: 30px;
   color: #fff;
   font-size: 30px;
   cursor: pointer;
}

#photoModalImg {
   max-width: 90%;
   max-height: 80%;
   border-radius: 8px;
}

.gis-layer-item.disabled {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
}

/* ================= Popup Settings START ================= */

#popup-setting-panel {
   width: 320px;
}

#popup-setting-panel .panel-section {
   padding: 15px;
}

#popup-setting-panel .panel-section label {
   color: #dfe8f3;
   font-size: 10px;
   font-weight: 600;
   margin-bottom: 7px;
   /* display: block; */
}

#popup-setting-panel .btn-group-vertical {
   display: flex;
   flex-direction: column;
   /* gap: 12px; */
}

#popup-setting-panel .btn-check {
   display: none;
}

#popup-setting-panel .btn {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 15px;

   padding: 15px 18px;
   border-radius: 14px;

   background: linear-gradient(145deg, #2d3b4d, #1d2735);
   border: 1px solid #44576d;

   color: #dce7f3;
   font-size: 14px;
   font-weight: 500;

   transition: .3s ease;
   cursor: pointer;
}

#popup-setting-panel .btn i {
   font-size: 20px;
   width: 26px;
   text-align: center;
   color: #8fd3ff;
}

#popup-setting-panel .btn:hover {
   transform: translateY(-2px);
   border-color: #35c2ff;
   background: linear-gradient(145deg, #38506a, #243546);
   box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
}

#popup-setting-panel .btn-check:checked+.btn {
   background: linear-gradient(135deg, #0099ff, #0057d9);
   border-color: #2196f3;
   color: #fff;
   box-shadow: 0 0 18px rgba(33, 150, 243, .45);
}

#popup-setting-panel .btn-check:checked+.btn i {
   color: #fff;
}

#popup-setting-panel #popup_off:checked+.btn {
   background: linear-gradient(135deg, #ff5c5c, #d6002f);
   border-color: #ff4d4d;
}

#popup-setting-panel .btn span {
   display: flex;
   flex-direction: column;
}

#popup-setting-panel .btn small {
   color: #b8c5d3;
   font-size: 11px;
   margin-top: 2px;
}

#popup-setting-panel .btn-check:checked+.btn small {
   color: #eaf4ff;
}

/* ================= Popup Settings END ================= */

/* ==========================================================
   QUARTER BUILDING FLOOR VISUALIZER
========================================================== */
#qtr-bldg-viz {
   font-family: 'Segoe UI', Roboto, sans-serif;
   max-width: 420px;
   min-width: 300px;
   animation: popupFade 0.3s ease-out;
   position: fixed;
   left: 20px;
   bottom: 90px;
   z-index: 2000;
}
.qv-wrapper {
   background: linear-gradient(160deg, #0f172a, #1e293b);
   border: 1px solid rgba(148,163,184,0.18);
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
   position: relative;
}
/* --- Header --- */
.qv-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: linear-gradient(135deg, #312e81, #1d4ed8);
   padding: 10px 14px;
   gap: 8px;
}
.qv-title {
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .3px;
   display: flex;
   align-items: center;
   gap: 7px;
}
.qv-close {
   color: rgba(255,255,255,0.65);
   cursor: pointer;
   font-size: 14px;
   line-height: 1;
   padding: 2px 5px;
   border-radius: 50%;
   transition: all .18s;
}
.qv-close:hover { color: #fff; background: rgba(255,255,255,0.15); }
/* --- Legend --- */
.qv-legend {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   font-size: 11px;
   color: #eff1f3;
   background: rgba(255,255,255,0.03);
   border-bottom: 1px solid rgba(255,255,255,0.07);
}
.qv-legend-box {
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 3px;
}
/* --- Building Body --- */
.qv-building {
   padding: 12px 14px;
   max-height: 400px;
   overflow-y: auto;
}
.qv-building::-webkit-scrollbar { width: 5px; }
.qv-building::-webkit-scrollbar-track { background: transparent; }
.qv-building::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 3px; }
.qv-loading {
   color: #94a3b8;
   font-size: 13px;
   padding: 20px;
   text-align: center;
}
/* --- Floors --- */
.qv-floors {
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.qv-floor-row {
   display: flex;
   align-items: center;
   gap: 8px;
}
.qv-floor-label {
   width: 30px;
   min-width: 30px;
   font-size: 10px;
   font-weight: 700;
   color: #eff2f5;
   text-align: right;
   letter-spacing: .5px;
}
.qv-floor-units {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   flex: 1;
}
/* --- Flat Cells --- */
.qv-flat {
   width: 52px;
   height: 44px;
   border-radius: 7px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
   transition: transform .15s, box-shadow .15s;
   border: 1.5px solid transparent;
}
.qv-flat:hover {
   transform: scale(1.1);
   z-index: 10;
   border-color: rgba(255,255,255,0.45);
   box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.qv-flat-label {
   font-size: 9px;
   font-weight: 700;
   color: rgba(255,255,255,0.9);
   text-align: center;
   line-height: 1.2;
   pointer-events: none;
   padding: 2px;
   word-break: break-all;
}
/* Status colours */
.qv-vacant {
   background: linear-gradient(145deg, #166534, #16a34a);
   box-shadow: 0 2px 8px rgba(22,163,74,0.4);
}
.qv-allotted {
   background: linear-gradient(145deg, #991b1b, #dc2626);
   box-shadow: 0 2px 8px rgba(220,38,38,0.4);
}
.qv-unknown {
   background: linear-gradient(145deg, #374151, #4b5563);
   box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* Legend colour matches */
.qv-legend-box.qv-vacant   { background: #16a34a; }
.qv-legend-box.qv-allotted { background: #dc2626; }
.qv-legend-box.qv-unknown  { background: #4b5563; }
/* --- Stats Bar --- */
.qv-stats {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   padding: 9px 14px;
   background: rgba(255,255,255,0.04);
   border-top: 1px solid rgba(255,255,255,0.07);
   font-size: 12px;
   color: #d9dde4;
}
.qv-stat {
   display: flex;
   align-items: center;
   gap: 5px;
}
.qv-stat b { color: #e2e8f0; }
/* --- Tooltip --- */
.qv-tooltip {
   position: absolute;
   background: rgba(15,23,42,0.97);
   border: 1px solid rgba(148,163,184,0.25);
   border-radius: 9px;
   padding: 9px 12px;
   font-size: 12px;
   color: #e2e8f0;
   min-width: 150px;
   max-width: 220px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.5);
   pointer-events: none;
   z-index: 9999;
   transform: translateX(-50%);
}
.qv-tip-row {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 2px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.qv-tip-row b { color: #f1f5f9; font-size: 13px; }