/* =========================================================
   فونت فارسی — میزبانی محلی (بدون CDN، برای باز شدن بدون فیلترشکن)
   ========================================================= */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-700.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   سامانه «رهاب» — استایل کامل
   ساختار: تم تاریک، RTL، داشبورد سه‌ستونی + مودال + جدول فهرست
   ========================================================= */

:root {
  --bg-deep: #060f18;
  --bg: #0a1521;
  --panel: #0d1c2b;
  --panel-2: #112334;
  --panel-3: #16304a;
  --stroke: #1b344d;
  --stroke-soft: #14283c;
  --txt: #e6f0f8;
  --txt-dim: #9ab0c4;
  --txt-mute: #6b8497;
  --cyan: #38cdf5;
  --cyan-2: #17a5d6;
  --teal: #5eead4;
  --active: #2fd47a;
  --inactive: #ff5c6c;
  --amber: #f2b23a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --shadow: 0 8px 24px rgba(0, 0, 0, .34);
  --font: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.is-scroll { overflow: auto; }

h1, h2, h3 { margin: 0; font-weight: 700; }
button, select, input { font-family: inherit; }
svg { display: block; }

/* =========================================================
   صفحه ورود
   ========================================================= */

.auth {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(1000px 620px at 78% -8%, rgba(34, 168, 224, .18), transparent 60%),
    radial-gradient(760px 520px at 12% 108%, rgba(94, 234, 212, .12), transparent 62%),
    linear-gradient(160deg, #071320, #040c14 62%);
  overflow: auto;
}

.auth__glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 148, 255, .16), transparent 66%);
  filter: blur(28px);
  pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate(-12%, -8%) scale(1); }
  to { transform: translate(12%, 9%) scale(1.12); }
}

