/* =========================================================
   HAZMIEH GIS — UAE GOV / ABU DHABI INSPIRED UI
   - Mobile-first
   - Uses UAE Design System colour system (AEGold / AEBlack / AERed / AEGreen)
   ========================================================= */

/* -------------------------
   1) Design Tokens
   ------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
:root{

  /* UAE Design System – Core Palette (selected steps) */
  --ae-gold-50:#F9F7ED;
  --ae-gold-100:#F2ECCF;
  --ae-gold-200:#E6D7A2;
  --ae-gold-300:#D7BC6D;
  --ae-gold-400:#CBA344;
  --ae-gold-500:#B68A35;
  --ae-gold-600:#92722A;
  --ae-gold-700:#7C5E24;
  --ae-gold-800:#6C4527;
  --ae-gold-900:#5D3B26;

  --ae-black-50:#F7F7F7;
  --ae-black-100:#E1E3E5;
  --ae-black-200:#C3C6CB;
  --ae-black-300:#9EA2A9;
  --ae-black-400:#797E86;
  --ae-black-500:#5F646D;
  --ae-black-700:#3E4046;
  --ae-black-900:#1B1D21;
  --ae-black-950:#0E0F12;

  --ae-red-50:#FEF2F2;
  --ae-red-600:#D83731;
  --ae-red-700:#B52520;

  --ae-green-50:#F3FAF4;
  --ae-green-600:#3F8E50;
  --ae-green-700:#2F663C;

  /* UAE Supporting palette (Tech Blue key) */
  --tech-blue-500:#286CFF;
  --tech-blue-700:#003CFF;
  --sea-blue-600:#0090D4;

  /* Brand decisions for this app (Abu Dhabi premium vibe) */
  --brand: var(--ae-gold-500);
  --brand-strong: var(--ae-gold-600);
  --brand-deep: var(--ae-gold-800);

  --ink: var(--ae-black-950);
  --text: #0f172a;              /* readable near-black */
  --muted: #5f6b7a;             /* softer than black */
  --muted-2: #7b8794;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: rgba(15,23,42,.12);
  --border-strong: rgba(15,23,42,.18);

  --success: var(--ae-green-600);
  --danger: var(--ae-red-600);
  --info: var(--tech-blue-500);

  /* Radius / shadows */
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-sm: 0 6px 18px rgba(2,6,23,.08);
  --shadow-md: 0 10px 30px rgba(2,6,23,.10);
  --shadow-lg: 0 18px 50px rgba(2,6,23,.16);

  /* Layout */
  --topbar-h: 56px;
  --tabs-h: 64px;

  /* Focus ring */
  --focus: 0 0 0 4px rgba(40,108,255,.18);

  /* Tap targets */
  --tap: 44px;
}

/* Optional: smoother type rendering */
html{ -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body{
  font-weight: 500;
}

body.dashboard-page{
  overflow-x: hidden;
}

body.field-menu-page{
  overflow-x: hidden;
}

body.field-menu-page .topbar{
  height: auto;
  min-height: calc(var(--topbar-h) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  padding-top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
}

.appname,
.page-title,
.layer-title,
.tab,
.btn,
.btn-small{
  font-weight: 700;
}

label,
.muted,
.appsub{
  font-weight: 500;
}

html[lang="ar"] body{
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Enforce Tajawal on all form/question controls app-wide */
input,
select,
textarea,
button,
option,
optgroup,
label{
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}


a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 12px;
}

/* Utility */
.muted{ color: var(--muted); font-size: 13px; line-height: 1.5; }
.hidden{ display:none !important; }

/* -------------------------
   2) Buttons (IMPORTANT: no global button styling)
   ------------------------- */
button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* Make all button-like elements align correctly (including <a class="btn-ghost">) */
.btn,
.btn-ghost,
.btn-small,
.fw-btn,
.tab{
  display: inline-flex;     /* ✅ key */
  align-items: center;      /* ✅ key */
  justify-content: center;  /* ✅ safe */
  line-height: 1;           /* ✅ prevents “floating” */
}


.btn{
  height: var(--tap);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-weight: 900;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(146,114,42,.18);
}
.btn-primary:hover{ filter: brightness(.98); }
.btn-primary:active{ transform: translateY(1px); }

.btn-ghost{
  height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 900;
}
.btn-ghost:hover{ background: #f2f4f7; }
.btn-ghost:active{ transform: translateY(1px); }

.btn-danger{
  background: linear-gradient(180deg, var(--danger) 0%, var(--ae-red-700) 100%);
  color:#fff;
}

.btn-icon{
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background:#fff;
}

/* Small floating buttons (map) */
.btn-small{
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-weight: 900;
  color:#fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: var(--shadow-md);
}
.btn-small:active{ transform: scale(.985); }

.btn-small.btn-ghost{
  background:#fff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}


/* =========================================================
   3) Forms (inputs/select/radio) + Billboards UI (tabs/repeater)
   ONE CLEAN VERSION (no duplicates)
   - NO custom ▼ icon
   - RTL/LTR aware
   - Repeater: remove gray marker + custom arrow, and keep delete opposite side
   - Photos actions: move to other side in RTL
   ========================================================= */

/* -------------------------
   Base form controls
   ------------------------- */
label{ font-size: 12px; font-weight: 800; color: var(--muted); }

.input,
input,
select,
textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

input::placeholder,
textarea::placeholder{ color: rgba(15,23,42,.45); }

input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: rgba(40,108,255,.55);
  box-shadow: var(--focus);
}

/* Hide native select arrow (we do NOT draw custom icon now) */
select{
  appearance: none;
  background: #fff;
}

/* Radios */
.radio-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.radio{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background:#fff;
  font-weight: 800;
  color: var(--text);
}
.radio input{ width:auto; margin:0; }

/* -------------------------
    tabs + rows
   ------------------------- */
.form-tabs{
  display:flex;
  gap:8px;
  margin:10px 0;
  flex-wrap:wrap;
}
.form-tab-btn{
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(16,24,40,.08));
}
.form-tab-btn.active{
  background: rgba(182,138,53,.10);
  border-color: rgba(182,138,53,.35);
}
.form-tab-panel{ display:none; padding-top:8px; }
.form-tab-panel.active{ display:block; }

/* Form rows (Billboards) */
.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
}
.form-row label{
  font-weight:700;
  font-size:13px;
  color:#1f2937;
}
/* Keep consistent padding for billboards rows */
.form-row input,
.form-row select,
.form-row textarea{
  border:1px solid rgba(15,23,42,.16);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
}
.form-row textarea{ min-height:88px; resize:vertical; }

/* =========================================================
   SELECT — remove native gray arrow (all browsers)
   ========================================================= */
/* ✅ Hide native arrow ONLY outside repeater */
#fw :not(.repeater-wrap) select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
}

/* IE/old Edge only outside repeater */
#fw :not(.repeater-wrap) select::-ms-expand{ display:none; }

/* wrappers */
.fw-field,
.form-row{
  position: relative;
}

/* Clean select look */
.fw-field select,
.form-row select{
  background-color: transparent;
}

/* -------------------------
   RTL 
   ------------------------- */
/* Tabs: Arabic order, start from RIGHT */
#fw #fw-form .form-tabs{
  display: flex !important;
  direction: rtl !important;        /* ✅ makes first tab appear on RIGHT */
  justify-content: flex-start;      /* start from right in RTL */

  /* Keep form tabs fixed at the top while the form scrolls */
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  padding: 8px 6px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}

/* Tab buttons text */
#fw #fw-form .form-tab-btn{
  direction: rtl;
  text-align: center;
}

#fw.rtl-form #fw-form label{ text-align:right; }
#fw.rtl-form #fw-form select{ direction: rtl; }

#fw.rtl-form #fw-form input[type="text"],
#fw.rtl-form #fw-form textarea{
  direction: rtl;
  text-align: right;
}

#fw.rtl-form #fw-form input[type="number"],
#fw.rtl-form #fw-form input[type="date"]{
  direction: ltr;
  text-align: left;
}

/* -------------------------
   Repeater (Billboards)
   ------------------------- */
.repeater-wrap{
  border:1px solid rgba(15,23,42,.16);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.repeater-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.repeater-row{
  border:1px dashed rgba(15,23,42,.18);
  border-radius:12px;
  padding:10px;
  margin:10px 0;
  background:rgba(182,138,53,.06);
}
.repeater-row-title{ font-weight:800; margin-bottom:6px; }

/* ✅ RTL: keep delete with them (LEFT) */
#fw.rtl-form .repeater-row-actions{
  margin-right: auto;
  margin-left: 0;
}

/* Old IE/Edge */
.repeater-wrap select::-ms-expand{ display:none; }



/* ✅ Kill any native marker/triangle that might appear */
.repeater-wrap summary::-webkit-details-marker { display: none !important; }
.repeater-wrap summary { list-style: none !important; }
.repeater-wrap summary::marker { content: "" !important; }

/* ✅ If the triangle is coming from a ::before somewhere */
.repeater-row-head::before,
.repeater-row::before {
  content: none !important;
  display: none !important;
}

/* Header layout */
.repeater-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}

/* RTL friendly */
#fw.rtl-form .repeater-row-head{
  flex-direction: row-reverse;
}

/* Title + arrow group */
.repeater-row-left{
  flex: 1 1 auto;
  min-width:0;
}


/* Title */
.repeater-row-title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Professional chevron icon (no text triangles) */
.repeater-chev{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:0;
  flex: 0 0 auto;
}

/* draw a caret using CSS */
.repeater-chev::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid rgba(15,23,42,.75);
  border-bottom:2px solid rgba(15,23,42,.75);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

/* rotate when open */
.repeater-row[data-open="1"] .repeater-chev::after{
  transform: rotate(45deg);
}

/* Mobile: bigger tap target */
@media (max-width: 600px){
  .repeater-row-head{ padding:12px 12px; }
  .repeater-chev{ width:34px; height:34px; border-radius:12px; }
}

/* ===== Repeater header layout: chevron LEFT, delete RIGHT ===== */
.repeater-row-head{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content: space-between;
}

/* LEFT group (chev + title) stays on the left */
.repeater-row-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

/* Title small black, no “card” look */
.repeater-row-title{
  font-weight: 800;
  font-size: 12px;
  color: #0f172a;
  margin: 0;
}

/* Chevron: no white background, just the arrow */
.repeater-chev{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;      /* ✅ no white back */
  border: 0;                    /* ✅ no border */
  border-radius: 0;
  flex: 0 0 auto;
}

