/* =====================================================================
   Controls above the invoice lists: the toolbar row and the date range.

   Loaded after app_responsive.css. Two jobs:

   1. The search box, Export list, the tour button and View all were four
      different heights (37, 49, 47 and 45px) because each inherited a
      different padding. They now share one height and sit on one line.
   2. The date range used to be two bare date inputs in a small box,
      which asked people to type both ends of a range for what is almost
      always "this month" or "the last 30 days". It is now one field that
      states the range in words and opens to the usual choices, with the
      exact dates underneath for anything else.
   ===================================================================== */

:root {
  --list-control-height: 40px;
}

/* ---------------------------------------------------------------------
   1. One height for the toolbar
   ------------------------------------------------------------------ */
.table-header-tools {
  align-items: center;
}

.table-header-tools > .btn,
.table-header-tools .table-search-wrap,
.table-header-tools .table-search-wrap input {
  height: var(--list-control-height);
}

.table-header-tools > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 0.95rem;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

/* The tour button is an icon on its own, so it should be square. */
.table-header-tools > .btn:has(> .fa-circle-question:only-child) {
  width: var(--list-control-height);
  padding: 0;
}

.table-header-tools .table-search-wrap input {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------
   2. The date range control
   ------------------------------------------------------------------ */
.date-range {
  position: relative;
  display: inline-flex;
}

.date-range-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  max-width: 100%;
  padding: 0 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.date-range-trigger:hover {
  border-color: var(--primary);
}

.date-range-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.date-range-trigger > i:first-child {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* A range in force should be visible without reading the dates. */
.date-range-trigger.on {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.12);
}

.date-range-trigger.on > i:first-child {
  color: var(--primary);
}

.date-range-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-range-caret {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.date-range-menu {
  /* Placed against the viewport from script: the list card hides its
     overflow to keep its rounded corners, which would cut this off. */
  position: fixed;
  z-index: 1200;
  width: min(272px, calc(100vw - 16px));
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px var(--shadow-lg, rgba(0, 0, 0, 0.45));
  /* Script sets max-height to the room actually available; a fixed element
     cannot be scrolled by the page, so it scrolls itself. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.date-range-presets {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.date-preset {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.date-preset:hover {
  background: var(--bg-hover);
}

.date-preset.on {
  background: rgba(14, 165, 233, 0.14);
  color: var(--primary);
}

.date-preset.on::after {
  content: "\f00c"; /* check */
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
}

.date-range-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.date-range-input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.date-range-input > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.date-range-input input[type="date"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 0.5rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
}

html.light-theme .date-range-input input[type="date"] {
  color-scheme: light;
}

.date-range-input input[type="date"]:focus {
  outline: none;
  border-color: var(--primary);
}

/* ---------------------------------------------------------------------
   3. Narrow screens
   ------------------------------------------------------------------ */
@media (max-width: 769px) {
  .date-range,
  .date-range-trigger {
    width: 100%;
  }

  .date-range-trigger {
    height: 38px;
    justify-content: flex-start;
  }

  .date-range-caret {
    margin-left: auto;
  }

  /* At 16px, which is what stops iOS zooming the page on focus, a date does
     not fit two-to-a-row inside the menu. */
  .date-range-custom {
    grid-template-columns: 1fr;
  }

  .date-range-menu {
    width: min(320px, calc(100vw - 16px));
  }

  .date-range-input input[type="date"] {
    height: 40px;
    font-size: 16px;
  }

  .date-preset {
    padding: 0.6rem;
  }

  .table-header-tools > .btn,
  .table-header-tools .table-search-wrap,
  .table-header-tools .table-search-wrap input {
    height: 38px;
  }

  .table-header-tools > .btn:has(> .fa-circle-question:only-child) {
    width: 38px;
  }
}