* {
      box-sizing: border-box;
    }
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }
    #app {
      display: flex;
      width: 100%;
      height: 100%;
    }
    #sidebar {
      width: 450px;
      min-width: 450px;
      height: 100%;
      background: #fff;
      border-right: 1px solid #ddd;
      display: flex;
      flex-direction: column;
      z-index: 1000;
    }
    #header {
      padding: 16px;
      border-bottom: 1px solid #ddd;
    }
    #title {
      font-size: 21px;
      font-weight: bold;
    }
    #subtitle {
      font-size: 13px;
      color: #666;
      margin-top: 4px;
      margin-bottom: 15px;
    }
    #search,
    #town,
    #water-filter,
    #sort-by {
      width: 100%;
      height: 38px;
      padding: 7px 9px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      font-size: 14px;
      margin-bottom: 8px;
    }
    .filter-label {
      display: block;
      font-size: 12px;
      color: #666;
      margin: 4px 0 4px;
    }
    .filter-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 5px 0 11px;
      padding: 8px 9px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      font-size: 13px;
      cursor: pointer;
    }
    .filter-checkbox input {
      width: 17px;
      height: 17px;
      margin: 0;
      cursor: pointer;
    }
    #date-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 9px;
    }
    #date-from,
    #date-to {
      flex: 1;
      min-width: 0;
      height: 38px;
      padding: 7px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
    }
    button {
      border: 1px solid #aaa;
      background: #f5f5f5;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover {
      background: #e9e9e9;
    }
    button:disabled {
      opacity: .6;
      cursor: wait;
    }
    .date-actions { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
    .date-actions button { height: 18px; padding: 1px 7px; font-size: 11px; line-height: 14px; }
    #geocode-all,
    #refresh-data {
      width: 100%;
      height: 38px;
      margin-bottom: 8px;
      font-size: 13px;
    }
    #summary {
      display: flex;
      justify-content: space-between;
      gap: 5px;
      margin-top: 5px;
      margin-bottom: 4px;
    }
    .summary-box {
      flex: 1;
      padding: 7px 4px;
      text-align: center;
      background: #f5f5f5;
      border-radius: 5px;
    }
    .summary-number {
      display: block;
      font-size: 16px;
      font-weight: bold;
    }
    .summary-label {
      color: #666;
      font-size: 11px;
    }
    #customer-list {
      flex: 1;
      overflow-y: auto;
    }
    .customer {
      padding: 13px 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }
    .customer:hover {
      background: #f7f7f7;
    }
    .customer.completed-row {
      background: #fafdfb;
    }
    .customer-name {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .customer-water {
      font-size: 12px;
      font-weight: bold;
      color: #3b6285;
      margin-bottom: 5px;
    }
    .customer-address {
      font-size: 13px;
      color: #555;
      line-height: 1.4;
    }
    .customer-date {
      font-size: 12px;
      color: #777;
      margin-top: 6px;
    }
    .customer-work {
      font-size: 12px;
      color: #555;
      margin-top: 7px;
      line-height: 1.4;
    }
    .customer-notes {
      margin-top: 7px;
      padding: 7px 8px;
      background: #fffbe6;
      border-left: 3px solid #d6bd50;
      font-size: 12px;
      line-height: 1.4;
    }
    .customer-status {
      font-size: 11px;
      color: #777;
      margin-top: 7px;
    }
    .customer-actions {
      margin-top: 9px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .geocode-one,
    .notes-button,
    .water-button {
      padding: 5px 9px;
      font-size: 11px;
    }
    .completed-control {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      cursor: pointer;
      color: #555;
    }
    .completed-control input {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .completed-control.completed {
      color: #287a3e;
      font-weight: bold;
    }
    .no-results {
      padding: 25px;
      text-align: center;
      color: #666;
    }
    #map {
      flex: 1;
      height: 100%;
    }
    #map-status {
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 1000;
      background: #fff;
      padding: 9px 13px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
      font-size: 13px;
    }
    .popup-name {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 7px;
    }
    .popup-water {
      font-size: 14px;
      font-weight: bold;
      color: #3b6285;
      margin-bottom: 9px;
    }
    .popup-row {
      margin-bottom: 7px;
    }
    .popup-edit-link {
      display: inline-block;
      padding: 7px 11px;
      border-radius: 5px;
      background: #2f6fed;
      color: #fff !important;
      text-decoration: none;
      font-size: 12px;
      font-weight: bold;
    }
    .popup-edit-link:hover {
      opacity: 0.9;
      text-decoration: none;
    }
    .popup-print-button {
      display: inline-block;
      margin-right: 6px;
      margin-bottom: 7px;
      padding: 7px 11px;
      border: 1px solid #686b70;
      border-top-color: #f7f7f7;
      border-left-color: #e2e2e2;
      border-radius: 6px;
      background: linear-gradient(
        to bottom,
        #eeeeee 0%,
        #c9cbd0 48%,
        #9b9ea4 52%,
        #b6b8bd 100%
      );
      color: #202124;
      font-size: 12px;
      font-weight: bold;
      text-shadow: 0 1px 0 rgba(255,255,255,.8);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.16),
        0 2px 3px rgba(0,0,0,.32);
      cursor: pointer;
    }
    .popup-print-button:hover {
      background: linear-gradient(
        to bottom,
        #f7f7f7 0%,
        #d5d7db 48%,
        #a7aab0 52%,
        #c1c3c7 100%
      );
    }
    .popup-print-button:active {
      transform: translateY(1px);
      background: linear-gradient(
        to bottom,
        #999ca2 0%,
        #c1c3c8 100%
      );
      box-shadow:
        inset 0 2px 3px rgba(0,0,0,.28),
        0 1px 1px rgba(0,0,0,.2);
    }
    .popup-section {
      border-top: 1px solid #ddd;
      margin-top: 10px;
      padding-top: 10px;
    }
    .popup-label {
      font-size: 11px;
      color: #777;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .popup-work,
    .popup-notes {
      font-size: 12px;
      line-height: 1.45;
    }
    .popup-notes {
      background: #fffbe6;
      padding: 8px;
      border-radius: 4px;
    }
    .popup-status {
      margin-top: 10px;
      padding: 8px;
      border-radius: 5px;
      background: #f1f1f1;
      font-size: 12px;
    }
    .popup-status.completed {
      background: #e6f4ea;
    }
    .popup-completed-control,
    .popup-water-editor,
    .popup-notes-editor {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #ddd;
      font-size: 13px;
    }
    .popup-completed-control label {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
    }
    .popup-completed-control input {
      width: 17px;
      height: 17px;
    }
    .popup-water-editor input,
    .popup-notes-editor textarea {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 7px;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }
    .popup-water-editor input {
      height: 34px;
    }
    .popup-notes-editor textarea {
      min-height: 70px;
      resize: vertical;
    }
    .popup-water-editor button,
    .popup-notes-editor button {
      margin-top: 5px;
      padding: 6px 10px;
      font-size: 11px;
    }
    .popup-coordinates {
      margin-top: 9px;
      color: #777;
      font-size: 11px;
    }
    :root {
      --bg: #f4f5f7;
      --panel: #ffffff;
      --panel-alt: #f7f8fa;
      --text: #1f2933;
      --muted: #667085;
      --border: #d0d5dd;
      --input-bg: #ffffff;
      --hover: #f3f4f6;
      --completed-bg: #f6fbf7;
      --notes-bg: #fffbe6;
      --notes-border: #d6bd50;
      --status-bg: #ffffff;
      --popup-bg: #ffffff;
      --water: #3b6285;
    }
    body.dark {
      --bg: #111318;
      --panel: #181b21;
      --panel-alt: #20242b;
      --text: #f3f4f6;
      --muted: #a7afbb;
      --border: #343a43;
      --input-bg: #22262d;
      --hover: #242a31;
      --completed-bg: #18231c;
      --notes-bg: #302b18;
      --notes-border: #8d7b2f;
      --status-bg: #181b21;
      --popup-bg: #181b21;
      --water: #8fb8df;
    }
    body {
      background: var(--bg);
      color: var(--text);
    }
    #sidebar {
      background: var(--panel);
      border-color: var(--border);
    }
    #header {
      border-color: var(--border);
      background: var(--panel);
    }
    #subtitle,
    .filter-label,
    .summary-label,
    .customer-address,
    .customer-date,
    .customer-work,
    .customer-status,
    .popup-label,
    .popup-coordinates {
      color: var(--muted);
    }
    #search,
    #town,
    #water-filter,
    #sort-by,
    #date-from,
    #date-to,
    .popup-water-editor input,
    .popup-notes-editor textarea {
      background: var(--input-bg);
      color: var(--text);
      border-color: var(--border);
    }
    .filter-checkbox {
      background: var(--input-bg);
      color: var(--text);
      border-color: var(--border);
    }
    #search::placeholder,
    .popup-water-editor input::placeholder,
    .popup-notes-editor textarea::placeholder {
      color: var(--muted);
    }
    button {
      background: var(--panel-alt);
      color: var(--text);
      border-color: var(--border);
    }
    button:hover {
      background: var(--hover);
    }
    .summary-box {
      background: var(--panel-alt);
    }
    .customer {
      border-color: var(--border);
      background: var(--panel);
    }
    .customer:hover {
      background: var(--hover);
    }
    .customer.completed-row {
      background: var(--completed-bg);
    }
    .customer-water,
    .popup-water {
      color: var(--water);
    }
    .customer-notes,
    .popup-notes {
      background: var(--notes-bg);
      border-color: var(--notes-border);
      color: var(--text);
    }
    #map-status {
      background: var(--status-bg);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
      background: var(--popup-bg);
      color: var(--text);
    }
    body.dark .leaflet-tile-pane {
      filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(0.9) saturate(0.75);
    }
    body:not(.dark) .leaflet-tile-pane {
      filter: none;
    }
    .popup-section,
    .popup-completed-control,
    .popup-water-editor,
    .popup-notes-editor {
      border-color: var(--border);
    }
    .popup-status {
      background: var(--panel-alt);
      color: var(--text);
    }
    .popup-status.completed {
      background: var(--completed-bg);
    }
    #theme-toggle {
      width: 100%;
      height: 38px;
      margin-bottom: 8px;
      font-size: 13px;
    }
    @media (max-width: 600px) {
      #sidebar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        height: 52%;
        border-right: 0;
        border-top: 1px solid #ccc;
        z-index: 2000;
      }
    }
    .leaflet-marker-icon.marker-glow {
      filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ffc400) drop-shadow(0 0 12px #ffc400);
    }
    /* Full-width controls above the independently scrolling list and map. */
    #app { flex-direction: column; }
    #header { flex: 0 0 auto; padding: 12px 16px; max-height: 48%; overflow-y: auto; }
    .top-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    #subtitle { margin: 3px 0 0; }
    #summary { margin: 0; min-width: 270px; }
    .summary-box { padding: 5px 12px; }
    #filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 10px; }
    .filter-field { flex: 1 1 145px; min-width: 0; }
    .search-field { flex: 2 1 250px; }
    .date-field { flex: 2 1 340px; }
    #filter-bar input, #filter-bar select, #date-row, #filter-bar .filter-checkbox { margin-bottom: 0; }
    #filter-bar .filter-checkbox { flex: 0 0 auto; height: 38px; margin-top: 0; }
    .toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .toolbar-actions button { width: auto !important; padding: 2px 8px; margin-bottom: 0 !important; height: 26px !important; font-size: 11px !important; line-height: 16px; }
    #refresh-status { margin: 0 0 0 auto !important; text-align: right !important; }
    #workspace { display: flex; position: relative; flex: 1; min-height: 0; min-width: 0; }
    #sidebar { width: 360px; min-width: 280px; flex: 0 0 28%; height: 100%; }
    #customer-list { min-height: 0; }
    #map { min-width: 0; }
    @media (max-width: 600px) {
      #header { padding: 10px; }
      .top-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
      #title { font-size: 18px; }
      #summary { min-width: 0; flex: 1; }
      .date-field { flex-basis: 100%; }
      #workspace { flex-direction: column; }
      #map { order: 0; flex: 1; min-height: 0; height: auto; }
      #sidebar { order: 1; position: static; width: 100%; min-width: 0; min-height: 0; height: auto; flex: 0 0 42%; }
    }
    .completion-dialog {width:min(480px,calc(100% - 32px));border:1px solid var(--border);border-radius:12px;padding:24px;background:var(--panel);color:var(--text);}
    .completion-dialog::backdrop {background:rgba(0,0,0,.6);}
    .completion-dialog h2 {margin:0 0 8px;font-size:22px;}
    .completion-dialog label {display:block;margin:16px 0 6px;font-weight:bold;font-size:14px;}
    .completion-dialog input {width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);font:inherit;}
    .completion-preview {min-height:60px;margin-top:8px;background:white;border:1px solid #ddd;border-radius:6px;}
    .signature-stamp {display:block;width:100%;max-width:480px;height:60px;}
    .completion-error {color:#dc5959;font-size:13px;}
    .completion-buttons {display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
    .completion-buttons button {padding:10px 14px;}
    .completion-save {background:#246b3c;color:white;}