/* Draw the arrow */
.repeater-chev::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid rgba(15,23,42,.75);
  border-bottom:2px solid rgba(15,23,42,.75);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

/* rotate when open */
.repeater-row[data-open="1"] .repeater-chev::after{
  transform: rotate(45deg);
}

/* Actions on the RIGHT always */
.repeater-row-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-inline-start: auto;  /* pushes to end */
}

/* RTL: keep the same visual order (left chevron, right delete) */
#fw.rtl-form .repeater-row-head{ direction: ltr; } /* keeps layout stable */
#fw.rtl-form .repeater-row-title{ direction: rtl; text-align: right; } /* title text RTL */

/* =========================
   Mobile: smaller delete (حذف) button
   ========================= */
@media (max-width: 600px){

  /* Repeater delete button */
  .repeater-row-actions .btn-danger,
  .repeater-row-actions button{
    padding: 4px 8px;          /* smaller touch size */
    font-size: 11px;           /* smaller text */
    font-weight: 700;
    border-radius: 8px;
    min-height: 28px;
    line-height: 1;
  }

  /* Make it less visually heavy */
  .repeater-row-actions .btn-danger{
    background: rgba(220,38,38,.08);
    border-color: rgba(220,38,38,.18);
    color: #991b1b;
  }

  /* Optional: icon-only delete on very small screens */
  .repeater-row-actions .btn-danger span{
    display: none;             /* if you later wrap text in <span> */
  }
}

/* -------------------------
   Arrow in DropDown List (FIXED)
   - arrow at OPPOSITE side (start)
   - black
   - NEVER shows inside repeater
   ------------------------- */

#fw :not(.repeater-wrap) select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
}
#fw :not(.repeater-wrap) select::-ms-expand{ display:none; }

.fw-field,
.form-row{ position: relative; }

/* Arrow on START side */
#fw .fw-field:has(> select):not(.repeater-wrap .fw-field)::after,
#fw .form-row:has(> select):not(.repeater-wrap .form-row)::after{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(calc(-50% + 1.5px)) rotate(45deg);
  width:8px;
  height:8px;
  border-right:2px solid rgba(0,0,0,.85);
  border-bottom:2px solid rgba(0,0,0,.85);
  pointer-events:none;
  z-index:3;

  /* ✅ opposite side (START) */
  inset-inline-start: 14px;
  inset-inline-end: auto;
}


/* -------------------------
   Feature Window buttons + Photos actions
   ------------------------- */
#fw-form .btn-small{
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  color: var(--text);
  font-weight: 900;
}

#fw-form .btn-danger{
  background:rgba(220,38,38,.10);
  border-color:rgba(220,38,38,.25);
}

/* Photo actions row */
#fw-form .photos-actions{
  display: flex;
  gap: 10px;
  align-items: center;

  justify-content: flex-end;   /* ✅ RIGHT side by default */
}

/* RTL: keep them on the RIGHT as well */
#fw.rtl-form #fw-form .photos-actions{
  justify-content: flex-end;   /* ✅ still right */
}


/* GOLD Camera & Upload buttons */
#fw-form .photos-actions .btn-small{
  background: linear-gradient(180deg, var(--ae-gold-400) 0%, var(--ae-gold-600) 100%);
  color:#fff;
  border:1px solid var(--ae-gold-700);
  font-weight:900;
  border-radius:12px;
  padding:8px 14px;
  box-shadow: 0 8px 18px rgba(182,138,53,.35);
}
#fw-form .photos-actions .btn-small:hover{ filter: brightness(0.97); }
#fw-form .photos-actions .btn-small:active{ transform: translateY(1px); }




/* Mobile sticky tabs */
@media (max-width: 600px){
  /* make the tabs bar stick under your top header */
  #fw-form .form-tabs{
    position: sticky;
    top: 0;                 /* if you have a fixed header inside #fw, change to its height */
    z-index: 50;
    background: #fff;
    padding: 8px 6px;
    margin: 0 0 10px;
    border-bottom: 1px solid rgba(15,23,42,.10);

    /* horizontal scroll */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    flex-wrap: nowrap;      /* ✅ important */
  }

  /* hide scrollbar (optional) */
  #fw-form .form-tabs::-webkit-scrollbar{ height: 6px; }
  #fw-form .form-tabs::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.12); border-radius: 999px; }

  /* bigger touch targets */
  #fw-form .form-tab-btn{
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 999px;   /* pill */
    font-size: 13px;
    font-weight: 900;
  }

  /* add spacing so first fields don’t hide under sticky bar */
  #fw-form .form-tab-panel{
    padding-top: 6px;
  }
}

/* =========================
   RADIO (select_one) — CARD STYLE + SELECTED COLOR
   text RIGHT — circle LEFT (stable)
   ========================= */

#fw #fw-form .radio-group{
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* CARD container */
#fw #fw-form .radio-item{
  display: grid !important;
  grid-template-columns: 28px 1fr !important;   /* circle | text */
  align-items: center !important;

  width: 100% !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;

  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 16px !important;
  background: #fff !important;

  cursor: pointer;
}

/* Circle fixed at LEFT */
#fw #fw-form .radio-item input[type="radio"]{
  grid-column: 1 !important;
  justify-self: start !important;
  margin: 0 !important;

  transform: scale(1.15);
  accent-color: #b68a35; /* gold */
}

/* Text fixed at RIGHT */
#fw #fw-form .radio-item span{
  grid-column: 2 !important;
  justify-self: end !important;
  text-align: right !important;
  font-weight: 800;
}

/* ✅ Selected style (like before) */
#fw #fw-form .radio-item:has(input[type="radio"]:checked){
  border-color: rgba(182,138,53,.55) !important;
  background: rgba(182,138,53,.08) !important;
  box-shadow: 0 0 0 3px rgba(182,138,53,.12) !important;
}

#fw #fw-form .form-row.form-row--checkbox,
#fw #fw-form .fw-field.fw-field--checkbox{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 0 !important;
}

#fw #fw-form .form-row.form-row--checkbox .form-checkbox-inline,
#fw #fw-form .fw-field.fw-field--checkbox .form-checkbox-inline{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  direction: inherit;
  cursor: pointer;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
}

#fw #fw-form .form-row.form-row--checkbox .form-checkbox-label,
#fw #fw-form .fw-field.fw-field--checkbox .form-checkbox-label{
  direction: inherit;
  line-height: 1.4;
  text-align: start;
}

#fw #fw-form .form-row.form-row--checkbox input[type="checkbox"],
#fw #fw-form .fw-field.fw-field--checkbox input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

#fw #fw-form .form-row.form-row--checkbox .form-checkbox-inline:has(input[type="checkbox"]:disabled),
#fw #fw-form .fw-field.fw-field--checkbox .form-checkbox-inline:has(input[type="checkbox"]:disabled){
  cursor: default;
}


/* Question label (field label above radios) — BIGGER */
#fw #fw-form .fw-field > label{
  display: block;
  direction: rtl;
  text-align: right !important;

  font-size: 15px;        /* ⬅️ bigger (was default ~12px) */
  font-weight: 800;       /* ⬅️ stronger */
  line-height: 1.6;       /* ⬅️ better Arabic readability */

  margin-bottom: 10px;    /* ⬅️ a bit more space */
}



/* ===== SELECT: text on RIGHT inside dropdown ===== */
#fw #fw-form select{
  direction: rtl !important;
  text-align: right !important;
  text-align-last: right !important; /* ✅ important for select */
  padding-right: 18px !important;    /* room for arrow */
  padding-left: 12px !important;
}


/* =========================
   TEXT INPUTS — WRITE FROM RIGHT
   ========================= */

/* text + textarea */
#fw #fw-form input[type="text"],
#fw #fw-form textarea{
  direction: rtl !important;
  text-align: right !important;
}

/* numbers & dates stay LTR (correct behavior) */
#fw #fw-form input[type="number"],
#fw #fw-form input[type="date"]{
  direction: ltr !important;
  text-align: left !important;
}

#fw #fw-form input[type="tel"],
body.vz-viewer #fw input[type="tel"]{
  direction: ltr !important;
  text-align: left !important;
}

#fw #fw-form .iti{
  width: 100%;
  direction: ltr;
}

#fw #fw-form .iti input[type="tel"],
body.vz-viewer #fw .iti input[type="tel"]{
  padding-left: 96px !important;
  padding-right: 14px !important;
}

#fw #fw-form .iti--separate-dial-code input[type="tel"],
body.vz-viewer #fw .iti--separate-dial-code input[type="tel"]{
  padding-left: 110px !important;
}

.iti{
  width: 100%;
}

.iti__country-container{
  left: 0 !important;
  right: auto !important;
  direction: ltr !important;
}

.iti__selected-country{
  padding-inline: 12px 10px !important;
  border-inline-end: 1px solid rgba(15,23,42,.10);
}

.iti__selected-country-primary{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.iti__country-list{
  direction: ltr !important;
  text-align: left !important;
  z-index: 2147483647 !important;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow-lg);
}

.iti--container{
  position: fixed !important;
  z-index: 2147483647 !important;
}

.iti--container .iti__country-list{
  max-height: min(320px, calc(100vh - 24px)) !important;
}

#fw #fw-form .iti__search-input,
body.vz-viewer #fw .iti__search-input{
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 12px;
  padding: 10px 12px;
}

#fw #fw-form .phone-widget,
body.vz-viewer #fw .phone-widget{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}

#fw #fw-form .phone-widget input[type="tel"],
body.vz-viewer #fw .phone-widget input[type="tel"]{
  flex: 1 1 auto;
  min-width: 0;
}

#fw #fw-form .phone-country-box,
body.vz-viewer #fw .phone-country-box{
  position: relative;
  flex: 0 0 auto;
}

#fw #fw-form .phone-country-trigger,
body.vz-viewer #fw .phone-country-trigger{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

#fw #fw-form .phone-country-trigger[disabled],
body.vz-viewer #fw .phone-country-trigger[disabled]{
  cursor: default;
  opacity: .75;
}

#fw #fw-form .phone-country-flag,
body.vz-viewer #fw .phone-country-flag{
  font-size: 18px;
  line-height: 1;
}

#fw #fw-form .phone-country-code,
body.vz-viewer #fw .phone-country-code{
  direction: ltr;
  white-space: nowrap;
}

.phone-country-panel{
  position: fixed;
  width: min(320px, 80vw);
  padding: 10px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 2147483647;
}