.auth__card {
  position: relative;
  width: min(392px, 100%);
  background: linear-gradient(180deg, rgba(17, 35, 52, .96), rgba(9, 20, 31, .97));
  border: 1px solid rgba(56, 205, 245, .2);
  border-radius: 18px;
  padding: 26px 24px 20px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.auth__brand { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }

.logo--lg { width: 58px; height: 58px; flex: 0 0 auto; }

.auth__brand h1 {
  font-size: 22px;
  letter-spacing: .5px;
  background: linear-gradient(92deg, #7ff2dd, #4fbdff 55%, #7aa8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth__brand p { margin: 2px 0 0; font-size: 11px; color: var(--txt-mute); }

.auth .field input {
  width: 100%;
  background: #071220;
  color: var(--txt);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
}

.auth .field input:focus {
  outline: none;
  border-color: rgba(56, 205, 245, .65);
  box-shadow: 0 0 0 3px rgba(56, 205, 245, .12);
}

.auth__error {
  margin: 0 0 10px;
  font-size: 11px;
  color: #ff8b96;
  background: rgba(255, 92, 108, .1);
  border: 1px solid rgba(255, 92, 108, .28);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
}

.auth__foot {
  margin: 16px 0 0;
  font-size: 9.8px;
  color: var(--txt-mute);
  text-align: center;
  line-height: 1.85;
  border-top: 1px dashed var(--stroke-soft);
  padding-top: 12px;
}

.auth__lock { color: #6f9a8c; }

/* =========================================================
   نوار بالا
   ========================================================= */

.app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  flex: 0 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 13px;
  background: linear-gradient(180deg, #0e2135, #081522);
  border-bottom: 1px solid var(--stroke);
  z-index: 900;
}

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

.logo { width: 38px; height: 38px; flex: 0 0 auto; }

.brand__text h1 {
  font-size: 16px;
  letter-spacing: .4px;
  background: linear-gradient(92deg, #7ff2dd, #4fbdff 60%, #8fb4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__text p {
  margin: 0;
  font-size: 10.2px;
  color: var(--txt-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

/* دکمه‌های کلیددار */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel-2);
  color: var(--txt-dim);
  cursor: pointer;
  transition: all .16s;
  white-space: nowrap;
}

.toggle:hover { border-color: #2c6188; color: var(--txt); }

.toggle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3d5a70;
  box-shadow: none;
  transition: all .16s;
  flex: 0 0 auto;
}

.toggle[aria-pressed="true"] {
  color: #b9ffe4;
  border-color: rgba(47, 212, 122, .5);
  background: rgba(47, 212, 122, .12);
}

.toggle[aria-pressed="true"] .toggle__dot {
  background: var(--active);
  box-shadow: 0 0 8px rgba(47, 212, 122, .9);
}

.userbox {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel-2);
}

.user__avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #04202b;
  background: linear-gradient(140deg, var(--teal), var(--cyan-2));
}

.user__name { font-size: 11px; color: var(--txt-dim); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   دکمه‌ها
   ========================================================= */

.btn {
  appearance: none;
  border: 1px solid var(--stroke);
  background: var(--panel-2);
  color: var(--txt);
  font-size: 11.5px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
  white-space: nowrap;
}

.btn:hover { background: var(--panel-3); border-color: #2b6088; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--ghost { background: rgba(17, 35, 52, .78); color: var(--txt-dim); }
.btn--ghost:hover { color: var(--txt); }

.btn--primary {
  background: linear-gradient(180deg, #23aee4, #0d84b8);
  border-color: #37bff0;
  color: #04141d;
  font-weight: 800;
}

.btn--primary:hover { background: linear-gradient(180deg, #2cc0f5, #0f92cc); }

.btn--danger {
  background: rgba(255, 92, 108, .1);
  border-color: rgba(255, 92, 108, .35);
  color: #ff9aa4;
}

.btn--danger:hover { background: rgba(255, 92, 108, .18); }

.btn--block { width: 100%; }
.btn--lg { font-size: 13px; padding: 10px 16px; }

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--txt-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  line-height: 1;
}

.icon-btn:hover { background: var(--panel-3); color: #fff; }

.mini-btn {
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--txt-mute);
  font-size: 9.5px;
  padding: 1px 7px;
  border-radius: 999px;
  cursor: pointer;
}

.mini-btn:hover { color: var(--cyan); border-color: rgba(56, 205, 245, .5); }
.mini-btn--danger:hover { color: var(--inactive); border-color: rgba(255, 92, 108, .55); }

/* فهرست لایه‌های تصویری افزودنی */
.layer-list { display: grid; gap: 5px; margin-top: 7px; }

.layer-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(10, 26, 43, .72);
}

.layer-item.is-off { opacity: .5; }

.layer-item__main { display: grid; gap: 1px; min-width: 0; }
.layer-item__main b { font-size: 10.5px; color: var(--txt); }
.layer-item__combo {
  font-size: 9px; color: var(--cyan);
  font-family: ui-monospace, monospace; direction: ltr; text-align: right;
}
.layer-item__main small { font-size: 9px; color: var(--txt-mute); direction: ltr; text-align: right; }
.layer-item__acts { display: flex; gap: 3px; flex: 0 0 auto; }

.empty--sm { padding: 8px 0; font-size: 9.6px; }
.note--wait { color: #e8c56a; }

.mini-actions { display: inline-flex; gap: 4px; }

/* =========================================================
   چیدمان کاری
   ========================================================= */

.workspace {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr) 336px;
  min-height: 0;
  direction: ltr; /* نمودارها | نقشه | کنترل‌ها */
}

.panel {
  direction: rtl;
  background: var(--panel);
  overflow-y: auto;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #234a67 transparent;
}

.panel--left { border-right: 1px solid var(--stroke); }
.panel--right { border-left: 1px solid var(--stroke); }

.panel::-webkit-scrollbar { width: 7px; }
.panel::-webkit-scrollbar-thumb { background: #234a67; border-radius: 99px; }
.panel::-webkit-scrollbar-track { background: transparent; }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 6px;
  border-bottom: 1px solid var(--stroke-soft);
  flex: 0 0 auto;
}

.panel__head h2 { font-size: 12.5px; color: var(--cyan); }
.panel__hint { font-size: 10.2px; color: var(--txt-mute); }

/* ---------- کارت‌ها ---------- */

.card {
  background: var(--panel-2);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius);
  padding: 10px;
  flex: 0 0 auto;
}

.card--tight { padding: 9px 10px; }

.card__title {
  font-size: 11.4px;
  color: var(--txt-dim);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.badge {
  font-size: 10px;
  background: rgba(56, 205, 245, .14);
  color: var(--cyan);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 700;
}

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

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 0 0 auto; }

.kpi {
  background: var(--panel-2);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  border-right: 2px solid #1f4a68;
}

.kpi--active { border-right-color: var(--active); }
.kpi--inactive { border-right-color: var(--inactive); }

.kpi__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.2px;
  color: var(--txt-mute);
}

.kpi__value {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  direction: ltr;
  text-align: right;
  line-height: 1.45;
}

.kpi--active .kpi__value { color: var(--active); }
.kpi--inactive .kpi__value { color: var(--inactive); }

.kpi__unit { font-size: 9.4px; color: var(--txt-mute); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.dot--active { background: var(--active); box-shadow: 0 0 7px rgba(47, 212, 122, .75); }
.dot--inactive { background: var(--inactive); box-shadow: 0 0 7px rgba(255, 92, 108, .75); }

/* ---------- نمودار ---------- */

.chart-box { position: relative; height: 148px; }
.chart-box--tall { height: 190px; }

.donut-wrap { position: relative; height: 128px; }
.donut-wrap canvas { max-height: 128px; }

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.donut-center strong { font-size: 19px; color: var(--active); direction: ltr; }
.donut-center span { font-size: 9.4px; color: var(--txt-mute); }

.legend-list {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 10.4px;
  color: var(--txt-dim);
}

.legend-list li { display: flex; align-items: center; gap: 6px; }
.legend-list b { margin-right: auto; color: #fff; direction: ltr; }

.footnote {
  margin: 0 0 8px;
  font-size: 9.6px;
  color: var(--txt-mute);
  line-height: 1.65;
  border-top: 1px dashed var(--stroke-soft);
  padding-top: 8px;
  flex: 0 0 auto;
}

/* ---------- فرم ---------- */

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.field { display: block; margin-bottom: 6px; }

.field > span {
  display: block;
  font-size: 10.2px;
  color: var(--txt-mute);
  margin-bottom: 3px;
}

.field select,
.field input[type="number"],
.field input[type="text"] {
  width: 100%;
  background: #071220;
  color: var(--txt);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 11.4px;
}

.field select {
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #4f7794 50%),
    linear-gradient(135deg, #4f7794 50%, transparent 50%);
  background-position: calc(0% + 11px) calc(50% + 1px), calc(0% + 15px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--cyan-2);
  box-shadow: 0 0 0 2px rgba(56, 205, 245, .14);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 10.6px;
  color: var(--txt-dim);
  padding: 3px 0;
  cursor: pointer;
  line-height: 1.6;
}

.check input { accent-color: var(--cyan-2); margin-top: 3px; flex: 0 0 auto; }

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

.threshold input[type="range"] {
  flex: 1;
  appearance: none;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--inactive), var(--amber) 45%, var(--active));
  cursor: pointer;
}

.threshold input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--cyan);
  box-shadow: 0 0 0 2px rgba(56, 205, 245, .25);
}

.threshold input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--cyan);
}

.threshold output {
  font-size: 12px;
  font-weight: 800;
  color: var(--cyan);
  min-width: 46px;
  text-align: center;
  background: rgba(56, 205, 245, .1);
  border-radius: 6px;
  padding: 2px 4px;
  direction: ltr;
}

.note { margin: 6px 0 0; font-size: 9.7px; color: var(--txt-mute); line-height: 1.68; }
.note b { color: var(--txt-dim); }
.note--ok { color: #79c2a4; border-top: 1px dashed var(--stroke-soft); padding-top: 6px; }
.note--muted { margin-top: 5px; }

.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 0 0 auto; }
.btn-row .btn--primary { grid-column: 1 / -1; font-size: 12.4px; padding: 9px 12px; }

/* ---------- آمار ---------- */

.stat-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.8px;
  color: var(--txt-dim);
  padding: 3px 0;
  border-bottom: 1px dotted rgba(27, 52, 77, .72);
}

