*{box-sizing:border-box}
:root{
  --line:#1c3960;
  --line-soft:#17314f;
  --text:#e4efff;
  --muted:#97aecb;
  --bg1:#010916;
  --bg2:#041326;
  --panel1:#081a31;
  --panel2:#0a1f3b;
  --blue:#2d7eff;
  --blue-soft:#0f3560;
  --brand-huner:#e30613;
  --brand-huner-soft:rgba(227,6,19,.12);
}
body{
  margin:0;
  color:var(--text);
  font-family:Segoe UI,Tahoma,sans-serif;
  background:
    radial-gradient(circle at 8% 0%, #0f2c4f 0, transparent 28%),
    radial-gradient(circle at 92% 8%, #112d52 0, transparent 25%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #020b19);
}
.layout{
  display:grid;grid-template-columns:280px 1fr;gap:12px;padding:10px;
  min-height:100vh;overflow-x:hidden;
}
.sidebar,.panel,.topbar{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  /* Geniş yayılımlı gölge + backdrop-filter kaydırmada bileşik maliyeti artırır; burada sade tutuldu. */
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.sidebar{
  border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;
  min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  contain:layout;
}
.brand-block{
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:14px 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(8,26,49,.92));
  text-align:center;
}
.brand-mark{
  display:block;line-height:0;text-decoration:none;border-radius:8px;
  outline-offset:3px;
}
.brand-mark:focus-visible{outline:2px solid var(--brand-huner)}
.brand-logo-img{
  width:100%;max-width:210px;height:auto;display:block;margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.brand-sub{
  margin:10px 0 0;font-size:11px;font-weight:600;color:#9eb6d8;
  letter-spacing:.22em;text-transform:uppercase;
}
.sidebar h2{margin:8px 0 0;font-size:12px;color:#c8d8f4;text-transform:uppercase;letter-spacing:.08em}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{
  border:1px solid rgba(80,117,168,.18);border-radius:12px;padding:12px 12px 12px 10px;margin-bottom:10px;cursor:pointer;
  background:linear-gradient(180deg,rgba(8,23,44,.88),rgba(7,18,34,.98));font-size:13px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;transition:.2s,box-shadow .2s;
}
.country-flag{
  width:24px;
  height:16px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.16);
  flex:0 0 auto;
}
.country-summary-row{
  display:flex;align-items:center;gap:8px;min-width:0;
}
.country-code{
  display:inline-flex;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#d6e9ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);letter-spacing:.12em;text-transform:uppercase;
}
.country-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
  color:#eff8ff;
}
.sidebar li:hover{border-color:#4e7fbe;box-shadow:0 8px 20px rgba(0,0,0,.18);transform:translateX(1px)}
.sidebar li.active{background:linear-gradient(180deg,#10345a,#081c32);border-color:#5895f2;box-shadow:0 0 0 2px rgba(84,144,255,.14)}
.sidebar label{font-size:12px;color:var(--muted)}
.country-summary{
  margin:16px 0 0;
  padding:14px 14px 12px;
  border:1px solid rgba(83,123,171,.18);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(8,20,42,.85),rgba(5,13,24,.96));
}
.country-summary-header{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;
}
.country-summary-label{font-size:11px;color:#8db5dc;text-transform:uppercase;letter-spacing:.16em;}
.country-summary-key{
  font-size:12px;font-weight:700;color:#cbdcff;background:rgba(255,255,255,.05);padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
}
.country-summary-metric{font-size:13px;font-weight:700;color:#eef6ff;margin-bottom:10px;line-height:1.4;}
.country-summary-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.country-summary-column{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.country-summary-column span{display:block;font-size:10px;color:#9ab7d6;margin-bottom:4px;text-transform:uppercase;letter-spacing:.12em;}
.country-summary-column strong{display:block;font-size:16px;color:#f8fcff;font-weight:800;}
.country-search{
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(83,123,171,.22);
  display:flex;flex-direction:column;gap:6px;
}
.country-search-label{
  font-size:11px;color:#8db5dc;text-transform:uppercase;letter-spacing:.12em;
}
.country-search-input{
  width:100%;box-sizing:border-box;padding:9px 10px;border-radius:10px;
  border:1px solid rgba(98,152,225,.35);background:rgba(4,14,28,.9);color:#f0f7ff;
  font-size:13px;outline:none;
}
.country-search-input::placeholder{color:#6b8aaf}
.country-search-input:focus{border-color:#4fd2ff;box-shadow:0 0 0 1px rgba(79,210,255,.25)}
.country-search-results{
  list-style:none;margin:0;padding:0;max-height:min(220px,38vh);overflow-y:auto;
  border-radius:10px;border:1px solid rgba(83,123,171,.28);
  background:rgba(3,12,24,.95);
}
.country-search-results:not([hidden]){margin-top:2px}
.country-search-hit{
  padding:8px 10px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:2px;text-align:left;
}
.country-search-hit:last-child{border-bottom:none}
.country-search-hit:hover,.country-search-hit:focus{
  background:rgba(45,126,255,.14);outline:none;
}
.country-search-hit-city{font-size:13px;font-weight:600;color:#eef6ff}
.country-search-hit-meta{font-size:11px;color:#8fb0d4}
.country-search-hint{
  margin:0;font-size:11px;color:#7a96c4;line-height:1.35;
}

.legend-list li{display:flex;align-items:center;gap:8px;color:#c2d4ef;font-size:12px;padding:4px 0}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.status-open{background:#22c55e}
.status-planned{background:#fbbf24}
.status-delivered{background:#a855f7}
.status-problem{background:#ef4444}
.status-closed{background:#8b9cb5}
.main{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.topbar{border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.headings{min-width:240px}
.headings--hero{
  display:flex;align-items:center;gap:14px;min-width:0;flex:1;
}
.headings-icon{
  flex-shrink:0;width:48px;height:48px;display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(91,163,255,.22),rgba(18,48,88,.48));
  border:1px solid rgba(110,184,255,.34);
  color:#a8d9ff;
  box-shadow:0 4px 16px rgba(0,14,32,.42);
}
.headings-icon svg{width:26px;height:26px;display:block}
.headings-text{min-width:0}
.brand{
  font-size:24px;font-weight:900;line-height:1.1;letter-spacing:.02em;margin:0;
}
.subtitle{
  font-size:12px;color:#91acd0;text-transform:uppercase;letter-spacing:.06em;margin:4px 0 0;
  display:flex;align-items:center;gap:8px;line-height:1.35;
}
.subtitle-icon{display:inline-flex;color:#72b5ea;flex-shrink:0;opacity:.92}
.subtitle-icon svg{width:15px;height:15px;display:block}
.filters{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:10px 12px;
  background:linear-gradient(165deg,rgba(12,38,72,.65),rgba(6,18,38,.45));
  border-radius:12px;
  border:1px solid rgba(80,140,210,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 18px rgba(0,8,24,.25);
  color-scheme:dark;
}
.field-wrap{display:grid;gap:5px;min-width:0}
.field-wrap-label{
  font-size:10px;font-weight:700;color:#8eb4dc;text-transform:uppercase;letter-spacing:.12em;
  padding-left:2px;
}
.field-wrap--week .field-wrap-label{color:#7dd3fc}
.field-wrap--year .field-wrap-label{color:#a5d4b8}
.field-wrap--mode .field-wrap-label{color:#fcd34d}
.filter-select{
  appearance:none;-webkit-appearance:none;
  margin:0;
  color-scheme:dark;
  background-image:
    linear-gradient(168deg,rgba(32,88,150,.42),rgba(8,26,52,.92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ec5ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,right 10px center;
  background-size:auto,14px;
  border:1px solid rgba(100,165,230,.38);
  border-radius:10px;
  color:#f0f7ff;
  padding:9px 34px 9px 12px;
  min-width:104px;
  font-size:13px;font-weight:600;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 8px rgba(0,12,28,.2);
  transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
/* Açılır liste (özellikle Windows/Chrome): beyaz zemin + açık metin = görünmez; koyu liste + okunur metin */
.filter-select option,
.filter-select optgroup{
  background-color:#0c1f36;
  color:#e8f4ff;
  font-weight:600;
}
.filter-select option:checked,
.filter-select option:hover{
  background-color:#1e4a7a;
  color:#fff;
}
.filter-select:hover{
  border-color:rgba(130,195,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 12px rgba(30,100,180,.2);
}
.filter-select:focus{
  outline:none;
  border-color:rgba(96,165,250,.75);
  box-shadow:0 0 0 3px rgba(59,130,246,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.field-wrap--week .filter-select{
  border-color:rgba(125,211,252,.35);
  background-image:linear-gradient(168deg,rgba(25,100,140,.4),rgba(8,28,55,.92)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field-wrap--year .filter-select{
  border-color:rgba(134,211,166,.35);
  background-image:linear-gradient(168deg,rgba(30,110,85,.35),rgba(8,32,48,.92)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5d4b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field-wrap--mode .filter-select,.filter-select--mode{
  border-color:rgba(252,211,77,.38);
  background-image:linear-gradient(168deg,rgba(120,90,30,.32),rgba(28,24,12,.9)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.top-nav-link{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;
  box-shadow:0 2px 10px rgba(0,10,28,.35);
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
}
.top-nav-link-icon{display:inline-flex;opacity:.95}
.top-nav-link-icon svg{width:17px;height:17px;display:block}
.top-nav-link:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 4px 16px rgba(0,12,40,.4);
}
.top-nav-link:active{transform:translateY(0);filter:brightness(.98)}
.top-nav-link--reports{
  color:#dbeafe;
  background:linear-gradient(165deg,rgba(37,99,235,.45),rgba(15,40,82,.88));
  border-color:rgba(96,165,250,.45);
}
.top-nav-link--reports:hover{border-color:rgba(147,197,253,.65)}
.top-nav-link--users{
  color:#d1fae5;
  background:linear-gradient(165deg,rgba(16,120,90,.42),rgba(12,42,38,.88));
  border-color:rgba(52,211,153,.4);
}
.top-nav-link--users:hover{border-color:rgba(110,231,183,.55)}
.top-nav-link--settings{
  color:#fef3c7;
  background:linear-gradient(165deg,rgba(180,120,40,.38),rgba(40,32,12,.88));
  border-color:rgba(251,191,36,.42);
}
.top-nav-link--settings:hover{border-color:rgba(252,211,77,.6)}
.top-nav-link--logout{
  color:#fecaca;
  background:linear-gradient(165deg,rgba(180,50,55,.4),rgba(48,16,22,.88));
  border-color:rgba(248,113,113,.45);
}
.top-nav-link--logout:hover{border-color:rgba(252,165,165,.65)}
.ghost-btn,.primary-btn{
  text-decoration:none;color:#d8e6fb;border:1px solid #33587f;border-radius:8px;padding:8px 12px;background:#0a1f3a;cursor:pointer
}
.ghost-btn:hover{border-color:#4c7fbc;box-shadow:0 0 0 1px rgba(103,163,255,.25) inset}
.primary-btn{background:linear-gradient(180deg,#2d7eff,#1f63cf);border-color:#428eff;color:#fff}
.ghost-btn.small{padding:6px 10px;font-size:12px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;min-width:0;align-items:start}
/* Ülke yok: sağ “Bölge Detayı” yok; harita tek sütun, daha yüksek clamp */
.content-grid.content-grid--no-country{
  grid-template-columns:minmax(0,1fr);
}
.content-grid.content-grid--no-country .detail-panel{
  display:none;
}
.content-grid.content-grid--no-country .map-wrapper{
  height:clamp(520px,min(78vh,calc(100vh - 200px)),960px);
}
.panel{border-radius:12px;padding:12px;min-width:0}
.panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.panel h3{margin:0;font-size:26px;font-weight:800}
.panel-heading{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.panel-heading-label{min-width:0}
.panel-heading-icon{
  flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(160deg,rgba(75,140,220,.16),rgba(10,32,58,.52));
  border:1px solid rgba(90,155,230,.24);
  color:#8ec8f5;
}
.panel-heading-icon svg{width:20px;height:20px;display:block}
.panel-heading-icon--map{color:#f87171}
.panel-heading-icon--detail{color:#7dd3fc}
.panel-heading-icon--table{color:#c4b5fd}
.map-wrapper{
  position:relative;
  height:clamp(460px,62vh,820px);
  min-height:0;
  border:1px solid #295282;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px 24px rgba(0,0,0,.35);
  background:radial-gradient(circle at 50% 18%,#15385f,#0a203a 50%,#07182d);
  touch-action:none;
  cursor:default;
}
.map-wrapper.map-pannable{cursor:grab}
.map-wrapper.map-grabbing{cursor:grabbing}
.map-wrapper--globe::before{opacity:0.42}
.globe-inline-host{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,#0a1f38,#040a14 75%);
}
/* display:flex, [hidden] tek başına display:none'u ezer; ülke seçilince 2D harita görünsün */
.globe-inline-host[hidden]{display:none !important}
.globe-inline-canvas{
  flex:1;min-height:200px;width:100%;height:100%;display:block;touch-action:none;cursor:grab;
}
.globe-inline-overlay{
  pointer-events:none;flex-shrink:0;padding:10px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(2,8,18,.88));
  border-top:1px solid rgba(79,210,255,.12);
}
.globe-inline-title{margin:0;font-size:13px;font-weight:800;color:#cfe6ff;letter-spacing:.04em}
.globe-inline-hint{margin:4px 0 0;font-size:11px;color:#8aa7c8;line-height:1.35}
.map-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
  transform-origin:center center;
  will-change:transform;
}
.map-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(transparent 96%, rgba(147,193,255,.08) 100%),
    linear-gradient(90deg, transparent 96%, rgba(147,193,255,.08) 100%);
  background-size: 60px 60px, 60px 60px;
  pointer-events:none;
}
.map-svg-host{
  width:100%;
  height:100%;
  padding:12px;
  box-sizing:border-box;
  display:block;
  min-height:0;
}
.map-svg-host svg.map-inline-svg{
  width:100%;
  height:100%;
  display:block;
  shape-rendering:geometricPrecision;
}
.map-svg-error{margin:0;padding:12px;font-size:13px;color:#9ec5ea}
.region-grid{
  position:absolute;inset:12px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:4px;pointer-events:none
}
.region-grid button{
  pointer-events:auto;border:1px dashed rgba(189,219,255,.4);background:rgba(19,47,77,.25);
  color:#c8dcf9;border-radius:8px;font-size:11px;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.7);
  transition:all .18s ease;
}
.region-grid button:hover{border-color:#7ac8ff;background:rgba(45,122,187,.38)}
.region-grid button.active{border-style:solid;border-color:#6ed3ff;background:rgba(40,122,188,.48);box-shadow:0 0 0 1px rgba(110,211,255,.28) inset}
.region-grid.hidden{display:none}
.map-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px;padding:8px 10px;
  font-size:11px;color:#9bb7dc;border:1px solid rgba(41,82,130,.65);border-radius:8px;
  background:linear-gradient(180deg,rgba(12,32,52,.55),rgba(8,24,42,.35))
}
.map-legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.map-legend-swatch{width:14px;height:10px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,.12)}
.map-legend-swatch.swatch-sea{background:linear-gradient(135deg,#0c2844,#1a4a6e 55%,#0a2038)}
.map-legend-swatch.swatch-land{background:linear-gradient(135deg,#1e4a72,#2a6a9a 50%,#1a3d5c)}
.map-legend-hint{flex:1 1 200px;min-width:0;color:#7a96c0;line-height:1.35}
.map-data-layer{
  position:absolute;
  inset:12px;
  z-index:6;
  pointer-events:none;
  display:none;
}
.map-data-layer.visible{display:block}
.map-route-layer{
  position:absolute;
  inset:12px;
  z-index:4;
  pointer-events:none;
  overflow:visible;
  width:auto;
  height:auto;
}
.map-route-path{
  fill:none;
  stroke:rgba(59,176,255,.92);
  stroke-width:2px;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* SVG filter: drop-shadow GPU’da pahalı; ince glow yeterli. */
  filter:drop-shadow(0 0 4px rgba(59,176,255,.35));
  will-change:auto;
}
.map-route-path.map-route-path--draw{
  stroke-dasharray:var(--route-len, 1000);
  stroke-dashoffset:var(--route-len, 1000);
  animation:map-route-draw-line 1.55s cubic-bezier(0.22,1,0.36,1) forwards;
  will-change:stroke-dashoffset;
}
@keyframes map-route-draw-line{
  to{stroke-dashoffset:0}
}
.map-route-stop{
  opacity:0;
  animation:map-route-stop-in 0.38s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes map-route-stop-in{
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .map-route-path.map-route-path--draw{
    animation:none;
    stroke-dasharray:none;
    stroke-dashoffset:0;
    will-change:auto;
  }
  .map-route-stop{
    animation:none;
    opacity:1;
  }
}
.map-route-hub,
.map-route-node{
  vector-effect:non-scaling-stroke;
  fill:#72d7ff;
  stroke:#e7fbff;
  stroke-width:.2;
}
.map-route-hub{fill:#35aaff;stroke-width:1;}
.map-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:6px;
  pointer-events:auto;
  z-index:5;
}
.map-marker:hover{
  box-shadow:0 0 0 2px rgba(47,168,255,.2);
}
.map-marker .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7de3ff;
  border:1px solid rgba(125,227,255,.65);
  box-shadow:0 0 18px rgba(125,227,255,.35);
  transition:transform .18s ease,box-shadow .18s ease;
  transform-origin:center center;
}
.map-marker--dot-only{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
}
.map-marker--dot-only .dot{width:12px;height:12px}
.map-marker--dot-only:hover .dot{
  transform:scale(1.1);
  box-shadow:0 0 18px rgba(125,227,255,.6);
}
.map-marker--labeled{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  max-width:min(160px,30vw);
  cursor:pointer;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(4,18,36,.88);
  border:1px solid rgba(98,152,225,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:box-shadow .18s ease,transform .18s ease;
}
.map-marker--labeled:hover{
  box-shadow:0 0 0 2px rgba(47,168,255,.24),0 16px 26px rgba(0,0,0,.34);
}
.map-marker-labels{
  display:flex;
  flex-direction:column;
  gap:2px;
  pointer-events:none;
}
.map-marker-text{
  font-size:11px;
  font-weight:700;
  color:#eef7ff;
  line-height:1.2;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}
.map-marker-text--city{font-size:12px;color:#ffffff;}
.map-marker-text--postal{font-size:10px;color:#98c5ff;}
.map-city-pin-layer{
  position:absolute;
  inset:12px;
  z-index:8;
  pointer-events:none;
}
.map-city-pin{
  position:absolute;
  transform:translate(-50%,-100%);
  margin-top:-4px;
}
.map-city-pin-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.42));
  animation:map-city-pin-reveal 0.48s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes map-city-pin-reveal{
  from{
    opacity:0;
    transform:translateY(12px) scale(0.92);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
.map-city-pin-card{
  order:0;
  max-width:min(200px,42vw);
  padding:8px 11px 9px;
  border-radius:12px;
  background:linear-gradient(165deg,rgba(14,36,62,.97),rgba(6,18,34,.98));
  border:1px solid rgba(120,182,255,.38);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset,0 4px 20px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:center;
}
.map-city-pin-name{
  font-size:13px;
  font-weight:800;
  color:#f4f9ff;
  letter-spacing:.02em;
  line-height:1.25;
}
.map-city-pin-postal{
  font-size:11px;
  font-weight:700;
  color:#7dd3fc;
  letter-spacing:.04em;
}
.map-city-pin-region{
  font-size:9px;
  font-weight:600;
  color:#8aa8cc;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.map-city-pin-marker{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:-1px;
}
.map-city-pin-dot{
  width:15px;
  height:15px;
  border-radius:50%;
  background:linear-gradient(160deg,#ff8a8a,#c41e1e);
  border:2.5px solid #fff;
  box-shadow:0 2px 14px rgba(196,30,30,.55);
  animation:map-city-pin-pulse 2.4s ease-in-out infinite;
  z-index:1;
}
@keyframes map-city-pin-pulse{
  0%,100%{box-shadow:0 2px 14px rgba(196,30,30,.5);}
  50%{box-shadow:0 2px 22px rgba(255,120,120,.65);}
}
.map-city-pin-needle{
  width:0;
  height:0;
  margin-top:-3px;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:11px solid #b91c1c;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
@media (prefers-reduced-motion:reduce){
  .map-city-pin-inner{animation:none;opacity:1;transform:none}
  .map-city-pin-dot{animation:none}
}
.map-marker--cluster{
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:6;
}
.map-marker-cluster-bubble{
  min-width:26px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#061525;
  background:linear-gradient(165deg,#b8f0ff,#4ab8f0);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);
}
.map-marker--cluster:hover .map-marker-cluster-bubble{
  filter:brightness(1.06);
  box-shadow:0 0 0 2px rgba(79,210,255,.35),0 6px 18px rgba(0,0,0,.4);
}
.map-cluster-flyout{
  position:absolute;
  z-index:25;
  transform:translate(-50%,12px);
  min-width:min(240px,72vw);
  max-height:min(240px,42vh);
  overflow-x:hidden;
  overflow-y:auto;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(98,152,225,.5);
  background:rgba(5,16,32,.97);
  box-shadow:0 14px 36px rgba(0,0,0,.5);
  pointer-events:auto;
}
.map-cluster-flyout-title{
  font-size:11px;
  font-weight:700;
  color:#8fb8e8;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.map-cluster-flyout-item{
  display:block;
  width:100%;
  margin:0 0 4px;
  padding:8px 10px;
  text-align:left;
  font-size:11px;
  line-height:1.35;
  color:#e8f4ff;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.map-cluster-flyout-item:hover{
  border-color:rgba(79,210,255,.35);
  background:rgba(45,126,255,.18);
}
.map-cluster-flyout-more{
  margin-top:6px;
  padding:6px 8px;
  font-size:10px;
  color:#7a9cc4;
  line-height:1.35;
  border-top:1px solid rgba(255,255,255,.06);
}
.detail-city-strip{
  margin:8px 0 10px;
  padding:10px 12px;
  border:1px solid #2a5a8a;
  border-radius:10px;
  background:linear-gradient(135deg,#0d2848,#0a1f38);
}
.detail-city-name{
  font-size:18px;
  font-weight:800;
  color:#e8f4ff;
  letter-spacing:.02em;
}
.detail-city-postal{
  margin-top:4px;
  font-size:12px;
  color:#9ec5ea;
}
.globe-dialog{
  border:1px solid #2d537f;border-radius:14px;background:#050d1a;color:#e3efff;
  padding:0;width:min(960px,96vw);max-height:96vh;
}
.globe-dialog::backdrop{background:rgba(2,8,20,.78)}
.globe-dialog-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:14px 16px;border-bottom:1px solid #1e3f63;
}
.globe-dialog-head h3{margin:0;font-size:18px}
.globe-hint{margin:6px 0 0;font-size:12px;color:#8fb0d4;max-width:520px}
#globeCanvas{
  display:block;width:100%;height:min(520px,60vh);
  background:radial-gradient(ellipse at center,#0a1f38 0%,#020812 100%);
}
.map-actions{display:flex;justify-content:flex-start;margin-top:8px}
.detail-panel{display:grid;grid-template-rows:auto 1fr auto;gap:8px}
.detail-head{padding:8px;border:1px solid #204162;border-radius:8px;background:#0b2240}
.detail-region{font-size:30px;font-weight:800}
.detail-meta{font-size:12px;color:#9cb4d2;margin-top:2px}
.metric-list{display:grid;gap:6px}
.metric-row{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  border:1px solid #204162;background:#0b2240;border-radius:8px;padding:8px;font-size:13px
}
.metric-label{color:#bdd2ee}
.metric-value{font-weight:700}
.metric-progress{height:8px;border-radius:999px;background:#14325a;overflow:hidden}
.metric-progress > span{display:block;height:100%;background:linear-gradient(90deg,#1ec9ff,#36e899)}
.status-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.status-pill.status-open{background:#123e24;color:#7ff2a6}
.status-pill.status-planned{background:#513f0e;color:#ffd88c}
.status-pill.status-delivered{background:#402052;color:#d8a8ff}
.status-pill.status-problem{background:#5a1f20;color:#ffb5b5}
.status-pill.status-closed{background:#2f3d52;color:#c4d0de}
.notes-box{border:1px solid #204162;background:#0b2240;border-radius:8px;padding:8px;min-height:72px;font-size:13px;color:#cbdcf3}
.empty-note{display:grid;place-items:center;height:100%;color:#8aa4c5;border:1px dashed #2b4f77;border-radius:8px}
.table-panel #summaryTable{
  overflow:auto;
  border:1px solid #1f436c;border-radius:8px;padding:12px;
  background:linear-gradient(180deg,#071528,#0a1a2e);
  -webkit-overflow-scrolling:touch;
  contain:layout;
}
.summary-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;padding:0 4px}
.summary-legend-item{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:600}
.summary-legend-item .summary-chip-icon{flex-shrink:0;opacity:.95}
.summary-legend-item.status-open{color:#86efac;border-color:rgba(34,197,94,.35)}
.summary-legend-item.status-planned{color:#fde68a;border-color:rgba(251,191,36,.35)}
.summary-legend-item.status-delivered{color:#e9d5ff;border-color:rgba(168,85,247,.35)}
.summary-legend-item.status-problem{color:#fecaca;border-color:rgba(239,68,68,.35)}
.summary-legend-item.status-closed{color:#cbd5e1;border-color:rgba(139,156,181,.28)}
.summary-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;font-variant-numeric:tabular-nums}
.summary-table caption{caption-side:top;text-align:left;padding-bottom:10px;font-size:14px;font-weight:700;color:#dbe8ff}
.summary-table thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#0f2b51,#08152a);
  color:#d8e6ff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);padding:10px 8px;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.summary-table tbody tr{border-bottom:1px solid rgba(255,255,255,.05)}
.summary-table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)}
.summary-table tbody tr:hover{background:rgba(255,255,255,.05)}
.summary-table th,.summary-table td{border-right:1px solid #1f4268;border-bottom:1px solid #1f4268;padding:10px 6px;text-align:center;font-size:12px}
.summary-table th{background:linear-gradient(180deg,#153861,#0f2746);font-weight:700}
.summary-table tr:first-child th{border-top:1px solid #1f4268}
.summary-table th:first-child,.summary-table td:first-child{border-left:1px solid #1f4268;text-align:left;padding-left:10px}
.summary-table td:first-child{text-align:left;font-weight:600;color:#e9f4ff}
.summary-table td.clickable{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;background:rgba(12,30,46,.65);position:relative;vertical-align:middle;padding:8px 4px;min-width:76px}
.summary-table td.clickable:hover{transform:scale(1.02)}
.summary-table td.clickable:focus{outline:none}
.summary-table td.clickable:focus-visible{outline:2px solid #5ba3ff;outline-offset:-2px;z-index:2}
.summary-table .summary-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;max-width:100px;margin:0 auto}
.summary-table .summary-chip-icon{width:16px;height:16px;flex-shrink:0;opacity:.95}
.summary-table .summary-chip-text{font-size:10px;font-weight:700;line-height:1.2;text-align:center;letter-spacing:.02em;word-break:break-word}
.summary-table td.status-open{background:rgba(34,197,94,.13);box-shadow:inset 0 0 0 1px rgba(34,197,94,.22);color:#86efac}
.summary-table td.status-planned{background:rgba(251,191,36,.12);box-shadow:inset 0 0 0 1px rgba(251,191,36,.24);color:#fde68a}
.summary-table td.status-delivered{background:rgba(168,85,247,.13);box-shadow:inset 0 0 0 1px rgba(168,85,247,.22);color:#e9d5ff}
.summary-table td.status-problem{background:rgba(239,68,68,.13);box-shadow:inset 0 0 0 1px rgba(239,68,68,.22);color:#fecaca}
.summary-table td.status-closed{background:rgba(139,156,181,.12);box-shadow:inset 0 0 0 1px rgba(139,156,181,.16);color:#cbd5e1}
.table-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
.edit-dialog{
  border:1px solid #2d537f;border-radius:12px;background:#081a31;color:#e3efff;padding:0;width:min(620px,94vw)
}
.edit-dialog::backdrop{background:rgba(2,8,20,.7)}
.edit-dialog form{padding:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid label{display:grid;gap:4px;font-size:12px;color:#a9c0dd}
.form-grid input,.form-grid textarea,.form-grid select{
  border:1px solid #2f547f;border-radius:8px;background:#0d2747;color:#fff;padding:8px
}
.form-grid .full{grid-column:1 / -1}
menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:12px 0 0}
.ui-tooltip{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transform:translate(10px, 10px);
  max-width:260px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #3a669b;
  background:rgba(8,24,44,.95);
  color:#e8f2ff;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .12s ease;
}
.ui-tooltip.visible{opacity:1}
.auth-body{display:grid;place-items:center;min-height:100vh}
.auth-card{
  width:min(460px,92vw);background:linear-gradient(180deg,#052038,#04162a);border:1px solid #1f446d;border-radius:12px;padding:26px 24px 22px
}
.auth-brand{display:flex;justify-content:center;margin:0 0 16px;line-height:0}
.auth-brand-logo{
  width:100%;max-width:min(320px,78vw);height:auto;object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
.auth-tagline{margin:0 0 14px;color:#b8cbe8;font-size:14px;text-align:center}
.auth-form{display:grid;gap:8px}
.auth-form label{font-size:13px;color:#c8daf4}
.auth-card input,.auth-card button{
  padding:10px;border-radius:8px;border:1px solid #2a547f;background:#0c2745;color:#fff
}
.auth-card button{background:linear-gradient(180deg,#2d7eff,#1f63cf);font-weight:700}
.alert{background:#7f1d1d;padding:8px;border-radius:8px}
.simple-page{padding:18px}
.page-shell{max-width:1320px;margin:0 auto;display:grid;gap:14px}
.page-header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border:1px solid #22466f;border-radius:12px;padding:14px 16px;
  background:linear-gradient(180deg,#081f39,#07192f)
}
.page-header h1{margin:0;font-size:34px;line-height:1.1}
.page-header p{margin:6px 0 0;color:#9eb5d4;font-size:13px}
.page-card{
  border:1px solid #1e4269;border-radius:12px;padding:14px;
  background:linear-gradient(180deg,#081b33,#07172c)
}
.page-card h2{margin:0 0 12px;font-size:18px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{border:1px solid #254d78;padding:10px 8px;font-size:13px}
.data-table th{background:#0d2949;color:#deecff}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.ghost-btn.danger{border-color:#7b2d3a;color:#ffcfd6;background:#34131a}
.ghost-btn.danger:hover{border-color:#b14558}
.users-flash{min-height:24px;display:flex;align-items:center;font-size:13px;color:#b7cae6}
.users-flash.ok{color:#7ff2a6}
.users-flash.error{color:#ffb4b4}
.settings-form{display:grid;gap:10px;max-width:520px}
.settings-form label{display:grid;gap:5px;color:#bcd0ea;font-size:13px}
.settings-form input[type="number"],.settings-form input[type="text"],.settings-form select{
  border:1px solid #2b547f;border-radius:8px;padding:8px;background:#0d2747;color:#fff
}
.check-label{display:flex!important;align-items:center;gap:8px}
@media (max-width:1320px){
  .content-grid{grid-template-columns:1fr}
  .detail-panel{order:2}
}
@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .main{order:1}
  .topbar{flex-direction:column;align-items:flex-start}
  .brand{font-size:20px}
  .headings-icon{width:42px;height:42px}
  .headings-icon svg{width:23px;height:23px}
  .page-header{flex-direction:column}
}