.phone-country-panel.hidden{
  display: none;
}

.phone-country-search{
  width: 100%;
  margin-bottom: 8px;
  direction: ltr;
  text-align: left;
}

.phone-country-list{
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phone-country-option{
  display: grid;
  grid-template-columns: 24px 56px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.phone-country-option:hover,
.phone-country-option.is-selected{
  background: rgba(182,138,53,.10);
}

.phone-country-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SELECT text also right-aligned */
#fw #fw-form select{
  direction: rtl !important;
  text-align: right !important;
  text-align-last: right !important;
}




/* -------------------------
   4) Login
   ------------------------- */
.login-body{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(182,138,53,.14), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(40,108,255,.10), transparent 55%),
    var(--bg);
}

.login-card{
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.login-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg, rgba(182,138,53,.18), rgba(40,108,255,.10));
  filter: blur(18px);
  opacity:.55;
  z-index:0;
}
.login-card > *{ position: relative; z-index:1; }

.login-brand{ text-align:center; align-items: center;margin-bottom: 14px; }
.login-title{ font-weight: 1000; font-size: 18px; letter-spacing: .2px; }
.login-sub{ color: var(--muted); font-size: 13px; margin-top: 4px; }

.login-logo{
  display: block;
  margin: 0 auto;          /* ✅ center even if parent changes */
  width: clamp(120px, 34vw, 190px);  /* ✅ responsive */
  height: auto;            /* ✅ keep ratio */
  object-fit: contain;     /* ✅ no distortion */
}

/* Optional: if you want a premium “badge” look */
.login-logo{
  background: #fff;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Credits under logo */
.login-credits{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.form{ display:flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.form button{
  margin-top: 4px;
}
.form button[type="submit"]{
  height: 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color:#fff;
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(146,114,42,.18);
}
.form button[type="submit"]:active{ transform: translateY(1px); }

.error{
  border: 1px solid rgba(216,55,49,.35);
  background: var(--ae-red-50);
  color: #7a1a16;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

/* -------------------------
   5) Topbar (Dashboard + Field)
   ------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--topbar-h);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.appbrand-logo{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(182,138,53,.14) 0%, rgba(182,138,53,.05) 100%);
  border: 1px solid rgba(182,138,53,.18);
  overflow: hidden;
}

.appbrand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.appbrand-text{
  min-width: 0;
}

.appname{
  font-weight: 1000;
  font-size: 14px;
  letter-spacing: .2px;
}
.appsub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* User dropdown */
.user-dropdown{ position: relative; display: inline-block; }

.user-toggle{
  height: var(--tap);
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(182,138,53,.45);
  background:
    linear-gradient(180deg, rgba(182,138,53,.14) 0%, rgba(182,138,53,.08) 100%),
    #fff;
  box-shadow: var(--shadow-sm);

  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.user-toggle .userbox{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}

.user-toggle .uname{
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
  white-space: nowrap;
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
}
.user-toggle .udept{
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
}

.user-toggle .chevron{
  font-size: 12px;
  color: rgba(15,23,42,.75);
}

.dropdown-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  display:none;
  z-index: 99999;
}
.dropdown-menu.show{ display:block; }

.field-body .dropdown-menu,
.field-menu-page .dropdown-menu{
  min-width: 128px;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.dropdown-item{
  display:block;
  padding: 12px 12px;
  font-weight: 900;
  color: var(--text);
}
.dropdown-item:hover{ background: rgba(182,138,53,.10); }

.field-body .dropdown-item,
.field-menu-page .dropdown-item{
  padding: 10px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* Back button */
.btn-back{
  height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-md);
  background:#fff;
  border: 1px solid var(--border);
  font-weight: 1000;
}

/* FIELD topbar: keep right controls aligned and not squished */
.field-body .topbar-right,
.field-menu-page .topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Back button consistent sizing */
.field-body .btn-back,
.field-menu-page .btn-back{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;        /* pill */
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 900;
  white-space: nowrap;
}

/* User dropdown button: same pill height */
.field-body .user-toggle,
.field-menu-page .user-toggle{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.field-menu-page .lang-switch-btn{
  padding: 0 8px;
  gap: 5px;
  font-size: 12px;
}

.field-body .lang-switch-btn{
  height: 40px;
  padding: 0 8px;
  gap: 5px;
  font-size: 12px;
  border-radius: 999px;
}

.field-body .lang-globe,
.field-menu-page .lang-globe{
  width: 14px;
  height: 14px;
}

.field-body .lang-switch-btn .caret,
.field-menu-page .lang-switch-btn .caret{
  margin-inline-start: 0;
}


/* Mobile compact topbar */
@media (max-width: 600px){
  .user-toggle{
    width: var(--tap);
    padding: 0;
    justify-content:center;
  }
  .user-toggle .userbox{ display:none; }
  .user-toggle .chevron{ font-size: 15px; }
  .user-toggle .chevron::before{
    content: "";
    width: 22px;
    height: 22px;
    display: inline-block;

    background-image: url("https://img.icons8.com/ios-filled/50/administrator-male.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    margin-right: 0;
  }
  .user-toggle .chevron{ color: var(--text); }

  .btn-back{
    height: var(--tap);
    padding: 0 10px;
    font-size: 13px;
  }

  .field-menu-page .lang-switch-btn{
    padding: 0 6px;
    gap: 4px;
    font-size: 11px;
  }

  .field-body .lang-switch-btn{
    height: 34px;
    padding: 0 6px;
    gap: 4px;
    font-size: 11px;
  }

.field-body .lang-globe,
  .field-menu-page .lang-globe{
    width: 12px;
    height: 12px;
  }

.field-body .lang-btn-label,
  .field-menu-page .lang-btn-label{
    font-size: 11px;
  }
}

/* -------------------------
   6) Dashboard layout
   ------------------------- */
.container{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 18px 16px 28px;
}
.page-title{
  margin: 8px 0 14px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px;
  text-align:center;
  font-weight: 1000;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:auto -30% -60% -30%;
  height: 140px;
  background: radial-gradient(closest-side, rgba(182,138,53,.18), transparent);
  filter: blur(6px);
}
.card:hover{
  border-color: rgba(182,138,53,.35);
  box-shadow: var(--shadow-md);
}

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

/* -------------------------
   7) Field Menu (Layer grid)
   ------------------------- */
.section-title{
  margin: 18px 0 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

.layer-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.layer-tile{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.layer-tile:hover{
  border-color: rgba(182,138,53,.35);
  box-shadow: var(--shadow-md);
}
.layer-title{ font-weight: 1000; margin-bottom: 6px; }
.layer-meta{ font-size: 12px; color: var(--muted); }

.empty{
  background:#fff;
  border: 1px dashed rgba(15,23,42,.22);
  border-radius: var(--radius-xl);
  padding: 16px;
  color: var(--muted);
}

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

/* -------------------------
   8) Field App main layout (map/list)
   ------------------------- */
html, body{ height: 100%; }
body.field-body{
  background:#fff;
}

/* avoid page scroll on field map screen */
.field-body{ overflow: hidden; }

.field-main{
  position: relative;
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
  background:#fff;
}

.view{
  position:absolute;
  inset: 0;
  display:none;
}
.view.view-active{ display:block; }

/* ✅ Only for Field app pages, NOT Viewer */
body.field-body #map,
body.field-body .map{
  height: 100%;
  width: 100%;
}


/* -------------------------
   9) Bottom Tabs (MAP/LIST)
   ------------------------- */
.tabs{
  position: fixed;

  left: 10px;        /* ✅ add */
  right: 10px;       /* ✅ keep */

  bottom: calc(10px + env(safe-area-inset-bottom));
  height: var(--tabs-h);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  z-index: 9000;
  background: #ffffff;
  padding: 6px;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}



.tab{
  border-radius: 18px;
  border: 1px solid rgba(182,138,53,.22);
  background: rgba(182,138,53,.10);
  color: var(--ae-black-900);
  font-weight: 1000;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.tab:active{ transform: scale(.98); }

.tab-active{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color:#fff;
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadow-lg);
}



/* -------------------------
   10) Floating Map actions
   ------------------------- */
.map-actions{
  position: fixed;
  left: 12px;
  bottom: calc(var(--tabs-h) + 10px + 12px + env(safe-area-inset-bottom));
  display:flex;
  gap: 10px;
  z-index: 9001;
  pointer-events: auto;
}

/* Add / Cancel / Undo stack behavior (keep your JS) */
.addwrap{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  --stack-gap: 6px;
}
#btnAdd{
  position: relative;
  z-index: 3;
}
#btnAdd, #btnCancelAdd, #btnUndo{
  width: 122px;
  justify-content: center;
}
#btnCancelAdd, #btnUndo{
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
}
#btnCancelAdd{ z-index: 2; }
#btnUndo{ z-index: 1; }

.addwrap.is-saving #btnCancelAdd{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(calc(100% + var(--stack-gap)));
}
.addwrap.is-saving #btnUndo{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(calc(200% + (var(--stack-gap) * 2)));
}

/* -------------------------
   11) List View
   ------------------------- */
#viewList{ background:#fff; }

.list-header{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.search-wrap{
  position: relative;
  display:flex;
  align-items:center;
}
.search{
  width: 100%;
  border: 1px solid rgba(182,138,53,.30);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  padding-right: 40px;
  font-size: 14px;
  background:#fff;
}
.search:focus{
  border-color: rgba(40,108,255,.55);
  box-shadow: var(--focus);
  outline:none;
}

.clear-btn{
  position:absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background:#fff;
  display:grid;
  place-items:center;
  color: rgba(15,23,42,.65);
}
.clear-btn:hover{ background: rgba(182,138,53,.10); }

.hint{
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.list-count, #recordCount, .count{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.list{
  height: 100%;
  overflow:auto;
  background: var(--surface-2);
  padding: 12px 12px calc(var(--tabs-h) + 22px + env(safe-area-inset-bottom));
}

/* Only apply flex layout when LIST view is active */
#viewList.view-active{
  height: auto;              /* don't force 100vh */
  display: flex;
  flex-direction: column;
}

#viewList.view-active .list-header{
  flex: 0 0 auto;
}

#viewList.view-active #list{
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: calc(var(--tabs-h) + 20px + env(safe-area-inset-bottom));
}



/* compact list row */
.list-row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:#fff;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
}
.list-row:hover{ border-color: rgba(182,138,53,.30); }

.list-row-main{ flex:1; min-width:0; }
.list-row-title{
  font-weight: 1000;
  font-size: 14px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.list-row-sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.list-row-gps{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ae-black-900) 0%, var(--ae-black-950) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}
.list-row-gps:active{ transform: scale(.985); }

/* selected row */
.list-row.selected{
  outline: 4px solid rgba(22,163,74,.70);
  box-shadow: var(--shadow-md);
}

/* list loading pill */
.list-loading{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:#fff;
  font-weight: 800;
  color: var(--text);
}

.search-wrap{ position: relative; }

.search{
  position: relative;
  z-index: 1;
  padding-right: 48px; /* give room for the X */
}

.clear-btn{
  z-index: 2;          /* ✅ above input */
  pointer-events: auto; /* ✅ clickable */
}

.clear-btn{
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}




/* -------------------------
   12) Feature Window (Bottom sheet)
   ------------------------- */
.fw{
  position: fixed;
  left: 10px;
  right: 10px;
  top: calc(var(--topbar-h) + 10px);
  bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 999999;
  display:flex;
  flex-direction: column;
  overflow:hidden;
}

.fw-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(182,138,53,.14) 0%, rgba(182,138,53,.06) 100%),
    #fff;
}
.fw-title{ font-weight: 1000; font-size: 14px; }
.fw-sub{ margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }

