.toolbar{
      display:grid;
      grid-template-columns:1.4fr 220px 220px 140px;
      gap:12px;
      margin-bottom:16px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .field label{
      font-size:11px;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-weight:700;
      color:#7b746c;
      padding-left:2px;
    }
    .field input, .field select{
      width:100%;
    }

    /* --- City filter (sits left of the date range) --- */
    .city-filter{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 14px;
      cursor:pointer;
      font-weight:600;
      font-size:14px;
      color:var(--text);
      box-shadow:var(--shadow);
      min-width:200px;
      transition:border-color .15s ease;
    }
    .city-filter:hover{border-color:#c9c0b6}

    /* --- Date range picker --- */
    .daterange{
      position:relative;
      display:inline-block;
    }
    .daterange-input{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 14px;
      cursor:pointer;
      font-weight:600;
      font-size:14px;
      color:var(--text);
      box-shadow:var(--shadow);
      transition:border-color .15s ease;
      min-width:280px;
    }
    .daterange-input:hover{border-color:#c9c0b6}
    .daterange-input .icon{
      width:18px;height:18px;color:#7b746c;flex-shrink:0;
    }
    .daterange-input .label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .daterange-input .label.placeholder{color:var(--muted);font-weight:500}
    .daterange-input .clear{
      background:transparent;border:none;color:var(--muted);padding:0 4px;cursor:pointer;font-weight:700;font-size:16px;
      display:none;line-height:1;
    }
    .daterange-input.has-value .clear{display:inline-block}
    .daterange-input .clear:hover{color:var(--text)}

    .daterange-popover{
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 20px 50px rgba(15,23,42,.18);
      padding:18px;
      z-index:50;
      display:none;
    }
    .daterange-popover.open{display:block}
    .daterange-calendars{
      display:flex;
      gap:24px;
    }
    .cal{
      width:260px;
    }
    .cal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:12px;
    }
    .cal-title{
      font-weight:700;
      font-size:14px;
      text-transform:capitalize;
    }
    .cal-nav{
      background:transparent;
      border:none;
      width:28px;height:28px;
      display:inline-flex;align-items:center;justify-content:center;
      cursor:pointer;color:var(--text);border-radius:8px;padding:0;
    }
    .cal-nav:hover{background:#f3efe9}
    .cal-nav.hidden{visibility:hidden}
    .cal-grid{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:2px;
    }
    .cal-dow{
      font-size:11px;
      font-weight:700;
      color:var(--muted);
      text-align:center;
      padding:6px 0;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .cal-day{
      height:34px;
      display:flex;align-items:center;justify-content:center;
      font-size:13px;
      cursor:pointer;
      border-radius:8px;
      color:var(--text);
      user-select:none;
      position:relative;
      background:transparent;
      border:none;
      font-family:inherit;
      padding:0;
    }
    .cal-day:hover:not(.disabled):not(.empty){
      background:#f3efe9;
    }
    .cal-day.empty{
      cursor:default;
    }
    .cal-day.muted{
      color:#c8c0b6;
    }
    .cal-day.disabled{
      color:#d6cec3;
      cursor:not-allowed;
      pointer-events:none;
    }
    .cal-day.today{
      font-weight:800;
    }
    .cal-day.today::after{
      content:"";
      position:absolute;
      bottom:4px;left:50%;transform:translateX(-50%);
      width:4px;height:4px;border-radius:50%;background:var(--accent);
    }
    .cal-day.in-range{
      background:var(--range);
      border-radius:0;
    }
    .cal-day.range-start{
      background:var(--accent) !important;
      color:#fff !important;
      border-top-left-radius:8px;
      border-bottom-left-radius:8px;
      border-top-right-radius:0;
      border-bottom-right-radius:0;
    }
    .cal-day.range-end{
      background:var(--accent) !important;
      color:#fff !important;
      border-top-right-radius:8px;
      border-bottom-right-radius:8px;
      border-top-left-radius:0;
      border-bottom-left-radius:0;
    }
    .cal-day.range-start.range-end{
      border-radius:8px;
    }
    .cal-day.today.range-start::after,
    .cal-day.today.range-end::after{background:#fff}

    .daterange-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid var(--line);
      gap:10px;
    }
    .daterange-presets{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .preset-btn{
      background:#f3efe9;
      color:var(--text);
      border:none;
      padding:6px 10px;
      border-radius:8px;
      font-size:12px;
      font-weight:600;
      cursor:pointer;
    }
    .preset-btn:hover{background:#e7e1da}
    .daterange-actions{
      display:flex;
      gap:8px;
    }
    .daterange-actions button{
      padding:8px 14px;
      font-size:13px;
      border-radius:10px;
    }