* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Arial, sans-serif; background:#f3f4f6; color:#1f2937; }

header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#111827; color:#fff; }
header h1 { font-size:18px; margin:0; }
.header-actions button { margin-left:8px; padding:8px 14px; border:none; border-radius:6px; background:#374151; color:#fff; cursor:pointer; }
.header-actions button:hover { background:#4b5563; }

#headerMenu { display:flex; gap:6px; flex-wrap:wrap; }
.header-menu-item {
  padding:8px 12px; border:1px solid #374151; border-radius:6px; background:#1f2937;
  color:#d1d5db; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.header-menu-item:hover { background:#374151; color:#fff; }
.header-menu-item.active { background:#2563eb; border-color:#2563eb; color:#fff; }

#layout { display:flex; height:calc(100vh - 52px); }
#panel { width:260px; overflow-y:auto; padding:12px; background:#fff; border-right:1px solid #e5e7eb; flex-shrink:0; transition:width .15s, padding .15s; }
#panel.hidden { width:0; padding:0; overflow:hidden; border-right:none; }
#mapWrap { flex:1; position:relative; }
#map { width:100%; height:100%; background:#dbeafe; }

#btnTogglePanel {
  position:fixed; top:50%; left:260px; z-index:1500; width:26px; height:42px;
  transform:translateY(-50%);
  border:1px solid #d1d5db; border-left:none; border-radius:0 8px 8px 0; background:#fff; cursor:pointer;
  font-size:13px; box-shadow:2px 1px 4px rgba(0,0,0,.15); transition:left .15s;
}
#btnTogglePanel:hover { background:#f3f4f6; }
#btnTogglePanel.panel-is-hidden { left:0; transform:translateY(-50%) scaleX(-1); }

/* Sol panel: menü + servis listesi bölümü */
#panelMenu { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.menu-item {
  display:block; width:100%; text-align:left; padding:12px 14px; border:1px solid #e5e7eb;
  border-radius:8px; background:#f9fafb; color:#1f2937; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.menu-item:hover { background:#eef2ff; border-color:#c7d2fe; }

.panel-section { padding-top:12px; border-top:1px solid #e5e7eb; }
.panel-section h2 { font-size:13px; margin:0 0 8px 0; text-transform:uppercase; color:#6b7280; letter-spacing:.03em; }
.panel-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.panel-section-head h2 { margin:0; }
.link-btn { border:none; background:none; color:#2563eb; font-size:11px; cursor:pointer; padding:0; text-decoration:underline; white-space:nowrap; }
.link-btn:hover { color:#1d4ed8; }
.service-row { cursor:pointer; }
.service-row.selected { background:#dbeafe; }
.service-row input[type="checkbox"] { pointer-events:none; }

.list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; max-height:300px; overflow-y:auto; }
.service-row { display:flex; align-items:center; gap:6px; font-size:13px; padding:5px 7px; border-radius:5px; background:#f9fafb; }
.swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.service-row button { margin-left:auto; border:none; background:none; color:#dc2626; cursor:pointer; font-size:14px; }

.mini-form { display:flex; flex-wrap:wrap; gap:6px; }
.mini-form input, .mini-form select { flex:1 1 100px; padding:6px; border:1px solid #d1d5db; border-radius:5px; font-size:13px; }
.mini-form button { padding:6px 10px; border:none; border-radius:5px; background:#2563eb; color:#fff; cursor:pointer; font-size:13px; white-space:nowrap; }
.mini-form button.danger { background:#dc2626; }
.mini-form button:hover { opacity:.9; }
.assign-row { margin-top:10px; }

.hint { font-size:12px; color:#6b7280; }

#legend { position:absolute; top:10px; right:10px; z-index:1000; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.2); font-size:12px; max-width:220px; max-height:70vh; overflow-y:auto; }
#legend .legend-row { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
#legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Modallar */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:2000; }
.modal.hidden { display:none; }
.modal-content { background:#fff; padding:22px; border-radius:10px; width:520px; max-height:85vh; overflow-y:auto; position:relative; }
.modal-content.wide { width:min(95vw, 1000px); }
.modal-content h2 { font-size:15px; margin:0 0 12px 0; text-transform:uppercase; color:#374151; padding-right:24px; }
.modal .close { position:absolute; top:12px; right:16px; border:none; background:none; font-size:22px; cursor:pointer; color:#6b7280; }
.modal .close:hover { color:#111827; }

.report-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.report-actions button { padding:8px 12px; border:none; border-radius:6px; background:#2563eb; color:#fff; cursor:pointer; font-size:13px; }
.report-actions button:hover { opacity:.9; }

.modal-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.chart-wrap { position:relative; height:340px; margin:12px 0; }

/* Çoklu ilçe seçimi: chip + arama + checkbox listesi */
.multiselect { margin-top:8px; border:1px solid #d1d5db; border-radius:8px; padding:8px; background:#f9fafb; }
.multiselect-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
.multiselect-chips:empty { display:none; }
.chip {
  display:flex; align-items:center; gap:5px; background:#2563eb; color:#fff; font-size:12px;
  font-weight:600; padding:4px 6px 4px 10px; border-radius:999px;
}
.chip button {
  border:none; background:rgba(255,255,255,.25); color:#fff; width:16px; height:16px; border-radius:50%;
  cursor:pointer; font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;
}
.chip button:hover { background:rgba(255,255,255,.45); }

.multiselect-searchrow { display:flex; gap:6px; margin-bottom:6px; }
.multiselect-searchrow input { flex:1; padding:6px 8px; border:1px solid #d1d5db; border-radius:5px; font-size:13px; }
.multiselect-searchrow button {
  padding:6px 10px; border:none; border-radius:5px; background:#374151; color:#fff; cursor:pointer; font-size:12px; white-space:nowrap;
}
.multiselect-searchrow button:hover { opacity:.9; }

.multiselect-options { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.ms-placeholder { margin:4px 2px; }
.ms-option { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px; cursor:pointer; font-size:13px; }
.ms-option:hover { background:#eef2ff; }
.ms-option.selected { background:#dbeafe; font-weight:600; }
.ms-option input { pointer-events:none; }
.ms-option .ms-count { margin-left:auto; color:#9ca3af; font-size:11px; font-weight:400; }

/* Harita popup içi mahalle detay/atama */
.map-popup { font-size:13px; min-width:200px; }
.map-popup b { font-size:14px; }
.popup-servis-baslik {
  display:flex; flex-direction:column; gap:2px; padding:6px 8px; margin-bottom:8px;
  background:#f9fafb; border-radius:6px; border:1px solid #e5e7eb;
}
.popup-servis-baslik .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
.popup-servis-baslik b { font-size:13px; }
.popup-is-sayisi { font-size:12px; color:#374151; margin-top:3px; }
.popup-is-sayisi b { font-size:12px; color:#111827; }
.popup-form { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.popup-row { display:flex; gap:4px; }
.popup-row input, .popup-row select { flex:1; padding:5px; border:1px solid #d1d5db; border-radius:4px; font-size:12px; }
.popup-row button { padding:5px 8px; border:none; border-radius:4px; background:#2563eb; color:#fff; cursor:pointer; font-size:12px; }
.popup-row button.danger { background:#dc2626; }

/* Genel tablo (Km Raporu / Tüm Liste / Liste modalları) */
.table-wrap { max-height:60vh; overflow-y:auto; margin-top:10px; }
.table-wrap table { width:100%; border-collapse:collapse; font-size:13px; }
.table-wrap th, .table-wrap td { text-align:left; padding:7px 8px; border-bottom:1px solid #f0f0f0; }
.table-wrap th { position:sticky; top:0; background:#fff; color:#6b7280; text-transform:uppercase; font-size:11px; letter-spacing:.03em; }
.table-wrap tr:hover td { background:#f9fafb; }
.table-wrap input[type="number"] { width:80px; padding:4px 6px; border:1px solid #d1d5db; border-radius:4px; font-size:12px; }
.table-wrap select { padding:4px 6px; border:1px solid #d1d5db; border-radius:4px; font-size:12px; max-width:220px; }
#listeFilterIlce { width:100%; padding:7px 8px; border:1px solid #d1d5db; border-radius:5px; font-size:13px; margin-top:8px; }
.servis-hucre { display:flex; align-items:center; gap:6px; }

/* İş Listesi bar grafik */
.bar-chart { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.bar-row { font-size:12px; }
.bar-label { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.bar-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.bar-value { font-weight:700; color:#111827; }
.bar-track { background:#f1f5f9; border-radius:5px; height:10px; overflow:hidden; }
.bar-fill { height:100%; border-radius:5px; transition:width .3s; }
.bar-sub { color:#6b7280; font-size:11px; margin-top:2px; }

/* Sol paneldeki servis renk kutusu artık düzenlenebilir */
.service-row input[type="color"] { width:22px; height:22px; padding:0; border:none; border-radius:4px; cursor:pointer; flex-shrink:0; }

@media print {
  header, #panel, #legend, .header-actions { display:none !important; }
}