.fw-x{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,53,.25);
  background:#fff;
  font-size: 22px;
  font-weight: 1000;
  box-shadow: var(--shadow-sm);
}
.fw-x:hover{ background: rgba(182,138,53,.10); }

.fw-body{ padding: 10px 12px; overflow:auto; flex: 1; background: #fff; }

.fw-form label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 6px;
  font-weight: 900;
}
.fw-form input, .fw-form select, .fw-form textarea{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.fw-form textarea{ min-height: 80px; resize: vertical; }

/* =========================
   THEMED ACTION BUTTONS (Abu Dhabi style)
   ========================= */

/* Make the 3 actions look like one system */
.fw-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid var(--border);
}

/* Base */
.fw-btn{
  height: 44px;
  border-radius: 14px;
  padding: 0 14px;
  border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  letter-spacing: .2px;

  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}

.fw-btn:active{ transform: translateY(1px); }

/* ✅ Primary (Save) = brand gold */
.fw-save{
  background: linear-gradient(
    180deg,
    #f3ead7 0%,     /* light sand */
    #e6d7b5 100%    /* soft gold */
  );
  color: #3f2d0c;  /* dark brand text */
  border: 1px solid rgba(146,114,42,.35);
  box-shadow: 0 8px 18px rgba(146,114,42,.22);
}

.fw-save:hover{ filter: brightness(.98); }

/* ✅ Secondary (Move) = official neutral ink */
/* MOVE — brand-neutral (classy & official) */
.fw-move{
  background: linear-gradient(
    180deg,
    #f7f3ea 0%,        /* light sand */
    #ede5d3 100%       /* warm beige */
  );
  color: #3f2d0c;     /* dark brand-brown text */
  border: 1px solid rgba(146,114,42,.35);
  box-shadow: 0 8px 18px rgba(146,114,42,.18);
}

.fw-move:hover{
  filter: brightness(1.02);
}

.fw-move:active{
  transform: translateY(1px);
}

/* ✅ Danger (Delete) = refined red, NOT pink */
.fw-del{
  background: #fff;
  color: var(--danger);
  border-color: rgba(180,35,24,.35);
  box-shadow: 0 8px 18px rgba(180,35,24,.10);
}
.fw-del:hover{
  background: rgba(180,35,24,.06);
}



/* narrow phones: actions stack */
@media (max-width: 380px){
  .fw-actions{ grid-template-columns: 1fr; }
}

/* -------------------------
   13) Leaflet / Controls polish
   ------------------------- */
.leaflet-container{ font: inherit; }

/* =========================
   Leaflet Zoom (+ / -) colors
   ========================= */

/* Common zoom button styling */
.leaflet-control-zoom a {
  background: #ffffff !important;
  width: 30px;
  height: 30px;
  line-height: 30px;          /* centers + / - */
  font-size: 18px;
  font-weight: 600;

  border: 0 !important;
  text-decoration: none !important;
}

/* ➕ PLUS button */
.leaflet-control-zoom a:first-child {
  color: #9E7C2F !important;  /* ⬅️ your requested color */
}

/* ➖ MINUS button */
.leaflet-control-zoom a:last-child {
  color: #9E7C2F !important;  /* you can change this */
}

/* Divider */
.leaflet-control-zoom a + a {
  border-top: 1px solid #f0f2f5;
}

/* Hover states */
.leaflet-control-zoom a:hover {
  background: #f9fafb !important;
}

.leaflet-control-zoom a:first-child:hover {
  color: #7A5F1F !important;  /* darker gold */
}

.leaflet-control-zoom a:last-child:hover {
  color: #9E7C2F !important;
}

/* Active (click) */
.leaflet-control-zoom a:active {
  background: #f3f4f6 !important;
}


.leaflet-bar{
  border-radius: 12px !important;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.16) !important;
  box-shadow: var(--shadow-sm) !important;
}

.leaflet-bar a{
  background:#fff !important;
  color: var(--ae-black-900) !important;
}

/* FORCE solid hover for zoom buttons */
.leaflet-control-zoom a:hover{
  background: #f3f4f6 !important;   /* solid */
}


.leaflet-control-attribution{
  background: rgba(255,255,255,.78) !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

/* -------------------------
   14) Mini Edit Toolbar (your custom Leaflet bar)
   ------------------------- */
.mini-editbar{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.16);
  box-shadow: var(--shadow-sm);
  background: #fff;
}

.mini-editbar .mini-btn{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color: var(--ae-black-900);
  font-weight: 1000;
  font-size: 16px;
  background:#fff;
  border-bottom: 1px solid rgba(15,23,42,.10);
  user-select:none;
}
.mini-editbar .mini-btn:last-child{ border-bottom: 0; }
.mini-editbar .mini-btn:hover{ background: rgba(182,138,53,.10); }
.mini-editbar .mini-btn:active{ transform: scale(.98); }

.mini-editbar .mini-finish{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color:#fff;
}
.mini-editbar .mini-finish:hover{ filter: brightness(.98); }

.mini-editbar .mini-btn.is-disabled{
  opacity: .45;
  pointer-events:none;
}

/* Erase / Cancel row */
.mini-erase-row{ display:none; align-items: stretch; }
.leaflet-control.erase-on .mini-erase-row{ display:flex; }

.mini-erase-row .mini-erase{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
}
.mini-cancel{
  display:none !important;
  padding: 0 12px;
  height: 34px;
  line-height: 34px;
  border-radius: 10px;
  background: rgba(15,23,42,.70);
  color:#fff;
  font-weight: 900;
}
.leaflet-control.erase-on .mini-cancel{
  display:inline-block !important;
}
.erase-mode{ cursor: crosshair; }



/* =========================
  15) Measurement toolbar (BIG container + SMALL icons)
   ========================= */

.leaflet-control .leaflet-bar.measure-bar{
  border: 1px solid #e4e7ec !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(170, 169, 77, 0.16) !important;
  overflow: hidden !important;
}

/* Bigger buttons (click area) */
.leaflet-control .leaflet-bar.measure-bar a.mini-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;     /* ✅ BIGGER */
  height: 42px !important;    /* ✅ BIGGER */

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;

  line-height: 0 !important;
  font-size: 0 !important;
}

/* Divider only inside measure toolbar */
.leaflet-control .leaflet-bar.measure-bar a.mini-btn + a.mini-btn{
  border-top: 1px solid #f0f2f5 !important;
}

/* Hover / Active */
/* FORCE solid hover for measure buttons */
.leaflet-control .leaflet-bar.measure-bar a.mini-btn:hover{
  background: #f3f4f6 !important;   /* solid, not transparent */
}

.leaflet-control .leaflet-bar.measure-bar a.mini-btn:active{ background:#f3f4f6 !important; }

/* ✅ FORCE icons to be visually small (PNG padding-safe) */
.leaflet-control .leaflet-bar.measure-bar a.mini-btn img,
.leaflet-control .leaflet-bar.measure-bar a.mini-btn .tool-icon{
  width: 14px !important;
  height: 14px !important;

  display: block !important;
  margin: 0 !important;

  object-fit: contain !important;
  transform: scale(0.25) !important;   /* 🔥 makes PNG content smaller */
  transform-origin: center !important;

  pointer-events: none !important;
}






/* -------------------------
   16) Selection dot (map highlight)
   ------------------------- */
.sel-dot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tech-blue-500);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}

/* -------------------------
   17) Basemap + Bookmark switchers (Leaflet-like)
   ------------------------- */
.basemap-switcher,
.bookmark-switcher{
  background: transparent;
  border: 0;
}

/* buttons */
.basemap-switcher .bm-btn,
.bookmark-switcher .bm-btn{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.16);
  background:#fff;
  font-size: 16px;
  font-weight: 1000;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
  padding:0;
  line-height: 1;
}

.basemap-switcher .bm-btn:hover,
.bookmark-switcher .bm-btn:hover{
  background: rgba(182,138,53,.10);
}

/* panels */
.basemap-switcher .bm-panel,
.bookmark-switcher .bm-panel{
  margin-top: 6px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 14px;
  padding: 8px;
  width: 200px;
  box-shadow: var(--shadow-md);
}

/* Basemap rows */
.basemap-switcher .bm-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  user-select:none;
}

/* Hover only */
.basemap-switcher .bm-item:hover{
  background: rgba(182,138,53,.10);
}

/* Radio is the ONLY selected indicator */
.basemap-switcher .bm-item input[type="radio"]{
  width: auto;
  margin: 0;
  accent-color: var(--brand);
}





/* -------------------------
   18) Responsive tweaks (tablets)
   ------------------------- */
@media (min-width: 768px) {
  .topbar{ padding: 10px 18px; }
  .container{ padding: 22px 18px 34px; }
  .tabs{ left: 18px; right: 18px; }
  .map-actions{ left: 18px; }
  .fw{ left: 18px; right: 18px; }
}


/* FULL WIDTH on field pages (mobile + desktop) */
body.field-body .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* -------------------------
   19) Fixes for common “double body tag” mistakes
   ------------------------- */
body > body{ display:none; } /* if accidentally nested body tags exist, hide the inner one */

/* -------------------------
   20) Reduce motion (accessibility)
   ------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}


/* =========================
   GPS PIN ICON (SVG + CSS COLOR)
   ========================= */