.stat-line:last-of-type { border-bottom: 0; }
.stat-line b { color: #fff; direction: ltr; font-weight: 700; }
.stat-line b.ok { color: #71e0ad; direction: rtl; }

.txt-active { color: var(--active) !important; }
.txt-inactive { color: var(--inactive) !important; }

.bar-share {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 92, 108, .5);
  overflow: hidden;
  margin-top: 7px;
}

.bar-share span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--active);
  border-radius: 99px;
  transition: width .38s ease;
}

/* ---------- تب‌ها ---------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  background: #081522;
  border: 1px solid var(--stroke-soft);
  border-radius: 9px;
  padding: 3px;
  flex: 0 0 auto;
}

.tab {
  border: 0;
  background: transparent;
  color: var(--txt-mute);
  font-size: 10.4px;
  padding: 5px 2px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.tab:hover { color: var(--txt); }

.tab.is-on {
  background: linear-gradient(180deg, rgba(56, 205, 245, .22), rgba(56, 205, 245, .1));
  color: #b9f0ff;
  font-weight: 800;
}

.tabpane { display: none; flex-direction: column; gap: 8px; }
.tabpane.is-on { display: flex; }

/* ---------- فهرست صحنه‌ها ---------- */

.scene-list { display: grid; gap: 5px; }

