/* AlbGIS Hydro — shtresë desktop: ribbon (AutoCAD-style) + panel vetish djathtas. */

body.hydro-desktop { flex-direction: column !important; }

/* ── RIBBON ── */
#hydro-ribbon {
  display: flex; align-items: stretch; flex: 0 0 auto;
  height: 96px; background: #0f131b; border-bottom: 1px solid #232a36;
  padding: 6px 6px 0; gap: 0; overflow-x: auto; overflow-y: hidden;
}
.hydro-panel {
  display: flex; flex-direction: column; padding: 4px 10px 0;
  border-right: 1px solid #1c2432;
}
.hydro-panel:last-child { border-right: none; }
.hydro-prow { display: flex; gap: 4px; flex: 1; align-items: center; }
.hydro-ptitle {
  text-align: center; font-size: 10px; color: #5f6a7d;
  text-transform: uppercase; letter-spacing: .08em; padding: 3px 0 5px;
}

.hydro-rbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-width: 58px; max-width: 90px; height: 66px; padding: 5px 7px 4px;
  background: transparent; border: none; border-radius: 8px;
  color: #aeb8c8; cursor: pointer; font-family: Inter, sans-serif;
}
/* Korniza e ikonës — tile me gradient, buzë e butë dhe hije */
.hydro-rbtn .ic {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; font-size: 19px; line-height: 1;
  background: linear-gradient(160deg, #1e2636, #151a26);
  border: 1px solid #2b3648;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.30);
  transition: transform .12s cubic-bezier(.16,1,.3,1), border-color .12s, box-shadow .12s, background .12s;
}
.hydro-rbtn:hover { color: #e8eaf0; }
.hydro-rbtn:hover .ic {
  border-color: #3f6bb0; background: linear-gradient(160deg, #24324c, #182030);
  box-shadow: 0 4px 12px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.hydro-rbtn:active .ic { transform: translateY(0); }
.hydro-rbtn.active { color: #7fe6d4; }
.hydro-rbtn.active .ic {
  border-color: #1f8a76; color: #cffaf0;
  background: linear-gradient(160deg, #123c3b, #0f2a2f);
  box-shadow: 0 0 0 1px rgba(52,224,176,.30), 0 4px 12px rgba(0,0,0,.42);
}
.hydro-rbtn:disabled { opacity: .4; cursor: default; }
.hydro-rbtn:disabled .ic { box-shadow: none; }
.hydro-rbtn .lb { font-size: 11px; line-height: 1.15; text-align: center; white-space: nowrap; color: inherit; }
.hydro-rbtn .ic.ic-svg { color: inherit; }
.hydro-rbtn .ic.ic-svg svg { width: 21px; height: 21px; display: block; }
#hydro-lefttools button.ic-svg { display: flex; align-items: center; justify-content: center; }
#hydro-lefttools button.ic-svg svg { width: 21px; height: 21px; }

/* ── rreshti hartë | properties ── */
#hydro-row { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.hydro-desktop #sidebar { display: none !important; }
body.hydro-desktop #map { flex: 1; }

/* ── PANELI I VETIVE (djathtas) ── */
body.hydro-desktop #results {
  width: 330px; min-width: 330px; border-left: 1px solid #232a36;
  background: #12151c; padding: 14px; gap: 10px;
}
.hydro-prop-head {
  font: 600 12px Sora, Inter, sans-serif; color: #9aa2b2;
  text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: 8px; border-bottom: 1px solid #232a36; margin-bottom: 4px;
}
.hydro-prop-empty { font-size: 12.5px; color: #6a7283; line-height: 1.5; padding: 8px 2px; }
.hydro-collap { display: flex; align-items: center; cursor: pointer; user-select: none; }
.hydro-collap span:first-child { flex: 1; }
.hydro-collap .hp-caret { color: #6a7283; font-size: 11px; }
.hydro-collap:hover .hp-caret { color: #c3cdde; }
body.hydro-desktop #editor { background: #181b24; border-radius: 10px; padding: 12px; }

/* warnbox origjinal fshihet — verejtjet shkojnë te zona e mesazheve poshtë */
body.hydro-desktop #warnbox { display: none !important; }

/* ── Zona e mesazheve/rezultateve (poshtë, sipër footer-it) ── */
#hydro-log {
  flex: 0 0 auto; background: #0d1017; border-top: 1px solid #232a36;
  display: flex; flex-direction: column; overflow: hidden;
}
#hydro-log.collapsed #hlog-body { height: 0; }
#hlog-head {
  display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 12px;
  cursor: pointer; user-select: none; font-size: 12px; color: #9aa2b2; flex: 0 0 auto;
}
#hlog-ttl { font-weight: 600; letter-spacing: .02em; }
#hlog-badge {
  background: #7b2533; color: #ffc2cc; border-radius: 10px; padding: 1px 7px;
  font-size: 10.5px; font-weight: 700; min-width: 16px; text-align: center;
}
#hlog-clear {
  background: transparent; border: 1px solid #2a3242; color: #93a4c4;
  border-radius: 6px; font-size: 11px; padding: 2px 9px; cursor: pointer;
}
#hlog-clear:hover { background: #1a2130; color: #fff; }
#hlog-caret { color: #6a7283; font-size: 10px; }
#hlog-body {
  height: 150px; overflow-y: auto; padding: 4px 0;
  transition: height .16s cubic-bezier(.16,1,.3,1);
}
.hlog-row {
  display: flex; align-items: baseline; gap: 8px; padding: 3px 12px;
  font-size: 12.5px; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,.03);
}
.hlog-row .hlog-ic { flex: 0 0 auto; font-size: 12px; }
.hlog-row .hlog-tx { flex: 1; color: #c3cdde; }
.hlog-row .hlog-t { flex: 0 0 auto; color: #4d5666; font-size: 11px; }
.hlog-row.lvl-info .hlog-ic { color: #6cb6ff; }
.hlog-row.lvl-ok .hlog-ic, .hlog-row.lvl-ok .hlog-tx { color: #7fe6d4; }
.hlog-row.lvl-warn .hlog-ic, .hlog-row.lvl-warn .hlog-tx { color: #ffca7d; }
.hlog-row.lvl-error .hlog-ic, .hlog-row.lvl-error .hlog-tx { color: #ff9db0; }

/* dritarja e rezultateve: kartat e brendshme mbajnë stilin e vet */
#hydro-results-holder .card { margin-bottom: 10px; }

/* Seksionet shtesë të panelit të vetive: info gjeometrik + rezultate (read-only) */
.hydro-props-ext { margin-top: 12px; border-top: 1px solid #232a36; padding-top: 10px; }
.hydro-props-ext .hp-title {
  font: 600 10.5px Sora, Inter, sans-serif; color: #6a7283;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 7px;
}
.hydro-props-ext .hp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; font-size: 12.5px; border-bottom: 1px dashed rgba(255,255,255,.05);
}
.hydro-props-ext .hp-row:last-child { border-bottom: none; }
.hydro-props-ext .hp-lb { color: #9aa2b2; }
.hydro-props-ext .hp-val { color: #e8eaf0; font-weight: 600; font-variant-numeric: tabular-nums; }
.hydro-props-ext .hp-u { color: #6a7283; font-weight: 400; font-size: 11px; }
.hydro-props-ext .hp-empty { font-size: 12px; color: #6a7283; font-style: italic; padding: 2px 0; }

/* ── Kolona qendrore: harta + docku i profilit (plan-profil) ── */
#hydro-mapcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
#hydro-mapcol #map { flex: 1 1 auto; min-height: 0; }
#hydro-profiledock {
  flex: 0 0 42%; min-height: 0; border-top: 2px solid #1f5468; background: #0d1017;
  display: flex; flex-direction: column;
}
/* Lista + krijimi i profileve = panel lundrues majtas (floating), i lëvizshëm nga shiriti. */
#hydro-proflist {
  position: fixed; left: 74px; top: 120px; width: 300px; max-height: 74vh;
  z-index: 1200; display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, .30);
}
#pl-head {
  display: flex; align-items: center; gap: 8px; height: 34px; flex: 0 0 auto;
  padding: 0 8px 0 12px; cursor: move; user-select: none;
  background: #0f766e; color: #ffffff; border-radius: 9px 9px 0 0;
}
#pl-head #pl-title { font-weight: 600; font-family: Sora, Inter, sans-serif; font-size: 12.5px; }
#pl-head .pl-sp { flex: 1; }
#pl-head #pl-close { background: rgba(255, 255, 255, .16); border: none; color: #fff; border-radius: 6px; font-size: 12px; padding: 3px 9px; cursor: pointer; }
#pl-head #pl-close:hover { background: rgba(255, 255, 255, .30); }
#hydro-proflist #hydro-profiles-host { padding: 10px; overflow: auto; }
#pd-head {
  display: flex; align-items: center; gap: 10px; height: 30px; flex: 0 0 auto;
  padding: 0 12px; border-bottom: 1px solid #232a36; font-size: 12.5px; color: #e8eaf0;
}
#pd-head .pd-t { font-weight: 600; font-family: Sora, Inter, sans-serif; }
#pd-head .pd-se { color: #6a7283; font-size: 11.5px; }
#pd-head #pd-x { background: #1a2130; border: 1px solid #2a3242; color: #c3cdde; border-radius: 6px; font-size: 11px; padding: 2px 10px; cursor: pointer; }
#pd-head #pd-x:hover { background: #23303f; color: #fff; }
#pd-head #pd-auto { background: #153042; border: 1px solid #1f5468; color: #7fe6d4; border-radius: 6px; font-size: 11px; padding: 3px 10px; cursor: pointer; margin-right: 6px; }
#pd-head #pd-auto:hover { background: #184559; }
#pd-head #pd-vexwrap { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; margin-right: 6px; user-select: none; }
#pd-head #pd-vexwrap input[type=range] { width: 74px; accent-color: #2563eb; cursor: pointer; }
#pd-head #pd-vexwrap input[type=checkbox] { accent-color: #2563eb; cursor: pointer; }
#pd-head #pd-vexwrap #pd-vexv { min-width: 32px; font-weight: 600; color: #334155; }
#pd-head #pd-zoomwrap { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; margin-right: 6px; user-select: none; }
#pd-head #pd-zoomwrap input[type=range] { width: 74px; accent-color: #0891b2; cursor: pointer; }
#pd-head #pd-zoomwrap #pd-zoomv { min-width: 38px; font-weight: 600; color: #334155; }
#pd-head #pd-zoomwrap #pd-zrst { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; border-radius: 5px; font-size: 11px; line-height: 1; padding: 2px 6px; cursor: pointer; }
#pd-head #pd-zoomwrap #pd-zrst:hover { background: #e2e8f0; }
#pd-body { flex: 1 1 auto; min-height: 0; display: block; overflow: auto; padding: 6px 8px; }
#pd-cv { display: block; flex: none; border-radius: 6px; }
#pd-head .pd-sum { font-size: 12px; font-weight: 600; margin-right: 4px; }
#pd-head .pd-sum.ok { color: #7fe6d4; } #pd-head .pd-sum.bad { color: #ff9db0; }
.pf-warn { color: #ff9db0; font-size: 12.5px; padding: 12px; }

/* ── Paneli i profileve (te vetitë) ── */
#hydro-profiles-host .pf-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#hydro-profiles-host input, #hydro-profiles-host select {
  background: #0e1117; border: 1px solid #2a3242; color: #e6e9ef; border-radius: 6px; padding: 5px 7px; font-size: 12.5px;
}
.pf-pickrow { display: flex; align-items: center; gap: 6px; }
.pf-pickrow label { width: 30px; color: #9aa2b2; font-size: 12px; }
.pf-pickrow select { flex: 1; }
.pf-pick { width: 30px; height: 28px; background: #1a2130; border: 1px solid #2a3242; color: #93a4c4; border-radius: 6px; cursor: pointer; }
.pf-pick:hover { color: #fff; } .pf-pick.arm { background: #12303f; border-color: #1f8a76; color: #7fe6d4; }
.pf-create { background: #153042; border: 1px solid #1f5468; color: #7fe6d4; border-radius: 7px; padding: 7px; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.pf-create:hover { background: #184559; }
.pf-msg { font-size: 11.5px; color: #ff9db0; }
.pf-empty { color: #6a7283; font-size: 12px; font-style: italic; padding: 4px 0; }
.pf-item { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 7px; margin-bottom: 5px; }
.pf-item .pf-ic { font-size: 13px; }
.pf-item .pf-nm { flex: 1; min-width: 0; }
.pf-item .pf-nm b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-item .pf-nm span { font-size: 10.5px; color: #6a7283; }
.pf-item button { background: #1a2130; border: 1px solid #2a3242; color: #c3cdde; border-radius: 6px; font-size: 11px; padding: 3px 9px; cursor: pointer; }
.pf-item button.pf-del { border: none; background: none; color: #ff7080; padding: 2px 4px; }

/* Tabela e stacioneve në pamjen e profilit */
.pf-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.pf-tbl th, .pf-tbl td { padding: 5px 9px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: right; color: #c3cdde; }
.pf-tbl th { color: #8a93a6; font-weight: 600; text-align: right; }
.pf-tbl th:first-child, .pf-tbl td:first-child { text-align: left; }
.pf-tbl tr.bad td { color: #ff9db0; }
.pf-tbl tr.ok td:last-child { color: #7fe6d4; }

/* Kontrolli i topografisë: buton i mbyllur që hapet anash */
.hydro-topoctl { position: relative; }
.hydro-topoctl a { width: 30px; height: 30px; line-height: 34px; text-align: center; display: block; color: #c3cdde; background: #141824; }
.hydro-topoctl a:hover { background: #1f2735; color: #fff; }
.hydro-topoctl.open a { color: #7fe6d4; background: #12303f; }
.hydro-topopanel {
  position: absolute; top: 0; right: 34px; width: 172px;
  background: #141824f2; border: 1px solid #2a3242; border-radius: 8px; padding: 8px 10px;
  color: #dbe3f0; font: 12px Inter, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* Shirit vertikal i mjeteve të modelimit — majtas, plot-lartësi */
#hydro-lefttools {
  flex: 0 0 auto; width: 48px; background: #0f131b; border-right: 1px solid #232a36;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0; overflow-y: auto;
}
#hydro-lefttools button {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; cursor: pointer;
  background: linear-gradient(160deg, #1e2636, #151a26); border: 1px solid #2b3648;
  color: #c3cdde; font-size: 17px; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .12s, border-color .12s, background .12s;
}
#hydro-lefttools button:hover {
  border-color: #3f6bb0; background: linear-gradient(160deg, #24324c, #182030); color: #fff;
  transform: translateY(-1px);
}
#hydro-lefttools button.active {
  border-color: #1f8a76; color: #cffaf0; background: linear-gradient(160deg, #123c3b, #0f2a2f);
  box-shadow: 0 0 0 1px rgba(52,224,176,.28);
}
.hydro-lt-sep { width: 28px; height: 1px; background: #2a3546; margin: 6px auto; flex: 0 0 auto; }
#hydro-lefttools button.view { color: #93a4c4; }
#hydro-lefttools button.view:hover { color: #fff; }

/* ═══════════════════ TEMË E ÇELËT (light) ═══════════════════ */
body { background: #eef2f7 !important; color: #1e293b !important; }
#sidebar { background: #ffffff !important; }
#map { background: #dfe4ea !important; }
.card, body.hydro-desktop #editor { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; }
h1, h2, h3, h4 { color: #1e293b !important; }
label { color: #475569 !important; }
.hint, .back-link { color: #64748b !important; }
.tool-btn { background: #f1f5f9 !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; }
.tool-btn:hover { background: #e5ebf2 !important; }
.tool-btn.active { background: #ccfbf1 !important; color: #0f766e !important; border-color: #5eead4 !important; }
select, input, textarea { background: #ffffff !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; }
table { color: #334155 !important; }
th { color: #64748b !important; border-color: #e2e8f0 !important; }
td { border-color: #e2e8f0 !important; }
th.hsc-hd { color: #ffffff !important; }   /* header me sfond të ngjyrosur (teal) → tekst i bardhë */
.wm-box { background: #ffffff !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 20px 50px rgba(15,23,42,.25) !important; }
.wm-box h3 { color: #1e293b !important; }
.wm-box th, .wm-box td { color: #334155 !important; border-color: #e2e8f0 !important; }
.wm-box select, .wm-box input, .wm-box input.wm-price { background: #ffffff !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; }
.wm-x { color: #64748b !important; }

/* Shtresa desktop */
#hydro-ribbon { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; }
.hydro-panel { border-right: 1px solid #eef2f7 !important; }
.hydro-ptitle { color: #64748b !important; }
.hydro-rbtn { color: #475569 !important; }
.hydro-rbtn .ic { background: linear-gradient(160deg, #f8fafc, #eef2f7) !important; border: 1px solid #e2e8f0 !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,23,42,.05) !important; }
.hydro-rbtn:hover { color: #1e293b !important; }
.hydro-rbtn:hover .ic { border-color: #93c5fd !important; background: linear-gradient(160deg, #eff6ff, #dbeafe) !important; }
.hydro-rbtn.active { color: #0f766e !important; }
.hydro-rbtn.active .ic { border-color: #14b8a6 !important; background: linear-gradient(160deg, #ccfbf1, #99f6e4) !important; color: #0f766e !important; box-shadow: 0 0 0 1px rgba(20,184,166,.3) !important; }

#hydro-lefttools { background: #ffffff !important; border-right: 1px solid #e2e8f0 !important; }
#hydro-lefttools button { background: linear-gradient(160deg, #f8fafc, #eef2f7) !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; box-shadow: none !important; }
#hydro-lefttools button:hover { border-color: #93c5fd !important; background: #eff6ff !important; color: #1e293b !important; }
#hydro-lefttools button.active { border-color: #14b8a6 !important; background: #ccfbf1 !important; color: #0f766e !important; box-shadow: 0 0 0 1px rgba(20,184,166,.25) !important; }
#hydro-lefttools button.view { color: #64748b !important; }
.hydro-lt-sep { background: #e2e8f0 !important; }

body.hydro-desktop #results { background: #ffffff !important; border-left: 1px solid #e2e8f0 !important; }
.hydro-prop-head { color: #64748b !important; border-bottom: 1px solid #e2e8f0 !important; }
.hydro-prop-empty { color: #64748b !important; }
.hydro-collap .hp-caret { color: #64748b !important; }
.hydro-collap:hover .hp-caret { color: #334155 !important; }
.hydro-props-ext { border-top: 1px solid #e2e8f0 !important; }
.hydro-props-ext .hp-title { color: #64748b !important; }
.hydro-props-ext .hp-row { border-bottom: 1px dashed #eef2f7 !important; }
.hydro-props-ext .hp-lb { color: #64748b !important; }
.hydro-props-ext .hp-val { color: #1e293b !important; }
.hydro-props-ext .hp-u { color: #64748b !important; }

#hydro-log { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; }
#hlog-head { color: #64748b !important; }
#hlog-clear { background: transparent !important; border: 1px solid #e2e8f0 !important; color: #64748b !important; }
#hlog-clear:hover { background: #eef2f7 !important; color: #1e293b !important; }
.hlog-row { border-bottom: 1px solid #eef2f7 !important; }
.hlog-row .hlog-tx { color: #334155 !important; }
.hlog-row .hlog-t { color: #64748b !important; }
#hlog-caret { color: #64748b !important; }

#hydro-profiledock { background: #ffffff !important; border-top: 2px solid #14b8a6 !important; }
#pd-head { color: #1e293b !important; border-bottom: 1px solid #e2e8f0 !important; }
#pd-head .pd-se { color: #64748b !important; }
#pd-head #pd-x { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #334155 !important; }
#pd-head #pd-x:hover { background: #e2e8f0 !important; color: #0f172a !important; }
#pd-head #pd-auto { background: #ccfbf1 !important; border: 1px solid #5eead4 !important; color: #0f766e !important; }
#pd-head #pd-auto:hover { background: #99f6e4 !important; }

#hydro-profiles-host input, #hydro-profiles-host select { background: #ffffff !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; }
.pf-pick { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #64748b !important; }
.pf-pick.arm { background: #ccfbf1 !important; border-color: #14b8a6 !important; color: #0f766e !important; }
.pf-create { background: #ccfbf1 !important; border: 1px solid #5eead4 !important; color: #0f766e !important; }
.pf-create:hover { background: #99f6e4 !important; }
.pf-empty { color: #64748b !important; }
.pf-item { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
.pf-item .pf-nm span { color: #64748b !important; }
.pf-item button { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #334155 !important; }
.pf-tbl th { color: #64748b !important; } .pf-tbl th, .pf-tbl td { border-bottom: 1px solid #e2e8f0 !important; color: #334155 !important; }

/* Kontrollet e topografisë/sfondit → njësoj si butonat e veglave (.amt-btn): tile 36px, radius 9, hije e butë */
body.hydro-desktop .hydro-topoctl { border: none !important; box-shadow: none !important; background: transparent !important; margin-bottom: 6px !important; }
body.hydro-desktop .hydro-topoctl a {
  width: 36px !important; height: 36px !important; line-height: 36px !important;
  background: #ffffff !important; color: #475569 !important;
  border: 1px solid #e2e8f0 !important; border-radius: 9px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.10) !important;
}
body.hydro-desktop .hydro-topoctl a:hover { background: #eff6ff !important; color: #1e293b !important; border-color: #93c5fd !important; }
body.hydro-desktop .hydro-topoctl.open a { background: #ccfbf1 !important; color: #0f766e !important; border-color: #5eead4 !important; }
.hydro-topopanel { background: #ffffffee !important; border: 1px solid #e2e8f0 !important; color: #334155 !important; box-shadow: 0 6px 18px rgba(15,23,42,.15) !important; }

/* Rregullim: sllajderi/kontrollet të mos dalin jashtë panelit (topo + sfond) */
.hydro-topopanel, .hydro-topopanel * { box-sizing: border-box !important; }
.hydro-topopanel { overflow: hidden !important; width: 210px !important; }
.hydro-topopanel input[type=range] { min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.hydro-topopanel > div, .hydro-topopanel label { max-width: 100% !important; }

/* Menaxheri i sfondeve (shumë shtresa + rirenditje) */
.hydro-bgpanel { width: 250px !important; max-height: 320px; overflow-y: auto !important; }
.hydro-bgempty { color: #64748b; font-size: 11.5px; padding: 4px 2px; }
.bgrow { border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 7px; margin-top: 7px; background: #f8fafc; }
.bgrow .bgtop { display: flex; align-items: center; gap: 4px; }
.bgrow .bgnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 11.5px; color: #1e293b; }
.bgrow .bgk { font-size: 9.5px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.bgrow button { background: #ffffff; border: 1px solid #e2e8f0; color: #475569; border-radius: 6px; width: 22px; height: 22px; line-height: 1; font-size: 12px; cursor: pointer; padding: 0; }
.bgrow button:hover:not(:disabled) { background: #eff6ff; color: #1e293b; }
.bgrow button:disabled { opacity: .35; cursor: default; }
.bgrow button.bgdel:hover { background: #fef2f2; color: #e11d48; border-color: #fecaca; }
.bgrow .bgoprow { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.bgrow .bgoprow span { font-size: 10px; color: #64748b; }

/* ── Kontrollet mbi hartë (Leaflet + veglat amt-) → temë e çelët ── */
body.hydro-desktop .amt-toolbar { color: #475569 !important; }
body.hydro-desktop .amt-btn {
  background: #ffffff !important; color: #475569 !important;
  border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,.10) !important;
}
body.hydro-desktop .amt-btn:hover { background: #eff6ff !important; color: #1e293b !important; border-color: #93c5fd !important; }
body.hydro-desktop .amt-btn.active, body.hydro-desktop .amt-btn.on {
  background: #ccfbf1 !important; color: #0f766e !important; border-color: #5eead4 !important;
}
body.hydro-desktop .amt-scale { color: #475569 !important; }
body.hydro-desktop .amt-scale .amt-scale-line, body.hydro-desktop .leaflet-control-scale-line {
  background: #ffffffcc !important; border-color: #64748b !important; color: #334155 !important;
}
body.hydro-desktop .leaflet-bar a, body.hydro-desktop .leaflet-control-zoom a {
  background: #ffffff !important; color: #475569 !important; border-bottom-color: #e2e8f0 !important;
}
body.hydro-desktop .leaflet-bar a:hover, body.hydro-desktop .leaflet-control-zoom a:hover { background: #eff6ff !important; color: #1e293b !important; }
body.hydro-desktop .leaflet-control-layers {
  background: #ffffff !important; color: #334155 !important;
  border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 14px rgba(15,23,42,.12) !important;
}
body.hydro-desktop .leaflet-control-layers-toggle { background-color: #ffffff !important; }
body.hydro-desktop .leaflet-control-layers-expanded { background: #ffffff !important; color: #334155 !important; }
body.hydro-desktop .leaflet-control-layers-list, body.hydro-desktop .leaflet-control-layers label { color: #334155 !important; border-color: #e2e8f0 !important; }
body.hydro-desktop .leaflet-control-layers-separator { border-top-color: #e2e8f0 !important; }
body.hydro-desktop .leaflet-popup-content-wrapper, body.hydro-desktop .leaflet-popup-tip {
  background: #ffffff !important; color: #1e293b !important; box-shadow: 0 6px 18px rgba(15,23,42,.15) !important;
}
body.hydro-desktop .leaflet-container a.leaflet-popup-close-button { color: #64748b !important; }

/* ── Shiriti i koordinatave + ikona e shtresave (Leaflet) → e çelët ── */
body.hydro-desktop .amt-coords {
  background: rgba(255,255,255,.94) !important; color: #334155 !important;
  border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 5px rgba(15,23,42,.12) !important;
}
body.hydro-desktop .amt-coords * { color: #334155 !important; }
body.hydro-desktop .amt-coords b, body.hydro-desktop .amt-coords strong { color: #0f766e !important; }
body.hydro-desktop .leaflet-control-layers-toggle,
body.hydro-desktop .leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("ic-layers.svg") !important;
  background-size: 22px 22px !important; background-position: center !important; background-repeat: no-repeat !important;
  width: 36px !important; height: 36px !important;
}

/* ── Vetitë e elementit (editor i app-it): rreshtat info-row të lexueshëm ── */
body.hydro-desktop .info-row { color: #64748b !important; }
body.hydro-desktop .info-row span:last-child { color: #1e293b !important; font-weight: 600 !important; }
body.hydro-desktop #editor label, body.hydro-desktop .form-group label { color: #475569 !important; }
body.hydro-desktop #editor .hint, body.hydro-desktop #editor .info-row .sub { color: #64748b !important; }

/* ── FlexTable (tabela e të dhënave e editueshme) ── */
.hflex-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; width: 1080px; max-width: 96vw; height: 82vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(15,23,42,.4); overflow: hidden; color: #1e293b; font: 13px Inter, sans-serif; }
.hflex-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid #e2e8f0; font-family: Sora, Inter, sans-serif; }
.hflex-head b { font-size: 14.5px; }
.hflex-head #hflex-x { margin-left: auto; background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; }
#hflex-host { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hflex-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.hflex-tabs button { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: 12.5px; cursor: pointer; margin-right: 4px; }
.hflex-tabs button.on { background: #ccfbf1; border-color: #5eead4; color: #0f766e; }
#hflex-q { padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; width: 170px; }
.hflex-bulk { margin-left: auto; display: flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 5px 8px; }
.hflex-bulk span { font-size: 11.5px; color: #64748b; font-weight: 600; }
.hflex-bulk select, .hflex-bulk input { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; }
.hflex-bulk #hflex-bv { width: 90px; }
.hflex-bulk #hflex-bapply { background: #ccfbf1; border: 1px solid #5eead4; color: #0f766e; font-weight: 600; cursor: pointer; }
.hflex-scroll { flex: 1; overflow: auto; min-height: 0; }
.hflex-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.hflex-tbl thead th { position: sticky; top: 0; background: #f8fafc; border-bottom: 2px solid #e2e8f0; padding: 8px 9px; text-align: left; font-weight: 700; color: #475569; white-space: nowrap; cursor: pointer; user-select: none; z-index: 1; }
.hflex-tbl thead th.srt { color: #0f766e; }
.hflex-tbl td { border-bottom: 1px solid #f1f5f9; padding: 3px 7px; color: #1e293b; white-space: nowrap; }
.hflex-tbl tbody tr:hover td { background: #f8fafc; }
.hflex-tbl td.hflex-ro { color: #334155; font-variant-numeric: tabular-nums; }
.hflex-tbl td.hflex-ck, .hflex-tbl th.hflex-ck { width: 26px; text-align: center; }
.hflex-tbl td input, .hflex-tbl td select { width: 100%; min-width: 62px; border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 3px 5px; font-size: 12.5px; color: #1e293b; }
.hflex-tbl td input:hover, .hflex-tbl td select:hover { border-color: #e2e8f0; }
.hflex-tbl td input:focus, .hflex-tbl td select:focus { border-color: #14b8a6; background: #fff; outline: none; }
.hflex-foot { padding: 8px 16px; border-top: 1px solid #eef2f7; font-size: 11.5px; color: #64748b; }
.hflex-empty { padding: 30px; text-align: center; color: #64748b; }

/* ── Shiriti i tabeve të ribbon-it (web) ── */
#hydro-tabs {
  display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto;
  background: #0b0e14; border-bottom: 1px solid #1c222d; padding: 0 8px; height: 34px;
}
#hydro-tabs .hydro-tab {
  background: transparent; border: none; color: #93a4c4;
  font: 600 12.5px Inter, system-ui, sans-serif; padding: 0 16px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .12s, border-color .12s, background .12s;
}
#hydro-tabs .hydro-tab:hover { color: #e8eaf0; background: #141a24; }
#hydro-tabs .hydro-tab.active { color: #2bb5ad; border-bottom-color: #2bb5ad; }

/* ── Shtylla AlbGIS majtas — mbetet prezent përkrah guaskës desktop ── */
body.hydro-desktop { padding-left: 208px !important; }
#albgis-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 208px; z-index: 60;
  background: #0b0e14; border-right: 1px solid #1c222d;
  display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; overflow-y: auto;
}
#albgis-sidebar .albgis-brand { display: flex; align-items: center; }
#albgis-sidebar .albgis-brand img { height: 26px; display: block; }
#albgis-sidebar #albgis-side-acct { display: flex; flex-direction: column; gap: 8px; }
#albgis-sidebar #albgis-account { padding: 0 !important; width: 100%; }

/* ═══════════════ MBISHKRIM DARK (paleta AlbGIS) — heq temën e çelët të desktop-it ═══════════════ */
body.hydro-desktop { background: #0e1016 !important; color: #e8eaf0 !important; }
body.hydro-desktop #sidebar { background: #12151c !important; }
body.hydro-desktop #map { background: #0e1016 !important; }
body.hydro-desktop .card, body.hydro-desktop #editor { background: #181b24 !important; border: 1px solid #232a36 !important; color: #e8eaf0 !important; }
body.hydro-desktop h1, body.hydro-desktop h2, body.hydro-desktop h3, body.hydro-desktop h4 { color: #eef1f7 !important; }
body.hydro-desktop label { color: #93a4c4 !important; }
body.hydro-desktop .hint, body.hydro-desktop .back-link { color: #6b7784 !important; }
body.hydro-desktop select, body.hydro-desktop input, body.hydro-desktop textarea { background: #0e1016 !important; color: #e8eaf0 !important; border: 1px solid #2a3242 !important; }
body.hydro-desktop .tool-btn { background: #1a1f2b !important; color: #cfd5e0 !important; border: 1px solid #2a3242 !important; }
body.hydro-desktop .tool-btn:hover { background: #222835 !important; }
body.hydro-desktop .tool-btn.active { background: #123c3b !important; color: #46c7bd !important; border-color: #2bb5ad !important; }
body.hydro-desktop table { color: #c4cad6 !important; }
body.hydro-desktop th { color: #93a4c4 !important; border-color: #232a36 !important; }
body.hydro-desktop td { border-color: #232a36 !important; }
body.hydro-desktop #hydro-ribbon { background: #0f131b !important; border-bottom: 1px solid #232a36 !important; }
body.hydro-desktop .hydro-panel { border-right: 1px solid #1c222d !important; }
body.hydro-desktop .hydro-ptitle { color: #93a4c4 !important; }
body.hydro-desktop .hydro-rbtn { color: #cfd5e0 !important; }
body.hydro-desktop .hydro-rbtn .ic { background: linear-gradient(160deg,#1e2636,#151a26) !important; border: 1px solid #2a3242 !important; box-shadow: none !important; }
body.hydro-desktop .hydro-rbtn:hover { color: #fff !important; }
body.hydro-desktop .hydro-rbtn:hover .ic { border-color: #3f6bb0 !important; background: linear-gradient(160deg,#24324c,#182030) !important; }
body.hydro-desktop .hydro-rbtn.active { color: #46c7bd !important; }
body.hydro-desktop .hydro-rbtn.active .ic { border-color: #2bb5ad !important; background: linear-gradient(160deg,#123c3b,#0f2a2f) !important; color: #46c7bd !important; box-shadow: 0 0 0 1px rgba(43,181,173,.3) !important; }
body.hydro-desktop #hydro-lefttools { background: #0d1017 !important; border-right: 1px solid #232a36 !important; }
body.hydro-desktop #hydro-lefttools button { background: linear-gradient(160deg,#1e2636,#151a26) !important; border: 1px solid #2a3242 !important; color: #93a4c4 !important; box-shadow: none !important; }
body.hydro-desktop #hydro-lefttools button:hover { border-color: #3f6bb0 !important; background: #182030 !important; color: #fff !important; }
body.hydro-desktop #hydro-lefttools button.active { border-color: #2bb5ad !important; background: #123c3b !important; color: #46c7bd !important; }
body.hydro-desktop #hydro-lefttools button.view { color: #93a4c4 !important; }
body.hydro-desktop #results { background: #12151c !important; border-left: 1px solid #232a36 !important; }
body.hydro-desktop .hydro-prop-head, body.hydro-desktop .hydro-prop-empty, body.hydro-desktop .hydro-props-ext .hp-title, body.hydro-desktop .hp-lb, body.hydro-desktop .hp-u { color: #93a4c4 !important; }
body.hydro-desktop .hp-val { color: #e8eaf0 !important; }
body.hydro-desktop #hydro-log { background: #0d1017 !important; border-top: 1px solid #232a36 !important; }
body.hydro-desktop .hlog-row .hlog-tx { color: #c4cad6 !important; }
body.hydro-desktop .hlog-row .hlog-t, body.hydro-desktop #hlog-head, body.hydro-desktop #hlog-caret { color: #93a4c4 !important; }
body.hydro-desktop #hydro-profiledock { background: #12151c !important; border-top: 2px solid #2bb5ad !important; }
body.hydro-desktop #pd-head { color: #eef1f7 !important; border-bottom: 1px solid #232a36 !important; }
body.hydro-desktop .hflex-tbl thead th { background: #12151c !important; border-bottom: 2px solid #232a36 !important; color: #93a4c4 !important; }
body.hydro-desktop .hflex-tbl td { border-bottom: 1px solid #1c222d !important; color: #e8eaf0 !important; }
body.hydro-desktop .hflex-tbl tbody tr:hover td { background: #181b24 !important; }
body.hydro-desktop .hflex-tabs button { background: #1a1f2b !important; border: 1px solid #2a3242 !important; color: #cfd5e0 !important; }
body.hydro-desktop .hflex-tabs button.on { background: #123c3b !important; border-color: #2bb5ad !important; color: #46c7bd !important; }
body.hydro-desktop #hflex-q, body.hydro-desktop .hflex-bulk select, body.hydro-desktop .hflex-bulk input { background: #0e1016 !important; border: 1px solid #2a3242 !important; color: #e8eaf0 !important; }
body.hydro-desktop .hflex-bulk { background: #12151c !important; border: 1px solid #232a36 !important; }
body.hydro-desktop .hflex-head, body.hydro-desktop .hflex-foot, body.hydro-desktop .hflex-empty, body.hydro-desktop .hflex-bulk span { color: #93a4c4 !important; }
body.hydro-desktop .bgrow { background: #12151c !important; border: 1px solid #232a36 !important; }
body.hydro-desktop .bgrow .bgnm { color: #e8eaf0 !important; }
body.hydro-desktop .bgrow .bgk, body.hydro-desktop .hydro-bgempty { color: #93a4c4 !important; }
body.hydro-desktop .bgrow button { background: #1a1f2b !important; border: 1px solid #2a3242 !important; color: #93a4c4 !important; }
body.hydro-desktop .wm-box { background: #181b24 !important; color: #e8eaf0 !important; border: 1px solid #232a36 !important; }
body.hydro-desktop .wm-box h3 { color: #eef1f7 !important; }
body.hydro-desktop .wm-box th, body.hydro-desktop .wm-box td { color: #c4cad6 !important; border-color: #232a36 !important; }
body.hydro-desktop .wm-box select, body.hydro-desktop .wm-box input, body.hydro-desktop .wm-box input.wm-price { background: #0e1016 !important; color: #e8eaf0 !important; border: 1px solid #2a3242 !important; }

/* ═══ Popup-et e moduleve (.hydro-ov: skenarë, fire-flow, topo, help, flextable, background) → dark ═══ */
body.hydro-desktop .hydro-ov { color: #e8eaf0 !important; }
body.hydro-desktop .hydro-ov [style*="background:#fff"],
body.hydro-desktop .hydro-ov [style*="background:#ffffff"] { background: #181b24 !important; }
body.hydro-desktop .hydro-ov [style*="background:#f8fafc"],
body.hydro-desktop .hydro-ov [style*="background:#f1f5f9"],
body.hydro-desktop .hydro-ov [style*="background:#eff6ff"] { background: #12151c !important; }
body.hydro-desktop .hydro-ov [style*="background:#f0fdfa"],
body.hydro-desktop .hydro-ov [style*="background:#ccfbf1"] { background: #123c3b !important; }
body.hydro-desktop .hydro-ov [style*="color:#1e293b"],
body.hydro-desktop .hydro-ov [style*="color:#0f172a"] { color: #eef1f7 !important; }
body.hydro-desktop .hydro-ov [style*="color:#334155"],
body.hydro-desktop .hydro-ov [style*="color:#475569"] { color: #c4cad6 !important; }
body.hydro-desktop .hydro-ov [style*="color:#64748b"] { color: #93a4c4 !important; }
body.hydro-desktop .hydro-ov [style*="color:#0f766e"] { color: #46c7bd !important; }
body.hydro-desktop .hydro-ov [style*="#e2e8f0"] { border-color: #232a36 !important; }
body.hydro-desktop .hydro-ov [style*="#cbd5e1"] { border-color: #2a3242 !important; }
body.hydro-desktop .hydro-ov [style*="#5eead4"],
body.hydro-desktop .hydro-ov [style*="#14b8a6"] { border-color: #2bb5ad !important; }
body.hydro-desktop .hydro-ov input, body.hydro-desktop .hydro-ov select, body.hydro-desktop .hydro-ov textarea { background: #0e1016 !important; color: #e8eaf0 !important; border: 1px solid #2a3242 !important; }
body.hydro-desktop .hydro-ov table, body.hydro-desktop .hydro-ov th, body.hydro-desktop .hydro-ov td { color: #c4cad6 !important; border-color: #232a36 !important; }

/* panele lundruese që mbetën të bardha në bazë */
body.hydro-desktop #hydro-proflist { background: #12151c !important; border: 1px solid #232a36 !important; }
body.hydro-desktop #hydro-profiles-host input, body.hydro-desktop #hydro-profiles-host select { background: #0e1016 !important; color: #e8eaf0 !important; border: 1px solid #2a3242 !important; }
body.hydro-desktop #hydro-results-holder { background: #12151c !important; color: #e8eaf0 !important; }
body.hydro-desktop .pf-item { background: #181b24 !important; border-color: #232a36 !important; }
body.hydro-desktop .pf-tbl th, body.hydro-desktop .pf-tbl td { color: #c4cad6 !important; border-color: #232a36 !important; }