.list-row-gps{
  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 1px solid #e5e7eb;

  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.list-row-gps{
  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 1px solid #e5e7eb;

  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* PNG icon (NO recoloring) */
.icon-pin{
  width: 18px;
  height: 18px;
  display: inline-block;

  background-image: url("/assets/icons/pin.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Optional hover feedback (button only) */
.list-row-gps:hover{
  background: #f3f4f6;
}

.list-row-gps:active{
  transform: scale(0.97);
}

.photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.photos-grid .ph{position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.photos-grid img{width:100%;height:90px;object-fit:cover;display:block}
.photos-grid .ph-item{
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.photos-grid .ph-item img{
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}

.photos-grid .ph-del{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.15);
  background: #fff;
  font-weight: 1000;
  cursor: pointer;
  z-index: 5;              /* ✅ important */
}
.photos-grid .ph-del:hover{ background: rgba(182,138,53,.10); }

.photos-grid .ph-item img { pointer-events: none; }
.photos-grid .ph-del { pointer-events: auto; }



/* =========================================
     search cad name
============================================= */
.search-panel{
  margin-top: 8px;
  padding: 10px;
  width: 260px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 8px;
}

.search-panel.hidden{ display:none; }

.search-select, .search-input{
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.16);
  padding: 0 10px;
  outline: none;
}

.search-actions{
  display:flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Theme-styled Google Maps pin action for found plots */
#btnPlotGoogle{
  min-width: 44px;
  height: 40px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,53,.34);
  background: #fff;
  color: var(--brand-deep);
  box-shadow:
    0 8px 18px rgba(146,114,42,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
  font-size: 18px;
  line-height: 1;
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

#btnPlotGoogle:hover{
  filter: brightness(.99);
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(146,114,42,.18),
    inset 0 1px 0 rgba(255,255,255,.82);
}

#btnPlotGoogle:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(146,114,42,.16),
    inset 0 1px 0 rgba(255,255,255,.7);
}

#btnPlotGoogle:focus-visible{
  box-shadow:
    0 0 0 4px rgba(182,138,53,.18),
    0 12px 26px rgba(146,114,42,.20);
}

.search-msg{
  font-size: 12px;
  color: var(--muted);
}

.hidden { display: none !important; }

#searchPanel.hidden { display: none !important; }


/* image inside form */
.img-lightbox.hidden{ display:none; }

.img-lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.img-close{
  position:absolute;
  top:14px; right:14px;
  font-size:28px;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
  z-index: 2147483647;
}


.photos-grid img { pointer-events: auto; cursor: zoom-in; }
.ph-item { cursor: zoom-in; }
.ph-del { cursor: pointer; }

.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
}

.img-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  z-index: 2;           /* 👈 image layer */
}

.img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 42px;
  background: rgba(0,0,0,.4);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 10px 16px;
  z-index: 3;           /* 👈 ABOVE image */
}

.img-prev { left: 20px; }
.img-next { right: 20px; }

.img-nav:disabled {
  opacity: 0.3;
  cursor: default;
}


/* =========================================================
   MOBILE ONLY: map actions become 2-row swap (Add+Search) <-> (Save+Cancel+Undo)
   Uses your existing .addwrap.is-saving toggle
   ========================================================= */
@media (max-width: 600px){

  /* let the action area span the screen width */
  .map-actions{
    left: 12px;
    right: 12px;
    width: auto;
  }

  /* make the addwrap take full row width */
  .addwrap{
    width: 100%;
    display: flex;
    flex-direction: column; /* two rows */
    gap: 10px;
    white-space: normal;
  }

  /* reset your desktop "behind each other" absolute layout */
  #btnCancelAdd,
  #btnUndo{
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* ---- ROW 1 (idle): [Add] [Search] ---- */
    /* keep [Add][Search] side-by-side */
  .addwrap:not(.is-saving){
    flex-direction: row;
    align-items: stretch;
  }
  .addwrap:not(.is-saving) #btnAdd,
  .addwrap:not(.is-saving) #btnSearchToggle{
    flex: 1 1 0;
    width: 50%;
  }
  .addwrap:not(.is-saving) #btnCancelAdd,
  .addwrap:not(.is-saving) #btnUndo{
    display: none !important;
  }

  /* ✅ IMPORTANT: make addwrap the anchor for the popup */
  .addwrap{
    position: relative;
    overflow: visible;
  }

  /* ✅ Search panel opens ABOVE the buttons (overlay) */
  #searchPanel{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 10px);              /* above row */
    z-index: 9999;
    width: min(300px, calc(100vw - 32px)); /* ⬅️ smaller */
    max-width: 300px;
  }

  /* if your panel has .hidden class, keep it working */
  #searchPanel.hidden{ display:none !important; }
  /* ---- ROW 2 (saving): [Save] [Cancel] [Undo] ---- */
  .addwrap.is-saving{
    display: flex;
    flex-direction: row;   /* one row for actions */
    align-items: stretch;
  }

  /* hide search while saving (state 2) */
  .addwrap.is-saving #btnSearchToggle{
    display: none !important;
  }

  /* make buttons fill width nicely */
  .addwrap.is-saving #btnAdd,        /* becomes ✓ Save via your JS */
  .addwrap.is-saving #btnCancelAdd,
  .addwrap.is-saving #btnUndo{
    flex: 1 1 0;
    width: auto;
  }
  
}

.btn-search{
  gap: 8px;
}

/* Icons8 search icon */
.icon-search{
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;

  background-image: url("https://img.icons8.com/?size=100&id=131&format=png&color=737373");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* hover polish */
.btn-search:hover .icon-search{
  filter: brightness(0.85);
}


@media (max-width: 600px){
  .layer-tile-icon{
    width: 78px;
    min-height: 66px;
    border-radius: 16px;
  }
}


/**************************************************/

#layerLegend .fw-legend{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color: var(--muted);
}

#layerLegend .lg-title{
  font-weight:1000;
  color: var(--text);
}

#layerLegend .lg-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  box-shadow: var(--shadow-sm);
}

#layerLegend .dot{
  width:10px;height:10px;border-radius:50%;
}

#layerLegend b{
  font-weight:1000;
  color: var(--text);
}


/***************************************/
.legend-ctl { position: relative; }

.legend-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,53,.35);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  font-weight: 1000;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.legend-panel{
  position: absolute;
  top: 48px;
  right: 0;
  width: 220px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
}

.legend-panel.hidden{ display:none; }

.legend-title{
  font-weight: 1000;
  margin-bottom: 8px;
  text-align: right;
}

.legend-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
  direction: rtl;
}

.legend-row:last-child{ border-bottom: 0; }
.legend-total{ font-weight: 1000; }
.legend-empty{ color: var(--muted); font-size: 12px; direction:ltr; }

.legend-sample{
  display:flex;
  justify-content: space-between;
  gap:10px;
  padding: 0 0 8px;
  font-size: 11px;
  color: rgba(15,23,42,.65);
  direction:ltr;
}
.legend-sample em{ font-style: normal; opacity: .85; }


/***********************************/
/* placeholder look */
select:has(option[value=""]:checked){
  color: rgba(15,23,42,.45);
  font-weight: 700;
}

/* normal selection */
select{
  color: var(--text);
}


/*******************************************/
/* =========================================================
   Hazmieh Filters (SCOPED)
   - Panel on RIGHT
   - FAB on RIGHT (opposite zoom if zoom is LEFT)
   - Panel is CLOSED by default (so map stays visible)
   - Open only when .is-open is added
   ========================================================= */
/* keep viewMap full screen (matches .view) */
#viewMap{
  position: absolute;
  inset: 0;
}

/* -------------------------
   Panel: floating card
   CLOSED by default
   ------------------------- */
#filterPanel.hz-filter{
  position: absolute;
  top: 70px;
  left: 12px;
  right: auto;

  width: min(360px, 92vw);
  max-height: 70vh;
  z-index: 1300;

  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);

  display: flex;
  flex-direction: column;

  /* ✅ CLOSED state (important) */
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;

  transition: transform .18s ease, opacity .18s ease;
}

/* ✅ OPEN only when class exists */
#filterPanel.hz-filter.is-open{
   transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* -------------------------
   Header
   ------------------------- */
#filterPanel .hz-filter__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}

#filterPanel .hz-filter__title{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
}

#filterPanel .hz-filter__sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(15,23,42,.65);
}

#filterPanel .hz-filter__x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  cursor: pointer;
}
#filterPanel .hz-filter__x:hover{
  background: rgba(182,138,53,.10);
}

/* -------------------------
   Body
   ------------------------- */
#filterPanel .hz-filter__body{
  padding: 12px;
  overflow: auto;
}

#filterPanel .hz-filter__logicLabel{
  font-size: 12px;
  color: rgba(15,23,42,.7);
  margin-bottom: 6px;
}

#filterPanel .hz-filter__seg{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 14px;
  background: rgba(15,23,42,.03);
}

#filterPanel .hz-filter__segBtn{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}

#filterPanel .hz-filter__segBtn.is-active{
  background: rgba(182,138,53,.14);
  border-color: rgba(182,138,53,.35);
}

/* Builder rows */
#filterPanel .hz-filter__builder{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

#filterPanel .hz-filter__row{
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: 14px;
  padding: 10px;
  background: rgba(182,138,53,.06);
}

#filterPanel .hz-filter__rowTop{
  display: flex;
  gap: 8px;
  align-items: center;
}

#filterPanel .hz-filter__fieldSel{
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 12px;
  background: #fff;
  outline: none;
}

#filterPanel .hz-filter__val{
  margin-top: 8px;
}

#filterPanel .hz-filter__val select,
#filterPanel .hz-filter__val input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 12px;
  background: #fff;
  outline: none;
}

#filterPanel .hz-filter__row--date{
  border-style: solid;
  border-color: rgba(182,138,53,.28);
  background: #fff;
  padding: 12px;
}

#filterPanel .hz-filter__row--date .hz-filter__rowTop{
  align-items: stretch;
}

#filterPanel .hz-filter__row--date .hz-filter__fieldSel{
  min-height: 42px;
  background: #fff;
  border-color: rgba(182,138,53,.2);
}

#filterPanel .hz-filter__row--date .hz-filter__rm{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
}

#filterPanel .hz-filter__row--date .hz-filter__val{
  margin-top: 10px;
}

#filterPanel .hz-filter__row--date .hz-datebox{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas: "date op";
  gap: 10px;
  align-items: stretch;
}

