/*
 * Shared "page head + filter toolbar" design — reused across every
 * non-Fleet-Status page that needs a title bar (icon + name + results
 * count + actions) and a filter toolbar (search/date/dropdown fields +
 * quick-range buttons). Fleet Status keeps its own copy of this same
 * pattern in fleet-status-redesign.css (built before this shared file
 * existed) — no need to migrate it, just don't duplicate these rules
 * there.
 *
 * Values copied verbatim from the reference app's own compiled output
 * (https://fleettracking.utwiz.com/alerts — read-only: fetched its JS/CSS
 * via curl, nothing submitted or changed there), specifically its
 * .rd-page-header-flush / .rpt-field / .rpt-label / .rd-fg / .btn.ghost /
 * .fs-switch classes and inline page-head styles.
 */

/* The shared layout's body background is a flat gray (#cdcdcd, custom.css)
   showing through below the page's actual content whenever that content is
   shorter than the layout's reserved height — visible as a gray strip below
   the grid at the bottom of the page. Giving this page's own wrapper its
   own background and letting it stretch the full available height keeps
   that gray from showing at all.
   The gradient itself is the reference app's own page background (read
   from its compiled CSS: a radial accent glow + a top-to-bottom linear
   fade), re-colored from its red/rose account theme to this app's actual
   blue theme (var(--color-primary) / var(--accent-gradient) are already
   #4e78ff-based here) rather than copied verbatim. */
.rd-page-wrap {
  background:
    radial-gradient(circle at top, rgba(78, 120, 255, 0.08), transparent 35%),
    linear-gradient(180deg, #f0f4ff 0%, #e8edf8 100%);
  min-height: 100%;
}

/* ---- Page title row ---- */

.rd-pagehead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  margin: 0 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #d8dde8;
  font-family: var(--font-family-base);
}

.rd-pagehead-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rd-pagehead-title i,
.rd-pagehead-title svg {
  flex-shrink: 0;
}

.rd-pagehead-title h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.rd-pagehead-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f9fafc;
  border: 1px solid #d8dde8;
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
}

.rd-pagehead-count__num {
  font-weight: 700;
}

.rd-pagehead-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.rd-pagehead-actions .rd-icon-btn {
  padding: 7px;
  border-radius: 8px;
  border: 1px solid #d8dde8;
  background: #ffffff;
  color: #1f2430;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.rd-pagehead-actions .rd-icon-btn:hover {
  background: #f9fafc;
  border-color: #64748b;
}

.rd-pagehead-actions .rd-switch-label {
  font-size: 0.82rem;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ---- Filter toolbar ---- */

.rd-toolbar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 20px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: var(--font-family-base);
}

/* Grid container below the toolbar — same left/right inset as the toolbar
   above it, so both line up instead of the grid running flush to the page
   edges while the toolbar is inset. Scoped to this class (added only where
   a page explicitly opts in) rather than the shared .card-grid, since that
   class is reused by many already-finished pages that shouldn't shift. */
.rd-page-grid-card {
  margin: 0 20px;
}

/* Side-panel form card (e.g. the "Add In-Charge" / "Add Vehicle Group"
   panels) — same white-card visual language as .rd-toolbar (filter
   container) and .rd-grid-wrap (grid container), just without the flex
   toolbar layout, for pages with a form instead of a filter row. */
.rd-form-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px 18px;
}

.rpt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Inline quick-range links next to a field label (e.g. "To Date  Today |
   Yesterday | Last 7 Days") — colorful and clearly clickable, unlike plain
   label text. */
.rd-quicklinks {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  font-size: 12px;
}

.rd-quicklinks a {
  color: #2563eb;
  text-decoration: none;
  cursor: pointer;
}

.rd-quicklinks a:hover {
  text-decoration: underline;
}

.rd-quicklinks__sep {
  color: #cbd5e1;
  font-weight: 400;
}

.rpt-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #5a6a8e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Bordered input group (search box, date pickers) */
.rd-fg {
  position: relative;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 4px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rd-fg:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(78, 120, 255, 0.15);
}

.rd-fg.accent-success {
  border-color: rgba(34, 197, 94, 0.4);
}

.rd-fg input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1f2430;
  flex: 1 1 auto;
  min-width: 0;
}

.rd-fg i,
.rd-fg svg {
  color: #64748b;
  flex-shrink: 0;
}

/* A DevExtreme SelectBox embedded inside .rd-fg (e.g. a searchable vehicle
   picker styled to look like a plain search box) — strip its own border/
   background so only the outer .rd-fg box shows. */
.rd-fg .dx-selectbox {
  flex: 1 1 auto;
  min-width: 0;
}

.rd-fg .dx-selectbox .dx-editor-outlined,
.rd-fg .dx-selectbox .dx-texteditor-input-container {
  border: none !important;
  background: transparent !important;
  min-height: 28px !important;
  box-shadow: none !important;
}

.rd-fg .dx-selectbox .dx-texteditor-input {
  padding-left: 0 !important;
  font-size: 0.85rem;
}

/* Hide the dropdown chevron so the SelectBox reads as a plain search box
   (it's still a real searchable dropdown underneath — click/type still
   opens it, just without the arrow affordance). */
.rd-fg .dx-selectbox .dx-dropdowneditor-button {
  display: none !important;
}

/* DevExtreme SelectBox / DateBox dropped into a .rpt-field — match the
   36px height + border-strong color of the plain .rd-fg boxes so every
   control in the toolbar row lines up visually. */
.rpt-field .dx-selectbox .dx-editor-outlined,
.rpt-field .dx-selectbox .dx-texteditor-input-container,
.rpt-field .dx-datebox .dx-editor-outlined,
.rpt-field .dx-datebox .dx-texteditor-input-container {
  min-height: 36px !important;
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
}

.rpt-field .dx-texteditor-input {
  font-size: 0.85rem;
}

/* Quick-range buttons (Today / Yesterday / Last 7 Days) */
.btn.ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #5a6a8e;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.btn.ghost:hover {
  background: #f1f3f9;
  color: #1f2430;
}

.btn.ghost--active {
  background: rgba(78, 120, 255, 0.08);
  color: var(--color-primary);
}