.scene-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: #0a1826;
  border: 1px solid var(--stroke-soft);
  cursor: pointer;
  transition: all .14s;
  font-size: 10.4px;
  color: var(--txt-dim);
}

.scene-item:hover { border-color: #2a5f85; }

.scene-item.is-off { opacity: .48; }

.scene-item.is-active {
  border-color: rgba(56, 205, 245, .65);
  background: rgba(56, 205, 245, .1);
  color: #d9f4ff;
}

.scene-item input { accent-color: var(--active); flex: 0 0 auto; margin: 0; }

.scene-item__tile {
  font-family: var(--mono);
  font-size: 9.6px;
  color: var(--cyan);
  direction: ltr;
  flex: 0 0 auto;
}

.scene-item__meta { margin-right: auto; display: flex; gap: 8px; align-items: center; }

.scene-item__cloud {
  font-size: 9.4px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(242, 178, 58, .14);
  color: var(--amber);
}

.scene-item__cloud.is-clear { background: rgba(47, 212, 122, .14); color: var(--active); }

.scene-item__date { font-size: 9.8px; color: var(--txt-mute); white-space: nowrap; }

/* ---------- جدول ---------- */

.data-table { width: 100%; border-collapse: collapse; font-size: 10.4px; }

.data-table th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  color: var(--txt-mute);
  font-weight: 700;
  text-align: right;
  padding: 5px 4px;
  border-bottom: 1px solid var(--stroke);
  font-size: 9.7px;
  z-index: 1;
  white-space: nowrap;
}

.data-table td {
  padding: 4px;
  border-bottom: 1px solid rgba(27, 52, 77, .42);
  color: var(--txt-dim);
  white-space: nowrap;
}

.data-table td:first-child { color: var(--cyan); direction: ltr; text-align: right; }
.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover { background: rgba(56, 205, 245, .07); }
.data-table tbody tr.is-selected { background: rgba(56, 205, 245, .13); }

.tag {
  display: inline-block;
  font-size: 9.3px;
  padding: 0 6px;
  border-radius: 999px;
  font-weight: 700;
}