#filterPanel .hz-filter__row--date .hz-datebox__d{
  grid-area: date;
  min-height: 42px;
  background: #fff;
  border-color: rgba(182,138,53,.28);
}

#filterPanel .hz-filter__row--date .hz-datebox__op{
  grid-area: op;
  min-height: 42px;
  background: #fff;
  border-color: rgba(182,138,53,.28);
  text-align: center;
}

#filterPanel .hz-filter__row--date .hz-datebox.is-between{
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas:
    "date op"
    "date2 op";
}

#filterPanel .hz-filter__row--date .hz-datebox.is-between .hz-datebox__d:nth-of-type(2){
  grid-area: date2;
}

#filterPanel .hz-filter__rm{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  cursor: pointer;
}
#filterPanel .hz-filter__rm:hover{
  background: rgba(182,138,53,.10);
}

/* -------------------------
   Footer
   ------------------------- */
#filterPanel .hz-filter__foot{
  padding: 12px;
  border-top: 1px solid rgba(15,23,42,.10);
  display: flex;
  gap: 10px;
}

#filterPanel .hz-filter__btn{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  cursor: pointer;
  font-weight: 800;
}

#filterPanel .hz-filter__btn--ghost{
  background: #fff;
}

#filterPanel .hz-filter__btn--primary{
  flex: 1;
  background: rgba(182,138,53,.20);
  border-color: rgba(182,138,53,.45);
}

/* Add-row button (inside body) */
#btnAddFilterRow.hz-filter__btn{
  margin-top: 10px;
  width: 100%;
}

/* hide AND/OR for first filter */
#filterFields .hz-filter__block:first-child .hz-filter__join{
  display:none;
}

@media (max-width: 520px){
  #filterPanel .hz-filter__row--date .hz-datebox,
  #filterPanel .hz-filter__row--date .hz-datebox.is-between{
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "op";
  }

  #filterPanel .hz-filter__row--date .hz-datebox.is-between{
    grid-template-areas:
      "date"
      "date2"
      "op";
  }
}


/* Hide AND/OR for first filter only */
.hz-filter__block:first-child .hz-filter__join{
  display: none;
}


/* -------------------------
   FAB button (LEFT)
   ------------------------- */
.hz-filterFab{
  position: absolute;
  left: 12px;     /* بدل right */
  right: auto;    /* مهم */
  top: 10px;
  z-index: 1400;

  width: 36px;
  height: 36px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  cursor: pointer;
}


/* Icons8 filter icon */
.hz-filterFab::before{
  content:"";
  width: 18px;
  height: 18px;

  background-image: url("https://img.icons8.com/?size=100&id=BrLscfXOfCKG&format=png&color=b68a35");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.hz-filter__join{
  display:flex;
  gap:8px;
  justify-content:center;
  margin: 8px 0;
}

.hz-joinBtn{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.hz-joinBtn.is-active{
  background: rgba(182,138,53,.14);
  border-color: rgba(182,138,53,.35);
}

/* hide join for first block only */
.hz-filter__block:first-child .hz-filter__join{ display:none; }

.hz-filter__label{
  flex:1;
  font-weight:700;
  font-size:14px;
}

.hz-filter__block:first-child .hz-filter__join{
  display:none;
}

.hz-filter__join{
  display:flex;
  gap:6px;
  margin: 6px 0 8px;
}
.hz-joinBtn{
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.hz-joinBtn.is-active{
  background: rgba(182,138,53,.14);
  border-color: rgba(182,138,53,.35);
}
/* hide join for first block */
#filterFields .hz-filter__block:first-child .hz-filter__join{ display:none; }



/* -------------------------
   Mobile
   ------------------------- */
@media (max-width: 520px){
  #filterPanel.hz-filter{
    top: 60px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 75vh;

    /* closed state on mobile */
    transform: translateY(-10px);
  }

  /* open state on mobile */
  #filterPanel.hz-filter.is-open{
    transform: translateY(0);
  }
   
  .hz-filterFab{
    width: 34px;
    height: 34px;
  }
  .hz-filterFab::before{
    width: 16px;
    height: 16px;
  }
}

/* if list view is active, never show filter ui */
#viewList.view-active #btnFilterOpen,
#viewList.view-active #filterPanel{
  display:none !important;
}


/* ---------------------------------
Btn greyed out Add Feature when filtering
--------------------------------------*/
/* Add Feature disabled state */
.btn-disabled,
#btnAdd.is-disabled{
  background: #e5e7eb !important;     /* soft gray */
  color: #9ca3af !important;
  border-color: #d1d5db !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;    /* 🔒 prevents clicking */
  filter: grayscale(1);
}



/*****************************************************/

/* ===============================
   GRID — 2 COLUMNS ALWAYS
   =============================== */
.layer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* desktop + mobile */
  gap: 24px;
  margin: 16px 0 32px;
}

/* Tablet */
@media (max-width: 1024px){
  .layer-grid{
    gap: 20px;
  }
}

/* ===============================
   MOBILE — FORCE GAP
   =============================== */
@media (max-width: 640px){
  .layer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px !important;  /* ✅ horizontal gap */
    row-gap: 16px !important;     /* vertical gap */
  }

  .lib-tile{
    width: auto !important;       /* prevent stretch */
  }
}


/* Very small phones (still 2 columns, usable) */
@media (max-width: 360px){
  .layer-grid{
    gap: 10px;
  }

  .lib-cover{
    height: 100px;
  }

  .lib-title{
    font-size: 12px;
  }
}



/* Card */
.lib-tile{
  --accent: #0ea5e9; /* default accent */
  display:flex !important;
  flex-direction: column !important;
  text-decoration:none !important;
  border-radius: 16px !important;
  overflow:hidden !important;
  background:#fff !important;

  /* ✅ the “colored border card” */
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.10) !important;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

.lib-tile:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.14) !important;
  border-color: var(--accent) !important;
}

/* Cover */
.lib-cover{
  position: relative !important;
  height: 200px !important;
  background:#e5e7eb !important;
}

.lib-cover img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
}

/* subtle overlay so badge readable */
.lib-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.30) 100%) !important;
}

/* Badge */
.lib-geom{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .3px !important;
  color:#fff !important;
  background: rgba(15,23,42,.55) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 2 !important;
}

/* Body */
.lib-body{
  padding: 12px 14px 14px !important;
}

.lib-title{
  color:#0f172a !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* ===============================
   ACCENT COLORS PER LAYER
   =============================== */
.lib-tile[data-key="plots"]{ --accent:#22c55e !important; }
.lib-tile[data-key="cadaster_lines"]{ --accent:#0ea5e9 !important; }
.lib-tile[data-key="hydrants"]{ --accent:#ef4444 !important; }
.lib-tile[data-key="billboards"]{ --accent:#f97316 !important; }
.lib-tile[data-key="finance"]{ --accent:#6366f1 !important; }

/* fallback if some keys differ */
.lib-tile[data-key*="cadaster"]{ --accent:#0ea5e9 !important; }
.lib-tile[data-key*="billboard"]{ --accent:#f97316 !important; }


/* ESRI-like multi dropdown */
#fw .fw-multi-dd{
  position: relative;
  width: 100%;
  font-family: "Tajawal", sans-serif;
}

/* clickable head */
#fw .fw-multi-head{
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,53,.25);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* chips shown inside head */
#fw .fw-multi-chips-inline{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
  justify-content: flex-end;   /* ✅ push chips to RIGHT */
}

/* arrow stays LEFT for RTL look */
#fw .fw-multi-arrow{
  font-weight: 900;
  opacity: .8;
  margin-inline-start: auto;
}

/* chip */
#fw .fw-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(182,138,53,.35);
  background: rgba(182,138,53,.15);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}
#fw .fw-chip .x{
  font-style: normal;
  opacity: .75;
  cursor: pointer;
}

/* dropdown panel (opens to the RIGHT) */
#fw .fw-multi-panel{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;                   /* ✅ anchor to RIGHT */
  left: auto;
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid rgba(182,138,53,.25);
  border-radius: 16px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.12));
  padding: 10px;
  z-index: 9999;
}

#fw .fw-multi-search{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(182,138,53,.18);
  margin-bottom: 10px;
  font-family: "Tajawal", sans-serif;
  font-size: 16px;
}

#fw .fw-multi-list{
  max-height: 240px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

#fw .fw-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: right;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,53,.18);
  background: #fff;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}

#fw .fw-opt.on{
  background: rgba(182,138,53,.18);
  border-color: rgba(182,138,53,.40);
}

/* rotate arrow when open */
#fw .fw-multi-dd.open .fw-multi-arrow{
  transform: rotate(180deg);
}


#fw input[type="time"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,53,.25);
  font-family: "Tajawal", sans-serif;
  font-size: 16px;
  background: #fff;
}

/* ==========================
   Landing V2 (top modules + bottom snapshot)
   ========================== */
.landing-v2{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px;
}

.welcome-panel{
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 22px;
  padding: 28px 28px 24px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(circle at top right, rgba(182,138,53,.12), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 12px 34px rgba(2,6,23,.06);
}

.welcome-logo{
  position: relative;
  width: 100%;
  min-height: 260px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(182,138,53,.18), transparent 38%),
    linear-gradient(180deg, rgba(182,138,53,.12) 0%, rgba(182,138,53,.04) 100%);
  border: 1px solid rgba(182,138,53,.20);
  overflow: hidden;
}

.welcome-logo img{
  width: 72%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

.welcome-copy{
  min-width: 0;
  max-width: none;
  padding-left: 0;
}

.welcome-eyebrow{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--brand-strong);
  margin-bottom: 6px;
}

.welcome-title{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 1000;
  color: var(--ink);
  max-width: 560px;
}

.welcome-text{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(15,23,42,.78);
  max-width: 700px;
}

.welcome-points{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.welcome-point{
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(182,138,53,.18);
  background: linear-gradient(180deg, rgba(182,138,53,.10) 0%, rgba(182,138,53,.04) 100%);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 900;
  color: rgba(15,23,42,.82);
}

.page-title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 950;
  text-align: center;
}

.module-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.module-card{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  text-decoration:none;
  color: #0f172a;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}

.module-card:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 16px 45px rgba(2,6,23,.10);
}

.module-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background: radial-gradient(circle at 12% 12%, rgba(182,138,53,.7), transparent 55%);
  pointer-events:none;
}

.mc-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(182,138,53,.12);
  border: 1px solid rgba(182,138,53,.22);
  font-size: 22px;
  flex: 0 0 auto;
}

.mc-title{ font-weight: 950; font-size: 15px; }
.mc-sub{ font-size: 12.5px; color: rgba(15,23,42,.68); margin-top: 2px; line-height: 1.25; }
.mc-go{ margin-left:auto; font-size: 18px; opacity: .5; }

.snapshot{ margin-top: 10px; }

.insights-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  overflow: hidden;
}

.insights-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.insights-title{ font-weight: 950; }
.insights-sub{ font-size: 12px; color: rgba(15,23,42,.65); margin-top: 2px; }

.ins-tabs{
  display:flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #f8fafc;
  overflow:auto;
}

.ins-tab{
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  white-space:nowrap;
}

.ins-tab.is-active{
  border-color: rgba(182,138,53,.35);
  background: rgba(182,138,53,.12);
}

/* Assets tabs: wrap into multiple lines instead of horizontal scroll */
#assetTabs{
  overflow: visible;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 8px;
}

#assetTabs .ins-tab{
  flex: 0 0 auto;
}

.ins-panel{ display:none; padding: 12px 14px 14px; }
.ins-panel.is-active{ display:block; }

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 16px;
}

.kpi{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 10px;
  background: #fff;
}

.kpi-k{ font-size: 12px; color: rgba(15,23,42,.65); font-weight: 800; }
.kpi-v{ font-size: 22px; font-weight: 950; margin-top: 4px; }

.mini-list{
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 12px;
}

.mini-title{ font-weight: 950; font-size: 12px; margin-bottom: 8px; color: rgba(15,23,42,.8); }
.mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #fff;
}
.mini-val{ font-weight: 950; }

@media (max-width: 980px){
  .welcome-panel{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px 18px;
  }
  .welcome-logo{
    min-height: 140px;
    width: 100%;
    max-width: 220px;
    margin: 0 auto 14px;
  }
  .welcome-copy{
    max-width: none;
    padding-left: 0;
  }
  .welcome-points{
    grid-template-columns: 1fr;
  }
  .welcome-title{
    max-width: none;
    font-size: 24px;
  }
  .welcome-text{
    max-width: none;
  }
  .welcome-text-mobile-hide{
    display: none !important;
  }
  .module-row{ grid-template-columns: 1fr; }
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-title{ text-align:center; }
}



/* ==========================
   symbology for layers 
   ========================== */
.vz-menu-symbology-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.vz-symbology-select{
  width:100%;
  padding:6px 8px;
  border-radius:8px;
}


/* ==========================
   legend for layers 
   ========================== */

.vz-style-legend{
  margin-top: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  max-height: 220px;       /* limit height */
  overflow-y: auto;        /* enable scroll */
  padding: 6px;
}

.vz-legend-img{
  max-width: 100%;
  height: auto;
  display: block;
}


.vz-style-legend::-webkit-scrollbar{
  width:6px;
}
.vz-style-legend::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:4px;
}

/*///////////////////////////////////////////////////////*/

/* 1) مهم: لا تقصّ dropdowns */
.leaflet-top,
.leaflet-bottom,
.leaflet-control{
  overflow: visible !important;
}

/* 2) wrapper */
.leaflet-control.basemap-switcher,
.leaflet-control.bookmark-switcher{
  position: relative !important;
}

/* 3) الزر فوق */
.basemap-switcher .bm-btn,
.bookmark-switcher .bm-btn{
  position: relative;
  z-index: 3;
}

/* 4) اللوحة */
.basemap-switcher .bm-panel,
.bookmark-switcher .bm-panel{
  position: absolute !important;
  top: 0 !important;                 /* بمحاذاة الزر */
  margin-top: 0 !important;
  z-index: 2;                        /* خلف الزر فقط، بس فوق الخريطة */
  max-width: min(240px, 80vw);
}

/* ===========================
   ✅ فتح اللوحة للداخل حسب مكان الكنترول
   =========================== */

/* إذا الكنترول على اليمين → افتح لليسار (للداخل) */
.leaflet-right .basemap-switcher .bm-panel,
.leaflet-right .bookmark-switcher .bm-panel{
  right: calc(100% + 10px) !important;
  left: auto !important;
}

/* إذا الكنترول على اليسار → افتح لليمين (للداخل) */
.leaflet-left .basemap-switcher .bm-panel,
.leaflet-left .bookmark-switcher .bm-panel{
  left: calc(100% + 10px) !important;
  right: auto !important;
}

/* =========================
   FIX: Leaflet custom controls hover transparency
   (basemap / bookmark / mylocation)
   ========================= */

/* خلي الخلفية دايمًا صلبة للزر */
.leaflet-control.basemap-switcher .bm-btn,
.leaflet-control.bookmark-switcher .bm-btn,
.leaflet-control.bookmark-switcher.myloc-control .bm-btn{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  opacity: 1 !important;
}

/* Hover = لون صلب (مش شفاف) */
.leaflet-control.basemap-switcher .bm-btn:hover,
.leaflet-control.bookmark-switcher .bm-btn:hover,
.leaflet-control.bookmark-switcher.myloc-control .bm-btn:hover{
  background: #f3f4f6 !important;  /* solid */
  opacity: 1 !important;
}

/* Active */
.leaflet-control.basemap-switcher .bm-btn:active,
.leaflet-control.bookmark-switcher .bm-btn:active,
.leaflet-control.bookmark-switcher.myloc-control .bm-btn:active{
  background: #eaeef3 !important;  /* solid */
}



/**********************************************************/
/***********************BookMark**************************/
/*********************************************************/
/* =========================
   BOOKMARKS (Match screenshot + Theme)
   ========================= */

/* Theme tokens (fallbacks) */
:root{
  --bm-accent: var(--ae-gold-500, #7c3aed);   /* accent from your theme */
  --bm-accent-weak: rgba(124,58,237,.14);
  --bm-text: var(--ae-black-900, #111827);
  --bm-muted: rgba(17,24,39,.55);
  --bm-border: rgba(17,24,39,.12);
  --bm-border-2: rgba(17,24,39,.08);
  --bm-bg: #fff;
}

/* Panel shell */
.bookmark-switcher .bm-panel{
  width: 500px;
  background: var(--bm-bg);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--bm-border-2);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.bookmark-switcher .bm-head{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 12px 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  margin-bottom: 12px;
}

/* Title */
.bookmark-switcher .bm-title{
  flex: 1;                  /* take full width */
  font-weight: 900;
  font-size: 18px;
  color: var(--bm-text, #111827);
  text-align: center;

  white-space: nowrap;
  overflow: visible;        /* مهم */
  text-overflow: clip;      /* مهم */
  padding: 0 10px;
}



/* Close button */
.bookmark-switcher .bm-x{
  position: absolute;
  left: 11px;
  top: 6px;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid var(--bm-border);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bookmark-switcher .bm-x:hover{
  background: rgba(0,0,0,.04);
}

/* Add row (button right, input left) */
.bookmark-switcher .bm-addrow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
  direction: rtl;
  box-sizing: border-box;
}

/* Add button */
.bookmark-switcher .bm-addbtn{
  height: 44px;
  min-width: 88px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 14px;
  border: 2px solid var(--bm-accent-weak);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  color: var(--bm-text);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  white-space: nowrap;
  box-sizing: border-box;
}
.bookmark-switcher .bm-addbtn:hover{
  background: rgba(0,0,0,.02);
}

/* Plus icon */
.bookmark-switcher .bm-plus{
  font-size: 18px;
  font-weight: 900;
  color: var(--bm-accent);
  line-height: 1;
}

/* Input */
.bookmark-switcher .bm-input{
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 2px solid rgba(17,24,39,.12);
  outline: none;
  font-size: 14px;
  background: #fff;
  width: 100%;
}
.bookmark-switcher .bm-input::placeholder{
  color: rgba(17,24,39,.45);
  font-size: 13px;
}

.bookmark-switcher .bm-addtext{
  white-space: nowrap;
}
.bookmark-switcher .bm-input:focus{
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bm-accent) 18%, transparent);
}

/* List box (like screenshot empty box) */
.bookmark-switcher .bm-list{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  max-height: 260px;
  overflow: auto;
}

/* Empty state */
.bookmark-switcher .bm-empty{
  text-align: center;
  color: var(--bm-muted);
  font-weight: 700;
  padding: 16px 10px;
  border-radius: 12px;
  background: rgba(17,24,39,.02);
  border: 1px dashed rgba(17,24,39,.12);
}

/* Rows (when you have items) */
.bookmark-switcher .bm-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08);
  background: #fff;
  margin-bottom: 10px;
}
.bookmark-switcher .bm-row:last-child{ margin-bottom: 0; }

.bookmark-switcher .bm-del{
  width: 44px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmark-switcher .bm-del:hover{
  background: color-mix(in srgb, var(--bm-accent) 6%, #fff);
}

.bookmark-switcher .bm-name{
  flex: 1;
  min-width: 0;
  text-align: right;
  font-weight: 800;
  font-size: 15px;
  color: var(--bm-text);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.45;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 520px){
  .bookmark-switcher .bm-panel{ width: min(92vw, 380px); }
}


/** upload photo **/
.fw-doc { margin: 6px 0; }
.fw-doc-row { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.fw-doc-info { min-width: 220px; }
.fw-doc-title { font-weight: 600; }
.fw-doc-link { display:inline-block; margin-top:4px; }
.fw-doc-sub { opacity:.7; font-size:12px; margin-top:2px; }
.fw-doc-actions { display:flex; gap:8px; align-items:center; }
.fw-doc-input { max-width: 260px; }
.fw-doc-clear { padding:6px 10px; }

.sel-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#f03a1a;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}


/* The card controls the height. The chart must NOT exceed it. */
.chart-card{
  height: 320px;          /* fixed height that fits your page */
  padding: 12px;
  overflow: hidden;       /* prevents chart from expanding page */
}

/* Canvas must fill the card, not set its own big height */
#layersCountBar{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Optional: prevent the snapshot block from becoming huge */
.snapshot .insights-card{
  overflow: hidden;
}

.chart-card{ height:320px; overflow:hidden; }
#layersCountBar{ width:100% !important; height:100% !important; }

/* snapshot should not become huge */
.snapshot .insights-card{
  overflow: hidden;
}

/* chart card itself */
.chart-card{
  padding: 12px;
}

/* ✅ fixed chart area */
.chart-box{
  height: 370px;        /* adjust 200–280 */
  width: 100%;
}

/* canvas fills the fixed box */
.chart-box canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.chart-card { padding: 12px; }

.chart-box{
  height: 260px;      /* نفس فكرة box ثابت */
  overflow: hidden;
}

.chart-box canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* بسيط لتنسيق الفلاتر */
.filter-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  column-gap: 10px;
  row-gap: 12px;
  align-items: center;
}
.filter-row select, .filter-row input{
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 10px;
}

/* On smaller screens, stack filters with clear space between rows */
@media (max-width: 980px){
  .filter-row{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .filter-row > *:not(:first-child){
    margin-top: 6px;
  }

  .filter-row .btn{
    width: 100%;
  }
}


/* chart */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 16px;
  margin-top: 12px;
}

.chart-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.chart-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: right; /* RTL support */
}

.chart-box {
  position: relative;
  height: 300px;
}

@media (max-width: 768px) {
  .chart-grid {
    grid-template-columns: 1fr; /* stack on small screens */
  }
}

/* Pie + legend layout (legend on the left of pie) */
/* Donut + legend area */
.bb-donut-area{
  position: relative;
  height: 240px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
}

/* Donut size controller */
.bb-donut-wrap{
  width: 170px;
  height: 170px;
  justify-self: center;
  align-self: center;
}

.bb-donut-wrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Billboards donuts: slightly smaller than global donut size */
#asset-billboards .bb-donut-area{
  height: 220px;
}