.tag--active { background: rgba(47, 212, 122, .16); color: var(--active); }
.tag--inactive { background: rgba(255, 92, 108, .16); color: var(--inactive); }
.tag--nodata { background: rgba(120, 140, 155, .16); color: #9db0bf; }

.fill-chip {
  font-size: 9.2px;
  color: #8fd8ff;
  background: rgba(56, 205, 245, .1);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
}

.fill-chip--dry { color: #7d8f9e; background: rgba(120, 140, 155, .12); }

.empty { font-size: 10.2px; color: var(--txt-mute); text-align: center; padding: 14px 0; margin: 0; }

/* ---------- جزئیات حوضچه ---------- */

.detail { display: grid; gap: 4px; font-size: 10.6px; }
.detail__title { font-size: 11.6px; font-weight: 800; color: #fff; }
.detail__owner { font-size: 10.4px; color: var(--txt-mute); margin-bottom: 4px; }
.detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.detail__grid span { color: var(--txt-mute); font-size: 10px; }
.detail__grid b { color: #fff; direction: ltr; }
.detail__fill { font-size: 10.2px; }

/* ---------- گزارش فعالیت ---------- */

.report-list { display: grid; gap: 5px; }

.report-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 7px;
  align-items: center;
  padding: 5px 7px;
  border-radius: 7px;
  background: #0a1826;
  border: 1px solid var(--stroke-soft);
  font-size: 10.3px;
}

.report-item.is-current { border-color: rgba(56, 205, 245, .55); background: rgba(56, 205, 245, .08); }
.report-item.is-dry { opacity: .72; }

.report__year { font-weight: 800; color: var(--cyan); font-size: 10.6px; }
.report__text { color: var(--txt-dim); }
.report__text b { color: #d9f0ff; }

.report-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 99px;
  background: rgba(27, 52, 77, .8);
  overflow: hidden;
  display: flex;
  direction: ltr;
}

.report-bar span {
  height: 100%;
  background: linear-gradient(90deg, #2fd47a, #38cdf5);
}

/* ---------- ورودی فایل ---------- */

.dropzone {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 16px 10px;
  border: 1.5px dashed #274f6d;
  border-radius: var(--radius);
  background: #081624;
  text-align: center;
  cursor: pointer;
  transition: all .16s;
}

.dropzone:hover,
.dropzone.is-over {
  border-color: var(--cyan-2);
  background: rgba(56, 205, 245, .07);
}

.dropzone strong { font-size: 11.4px; color: var(--txt); }
.dropzone span { font-size: 10px; color: var(--cyan); }
.dropzone small { font-size: 9.2px; color: var(--txt-mute); direction: ltr; }

/* =========================================================
   نقشه
   ========================================================= */

.map-area { position: relative; min-width: 0; background: #06101a; }

#map { position: absolute; inset: 0; background: #06101a; }

.leaflet-container { background: #06101a; font-family: var(--font); }

.leaflet-control-attribution {
  background: rgba(6, 16, 26, .82) !important;
  color: #7a93a7 !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 4px 0 0 0;
}

.leaflet-control-attribution a { color: #9cc0d6 !important; }

.leaflet-bar a {
  background: var(--panel-2) !important;
  color: var(--txt) !important;
  border-color: var(--stroke) !important;
}

.leaflet-bar a:hover { background: var(--panel-3) !important; }

.map-overlay {
  position: absolute;
  z-index: 500;
  background: rgba(9, 22, 34, .9);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
}

.map-overlay--legend {
  right: 12px;
  top: 12px;
  padding: 8px 11px;
  min-width: 172px;
  font-size: 10.3px;
  color: var(--txt-dim);
}

.legend-title { font-weight: 800; color: var(--cyan); font-size: 10.8px; margin-bottom: 5px; }

.legend-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; }
.legend-row--muted { color: var(--txt-mute); }

.swatch { width: 12px; height: 9px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.swatch--active { background: rgba(47, 212, 122, .5); border: 1.5px solid var(--active); }
.swatch--inactive { background: rgba(255, 92, 108, .5); border: 1.5px solid var(--inactive); }
.swatch--nodata { background: rgba(130, 152, 170, .28); border: 1.5px solid rgba(150, 172, 190, .7); }
.swatch--off { background: rgba(110, 130, 148, .18); border: 1.5px dashed rgba(120, 140, 158, .55); }

.legend-foot {
  font-size: 8.9px;
  color: var(--txt-mute);
  border-top: 1px dashed var(--stroke-soft);
  margin-top: 5px;
  padding-top: 5px;
}

.map-overlay--basemap { left: 12px; top: 12px; padding: 4px; }

.segmented { display: flex; gap: 3px; }

.segmented__btn {
  border: 0;
  background: transparent;
  color: var(--txt-mute);
  font-size: 10.2px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.segmented__btn:hover { color: var(--txt); background: rgba(56, 205, 245, .08); }

.segmented__btn.is-on {
  background: rgba(56, 205, 245, .17);
  color: var(--cyan);
  font-weight: 700;
}

.map-overlay--scene {
  left: 12px;
  bottom: 44px;
  padding: 7px 10px;
  font-size: 9.9px;
  color: var(--txt-dim);
  min-width: 166px;
}

.scene-row { display: flex; justify-content: space-between; gap: 12px; line-height: 1.85; }
.scene-row b { color: #fff; direction: ltr; }
.scene-row b.ok { color: var(--active); direction: rtl; }

.map-badge {
  position: absolute;
  z-index: 500;
  right: 12px;
  bottom: 44px;
  background: rgba(9, 22, 34, .9);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 9.8px;
  color: var(--txt-dim);
  box-shadow: var(--shadow);
}

/* ---------- کشوی فهرست حوضچه‌ها ---------- */

.sheet {
  position: absolute;
  z-index: 520;
  inset-inline: 0;
  bottom: 0;
  background: rgba(9, 22, 34, .96);
  border-top: 1px solid var(--stroke);
  backdrop-filter: blur(9px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .4);
  transition: max-height .26s ease;
  max-height: 40px;
  display: flex;
  flex-direction: column;
}

.sheet[data-open="true"] { max-height: min(46vh, 330px); }

.sheet__handle {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--txt-dim);
  font-family: inherit;
  font-size: 11px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.sheet[data-open="true"] .sheet__handle { border-bottom-color: var(--stroke-soft); }

.sheet__grip {
  width: 26px;
  height: 3px;
  border-radius: 99px;
  background: #2d5a7b;
  flex: 0 0 auto;
}

.sheet__handle:hover { color: var(--txt); }

.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0 8px 8px;
}

.table-scroll {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #234a67 transparent;
}

.table-scroll::-webkit-scrollbar { width: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: #234a67; border-radius: 99px; }

/* برچسب نام روی نقشه */
.pond-label {
  background: rgba(6, 20, 32, .86);
  border: 1px solid rgba(56, 205, 245, .4);
  color: #cfeeff;
  font-family: var(--font);
  font-size: 9px;
  padding: 0 4px;
  border-radius: 4px;
  box-shadow: none;
  direction: rtl;
  white-space: nowrap;
}

.pond-label::before { display: none !important; }

.pond-tip {
  background: rgba(7, 20, 32, .96) !important;
  border: 1px solid #2a5a7a !important;
  color: #dceaf5 !important;
  font-family: var(--font) !important;
  font-size: 10.4px !important;
  border-radius: 7px !important;
  box-shadow: var(--shadow) !important;
  padding: 6px 9px !important;
  direction: rtl;
  line-height: 1.7;
}

.pond-tip::before { display: none !important; }

/* =========================================================
   مودال
   ========================================================= */

.modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 18px; }
.modal[hidden] { display: none; }

.modal__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 13, .8); backdrop-filter: blur(3px); }

.modal__box {
  position: relative;
  width: min(900px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 26px 66px rgba(0, 0, 0, .58);
  padding: 14px;
}

.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal__head h2 { font-size: 13.4px; color: var(--cyan); }
.modal__note { font-size: 10.3px; color: var(--txt-mute); margin: 6px 0 9px; line-height: 1.72; }
.modal__actions { display: flex; gap: 7px; margin-bottom: 8px; }

.code {
  margin: 0;
  overflow: auto;
  background: #050d16;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--mono);
  font-size: 10.8px;
  line-height: 1.72;
  color: #b6d6e8;
  direction: ltr;
  text-align: left;
  white-space: pre;
  flex: 1 1 auto;
}

/* =========================================================
   توست
   ========================================================= */

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  background: #0d3049;
  border: 1px solid #2a6c90;
  color: #d9f2ff;
  font-size: 11.4px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  max-width: 92vw;
  text-align: center;
}

.toast[hidden] { display: none; }
.toast.toast--err { background: #42151b; border-color: #7d2a35; color: #ffc5cb; }
.toast.toast--ok { background: #0d3b2c; border-color: #1f7a5a; color: #b7ffe2; }

/* =========================================================
   واکنش‌گرا
   ========================================================= */

@media (max-width: 1400px) {
  .workspace { grid-template-columns: 282px minmax(0, 1fr) 312px; }
  .chart-box { height: 136px; }
}

@media (max-width: 1180px) {
  body { overflow: auto; }
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(420px, 60vh) auto;
  }
  .map-area { order: 1; min-height: 420px; }
  .panel--right { order: 2; border-left: 0; border-top: 1px solid var(--stroke); }
  .panel--left { order: 3; border-right: 0; border-top: 1px solid var(--stroke); overflow: visible; }
  .panel { overflow: visible; }
  #map { position: relative; min-height: 420px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .sheet { position: relative; max-height: none; }
  .sheet[data-open="true"] { max-height: none; }
  .sheet__body { overflow: visible; }
  .table-scroll { max-height: 300px; }
}

@media (max-width: 760px) {
  body { font-size: 12.4px; }
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .brand__text h1 { font-size: 14px; }
  .brand__text p { font-size: 9.2px; white-space: normal; }
  .topbar__actions { width: 100%; overflow-x: auto; padding-bottom: 2px; gap: 5px; }
  .topbar__actions::-webkit-scrollbar { height: 4px; }
  .toggle, .btn { font-size: 10.6px; padding: 6px 9px; }
  .workspace { grid-template-rows: auto minmax(320px, 52vh) auto; }
  .map-area, #map { min-height: 320px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .map-overlay--legend { font-size: 9.3px; min-width: 0; padding: 6px 8px; max-width: 47vw; right: 8px; top: 8px; }
  .legend-foot { display: none; }
  .map-overlay--basemap { left: 8px; top: 8px; }
  .map-overlay--scene, .map-badge { display: none; }
  .segmented__btn { padding: 4px 7px; font-size: 9.4px; }
  .footnote { display: none; }
  .data-table th:nth-child(6), .data-table td:nth-child(6) { display: none; }
  .chart-box--tall { height: 160px; }
  .auth__card { padding: 20px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}