#asset-billboards .bb-donut-wrap{
  width: 140px;
  height: 140px;
}

/* Buildings donuts need more room for outside callout labels */
.b-donut-area{
  height: 280px;
  direction: ltr;
}

.b-donut-wrap{
  width: 320px;
  height: 260px;
}

.b-pie-card{
  height: 390px;
  overflow: visible;
}

.b-pie-card .bb-legend-mini{
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  z-index: 4;
}

/* ESRI mini legend bottom-left */
.bb-legend-mini{
  position: static;
  justify-self: start;
  align-self: end;
  margin-inline-start: 8px;
  margin-bottom: 6px;
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

/* One legend row */
.bb-legend-mini .row{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  direction: rtl;
}

/* small ESRI square */
.bb-legend-mini .sw{
  width: 10px;
  height: 10px;
  border-radius: 2px;              /* small rounded square */
  border: 1px solid rgba(15,23,42,.18);
  flex-shrink: 0;                   /* prevent shrinking */
}

.bb-legend-mini .val{
  color: var(--ink);
  opacity: .9;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 6px;
}

@media (max-width:768px){
  .bb-donut-area{ height: 220px; }
  .bb-donut-wrap{ width: 128px; height: 128px; }
  .bb-legend-mini{
    margin-inline-start: 6px;
    margin-bottom: 4px;
    padding: 6px 8px;
    gap: 4px;
  }
  .bb-legend-mini .row{ font-size: 11px; gap: 4px; }
  .bb-legend-mini .sw{ width: 8px; height: 8px; }

  .b-donut-area{ height: 250px; }
  .b-donut-wrap{ width: 190px; height: 150px; }
  .b-pie-card{ height: 360px; }
  .b-pie-card .bb-legend-mini{ top: 6px; left: 6px; }

  #asset-billboards .bb-donut-area{ height: 205px; }
  #asset-billboards .bb-donut-wrap{ width: 116px; height: 116px; }
}

.bb-legend-mini{
  direction: ltr;
}

/* Assets pies: use Buildings-like sizing/layout across all asset tabs */
#tab-assets .bb-donut-area{
  height: 280px;
  direction: ltr;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
}

#tab-assets .bb-donut-wrap{
  width: 320px;
  height: 260px;
  justify-self: center;
  align-self: center;
}

#tab-assets .bb-legend-mini{
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  z-index: 4;
}

/* Issues pie: smaller than other assets */
#asset-issues .bb-donut-area{
  height: 235px;
}

#asset-issues .bb-donut-wrap{
  width: 200px;
  height: 200px;
}

@media (max-width:768px){
  #assetTabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #assetTabs .ins-tab{
    flex: 0 0 auto;
  }

  #tab-assets .kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tab-assets .chart-card{
    padding: 12px;
    height: auto;
  }

  #tab-assets .chart-box{
    height: 230px;
  }

  #tab-assets .bb-donut-area{
    height: 210px;
    grid-template-rows: 1fr auto;
  }

  #tab-assets .bb-donut-wrap{
    width: 130px;
    height: 130px;
  }

  #asset-issues .bb-donut-area{ height: 200px; }
  #asset-issues .bb-donut-wrap{ width: 115px; height: 115px; }

  /* Buildings pies: bigger on phone (same visual weight as others) */
  #tab-assets #asset-buildings .bb-donut-area{
    height: 235px;
  }

  #tab-assets #asset-buildings .bb-donut-wrap{
    width: 160px;
    height: 160px;
  }

  #tab-assets .bb-legend-mini{
    position: static;
    justify-self: start;
    align-self: end;
    margin-top: 6px;
    margin-inline-start: 0;
    max-width: 95%;
    padding: 6px 8px;
  }

  #tab-assets .bb-legend-mini .row{
    font-size: 10.5px;
  }
}


/* =========================
   DashboardTr
   ========================= */
  .lang-switch{
    position: relative;
    direction: ltr;
  }

  .lang-switch-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: auto;
    padding: 0px 12px;
    height: var(--tap);
    border: 1px solid rgba(182,138,53,.45);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fffaf0 0%, #f6eddc 100%);
    box-shadow: 0 4px 12px rgba(182,138,53,.14);
    color: #000;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
  }

  .lang-switch-btn:hover{
    background: linear-gradient(180deg, #fffdf7 0%, #f3e6cc 100%);
    border-color: rgba(182,138,53,.65);
    box-shadow: 0 6px 16px rgba(182,138,53,.18);
    transform: translateY(-1px);
  }

  .lang-btn-label{
    line-height: 1;
    white-space: nowrap;
    color: #000;
  }

  .lang-globe{
    width: 16px;
    height: 16px;
    color: #000;
    flex: 0 0 auto;
  }

  .lang-switch-btn .caret{
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #000;
    transition: transform .18s ease;
    margin-inline-start: 2px;
  }

  .lang-menu{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    padding: 6px;
    border-radius: 14px;
    background: #fffdfa;
    border: 1px solid rgba(182,138,53,.18);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 40;
  }

  .lang-switch.open .lang-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .lang-option{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
  }

  .lang-option:hover{
    background: rgba(182,138,53,.10);
    color: #000;
  }

  .lang-menu-icon{
    width: 15px;
    height: 15px;
    color: #000;
    flex: 0 0 auto;
  }

  .lang-check{
    color: #000;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
  }

  .lang-switch.open .lang-switch-btn .caret{
    transform: rotate(180deg);
  }

  @media (max-width: 600px){
    .lang-switch-btn{
      height: 30px;
      padding: 0 7px;
      gap: 4px;
      font-size: 11px;
      border-radius: 9px;
    }

    .lang-globe{
      width: 12px;
      height: 12px;
    }

    .lang-switch-btn .caret{
      border-left-width: 3px;
      border-right-width: 3px;
      border-top-width: 4px;
      margin-inline-start: 0;
    }
  }


  @media (max-width: 380px){
    .lang-switch-btn{
      height: 32px;
      padding: 0 8px;
      gap: 5px;
      font-size: 11px;
    }
  }

  html[dir="rtl"] .field-menu-page .dropdown-menu,
  html[dir="rtl"] .field-menu-page .lang-menu{
    right: 0;
    left: auto;
  }

  @media (max-width: 600px){
    .dashboard-page .topbar{
      height: auto;
      min-height: 52px;
      padding: 8px 10px;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .dashboard-page .topbar-brand{
      width: auto;
      flex: 1 1 auto;
      min-width: 0;
      justify-content: flex-start;
      gap: 8px;
    }

    .dashboard-page .appbrand-logo{
      width: 30px;
      height: 30px;
      flex-basis: 30px;
    }

    .dashboard-page .appbrand-text{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: right;
      min-width: 0;
    }

    .dashboard-page .appname{
      font-size: 12px;
      line-height: 1.05;
    }

    .dashboard-page .appsub{
      max-width: 100%;
      font-size: 9.5px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard-page .topbar-right{
      width: auto;
      flex: 0 0 auto;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 6px;
    }

    .dashboard-page .user-toggle{
      width: 38px;
      min-width: 38px;
      height: 38px;
      border-radius: 12px;
    }

    .dashboard-page .user-toggle .chevron::before{
      width: 18px;
      height: 18px;
    }

    .dashboard-page .lang-switch-btn{
      height: 38px;
      padding: 0 10px;
      gap: 5px;
      border-radius: 12px;
      font-size: 12px;
    }

    .dashboard-page .lang-btn-label{
      font-size: 12px;
    }

    .dashboard-page .lang-globe{
      width: 14px;
      height: 14px;
    }

    .dashboard-page .lang-switch-btn .caret{
      border-left-width: 3px;
      border-right-width: 3px;
      border-top-width: 4px;
    }

    .dashboard-page .landing-v2{
      padding: 18px 12px 22px;
    }

    .dashboard-page .welcome-panel{
      gap: 18px;
      margin-bottom: 18px;
      padding: 18px 14px 16px;
      border-radius: 20px;
    }

    .dashboard-page .welcome-logo{
      min-height: 120px;
      max-width: 180px;
      margin-bottom: 8px;
    }

    .dashboard-page .welcome-title{
      font-size: 22px;
      line-height: 1.15;
    }

    .dashboard-page .welcome-points{
      margin-top: 12px;
      gap: 10px;
    }

    .dashboard-page .welcome-point{
      min-height: auto;
      padding: 12px 14px;
    }

    .dashboard-page .page-title{
      text-align: center;
      margin-bottom: 12px;
    }

    html[dir="rtl"] .dashboard-page .dropdown-menu{
      right: auto;
      left: 0;
    }

    html[dir="rtl"] .dashboard-page .lang-menu{
      right: auto;
      left: 0;
      transform: translateY(6px);
    }

    html[dir="rtl"] .dashboard-page .lang-switch.open .lang-menu{
      transform: translateY(0);
    }

    .dashboard-page .dropdown-menu,
    .dashboard-page .lang-menu{
      min-width: min(220px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      z-index: 1002;
    }

    .dashboard-page .dropdown-item,
    .dashboard-page .lang-option{
      padding: 12px 14px;
      font-size: 14px;
    }
  }