/* ============================================================================
   daterange.css — the one-box date range and the calendar it opens.

   Published at /daterange.css and loaded by every page that loads
   /daterange.js, which describes the control and writes all the markup styled
   here. Nothing here hides anything until that script adds a class, so a page
   where the script did not run keeps its two date inputs.

   ---- what a page may set ---------------------------------------------------

   The button (.bp-dr-box) takes its font from where it stands. A page makes
   it match its own controls by setting any of these on the button's container,
   in its own stylesheet:

     --bp-dr-box-width    auto         a fixed width, or 100% to fill a column
     --bp-dr-box-min      150px        the least it is ever wide
     --bp-dr-box-height   auto
     --bp-dr-box-pad      5px 9px
     --bp-dr-box-border   1px solid, in this file's line colour
     --bp-dr-box-radius   6px
     --bp-dr-box-bg       this file's panel colour
     --bp-dr-box-ink      this file's text colour
     --bp-dr-box-font     inherit      a font size

   ---- rules for changing this file -----------------------------------------

   Every class starts bp-dr-. The calendar (.bp-dr-pop) is added to <body>, so
   a page's rules for bare button and input elements reach it: each rule here
   names the element and two classes to stay ahead of them, and sets every
   property such a rule is likely to touch.

   Colours are this file's own (--bp-dr-*), never an app's. Dark values apply
   when <html> carries data-theme="dark", which every app's script sets. A
   page whose colours follow the device setting instead adds
   class="bp-dr-os-theme" to <html> (the Console does).

   z-index 300 puts the calendar above the sticky header (20), every app's
   menus and side panels (up to 200) and dialogs (200, 210), and below the
   toasts (400).

   620px is where the calendar becomes one month at the bottom of the screen;
   daterange.js uses the same number.
   ============================================================================ */

:root{
  --bp-dr-ready:1;              /* tells daterange.js this file loaded */
  --bp-dr-panel:#ffffff;        /* the calendar, and the button unless a page says otherwise */
  --bp-dr-ink:#1a2433;
  --bp-dr-mute:#5b6b7f;         /* labels, the hint, weekday letters */
  --bp-dr-line:#d5dbe3;
  --bp-dr-accent:#0057b8;       /* links, the two ends of the range, focus rings */
  --bp-dr-on-accent:#ffffff;    /* text on an end of the range */
  --bp-dr-soft:#dbe8f8;         /* days inside the range, hover */
  --bp-dr-field:#fffbe0;        /* the two boxes to type in */
  --bp-dr-bad:#b3261e;
  --bp-dr-shade:rgba(0,0,0,.22);
}
:root[data-theme="dark"]{
  --bp-dr-panel:#111f31; --bp-dr-ink:#e6edf5; --bp-dr-mute:#93a3b8; --bp-dr-line:#2c405a;
  --bp-dr-accent:#5aa2f0; --bp-dr-on-accent:#07182b; --bp-dr-soft:#1b3657; --bp-dr-field:#2b2a16;
  --bp-dr-bad:#f2857c; --bp-dr-shade:rgba(0,0,0,.55);
}
/* The same dark values, for a page that follows the device setting. Keep this
   block equal to the one above. */
@media (prefers-color-scheme:dark){
  :root.bp-dr-os-theme:not([data-theme="light"]){
    --bp-dr-panel:#111f31; --bp-dr-ink:#e6edf5; --bp-dr-mute:#93a3b8; --bp-dr-line:#2c405a;
    --bp-dr-accent:#5aa2f0; --bp-dr-on-accent:#07182b; --bp-dr-soft:#1b3657; --bp-dr-field:#2b2a16;
    --bp-dr-bad:#f2857c; --bp-dr-shade:rgba(0,0,0,.55);
  }
}

/* ---------- what the script hides ----------
   The two date inputs, and anything a page marks data-range-native. Out of
   sight and out of the layout, but still in the page: the inputs keep their
   values, still send their events and still go with a form. */
.bp-dr-native{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;margin:-1px!important;padding:0!important;border:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}

/* ---------- the button ---------- */
button.bp-dr-box{display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;flex:0 0 auto;box-sizing:border-box;
  width:var(--bp-dr-box-width,auto);min-width:var(--bp-dr-box-min,150px);max-width:100%;height:var(--bp-dr-box-height,auto);margin:0;
  padding:var(--bp-dr-box-pad,5px 9px);border:var(--bp-dr-box-border,1px solid var(--bp-dr-line));border-radius:var(--bp-dr-box-radius,6px);
  background:var(--bp-dr-box-bg,var(--bp-dr-panel));color:var(--bp-dr-box-ink,var(--bp-dr-ink));box-shadow:none;
  font:inherit;font-size:var(--bp-dr-box-font,inherit);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;text-align:left;
  white-space:nowrap;vertical-align:middle;cursor:pointer}
button.bp-dr-box:hover,button.bp-dr-box[aria-expanded="true"]{border-color:var(--bp-dr-accent)}
button.bp-dr-box:focus-visible{outline:2px solid var(--bp-dr-accent);outline-offset:2px}
button.bp-dr-box:disabled{opacity:.55;cursor:default;border-color:var(--bp-dr-line)}
.bp-dr-box .bp-dr-ico{flex:none;color:var(--bp-dr-accent)}
.bp-dr-box .bp-dr-box-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- the calendar ---------- */
.bp-dr-pop{position:fixed;left:8px;top:8px;z-index:300;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;
  width:590px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;margin:0;padding:12px;
  border:1px solid var(--bp-dr-line);border-radius:8px;background:var(--bp-dr-panel);color:var(--bp-dr-ink);box-shadow:0 10px 28px var(--bp-dr-shade);
  font-size:14px;font-weight:400;line-height:1.45;letter-spacing:0;text-align:left;text-transform:none;white-space:normal;cursor:default}
.bp-dr-pop[hidden],.bp-dr-pop [hidden]{display:none!important}
.bp-dr-pop:focus{outline:none}
/* with no quick ranges there is no column for them */
.bp-dr-pop.bp-dr-plain{width:460px}
.bp-dr-pop *{box-sizing:border-box}

/* everything a page's bare button{} or input{} rule might have set */
.bp-dr-pop button,.bp-dr-pop input{width:auto;min-width:0;height:auto;margin:0;box-shadow:none;font:inherit;letter-spacing:0;text-transform:none;transition:none}
.bp-dr-pop button{cursor:pointer}
.bp-dr-pop button:focus-visible,.bp-dr-pop input.bp-dr-in:focus-visible{outline:2px solid var(--bp-dr-accent);outline-offset:2px}

/* the From and To boxes, and the hint beside them */
.bp-dr-pop .bp-dr-ends{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;min-width:0}
.bp-dr-pop .bp-dr-lab{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;color:var(--bp-dr-mute);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bp-dr-pop input.bp-dr-in{display:block;width:124px;padding:6px 8px;border:1px solid var(--bp-dr-line);border-radius:6px;background:var(--bp-dr-field);color:var(--bp-dr-ink);
  font-size:14px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.45}
.bp-dr-pop input.bp-dr-in::placeholder{color:var(--bp-dr-mute);opacity:.8}
/* the box the next click on a day goes into */
.bp-dr-pop input.bp-dr-in.is-next{border-color:var(--bp-dr-accent);box-shadow:0 0 0 2px var(--bp-dr-soft)}
.bp-dr-pop input.bp-dr-in.is-bad{border-color:var(--bp-dr-bad);box-shadow:none}
.bp-dr-pop .bp-dr-hint{flex:1 1 150px;align-self:center;min-width:0;margin:0;padding:0;color:var(--bp-dr-mute);font-size:12px;font-weight:400;text-align:right}
.bp-dr-pop .bp-dr-hint.is-bad{color:var(--bp-dr-bad);font-weight:600}

/* quick ranges on the left, months on the right */
.bp-dr-pop .bp-dr-body{display:flex;gap:12px;min-width:0}
/* The nine quick ranges are as tall together as a month, so the column does not
   make the calendar taller: 24px each, the least a pointer target should be. */
.bp-dr-pop .bp-dr-pres{display:flex;flex:none;flex-direction:column;justify-content:space-between;gap:1px;width:118px}
.bp-dr-pop button.bp-dr-pre{min-height:24px;padding:3px 6px;border:0;border-radius:5px;background:transparent;color:var(--bp-dr-accent);font-size:13px;font-weight:400;line-height:1.3;text-align:left;white-space:nowrap}
.bp-dr-pop button.bp-dr-pre:hover{background:var(--bp-dr-soft)}
.bp-dr-pop .bp-dr-cal{flex:1 1 auto;min-width:0}
.bp-dr-pop .bp-dr-months{display:flex;gap:14px;min-width:0}
.bp-dr-pop .bp-dr-mon{flex:1 1 0;min-width:0}
.bp-dr-pop .bp-dr-mh,.bp-dr-pop .bp-dr-jy{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:4px}
.bp-dr-pop button.bp-dr-nav{padding:2px 8px;border:0;border-radius:5px;background:transparent;color:var(--bp-dr-accent);font-size:16px;font-weight:400;line-height:1.3}
.bp-dr-pop button.bp-dr-title{padding:2px 6px;border:0;border-radius:5px;background:transparent;color:var(--bp-dr-ink);font-weight:700;white-space:nowrap}
.bp-dr-pop button.bp-dr-nav:hover,.bp-dr-pop button.bp-dr-title:hover{background:var(--bp-dr-soft)}
.bp-dr-pop .bp-dr-week,.bp-dr-pop .bp-dr-grid{display:grid;grid-template-columns:repeat(7,1fr);font-variant-numeric:tabular-nums}
.bp-dr-pop .bp-dr-wd{padding:3px 0;color:var(--bp-dr-mute);font-size:11px;text-align:center}
/* Every point in a row of days belongs to a day. So the days touch, with no
   gap, and the button itself is a plain square: a rounded corner on the button
   would leave its corner pixels belonging to nothing. The rounded highlight
   is drawn behind the number (::before), which changes what is seen and not
   what the pointer hits. */
.bp-dr-pop .bp-dr-blank{display:block;height:30px}
.bp-dr-pop button.bp-dr-day{display:block;position:relative;isolation:isolate;width:100%;height:30px;padding:0;border:0;border-radius:0;background:transparent;color:var(--bp-dr-ink);font-weight:400;line-height:30px;text-align:center}
.bp-dr-pop button.bp-dr-day::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:5px;background:transparent;pointer-events:none}
.bp-dr-pop button.bp-dr-day:hover::before{background:var(--bp-dr-soft)}
.bp-dr-pop button.bp-dr-day.is-today::before{box-shadow:inset 0 0 0 1px var(--bp-dr-accent)}
.bp-dr-pop button.bp-dr-day.is-in::before{border-radius:0;background:var(--bp-dr-soft)}
.bp-dr-pop button.bp-dr-day.is-end{color:var(--bp-dr-on-accent);font-weight:700}
.bp-dr-pop button.bp-dr-day.is-end::before{background:var(--bp-dr-accent)}
.bp-dr-pop button.bp-dr-day.is-lo::before{border-radius:5px 0 0 5px}
.bp-dr-pop button.bp-dr-day.is-hi::before{border-radius:0 5px 5px 0}
.bp-dr-pop button.bp-dr-day.is-off{color:var(--bp-dr-mute);opacity:.45;text-decoration:line-through;cursor:default}
.bp-dr-pop button.bp-dr-day.is-off::before{background:transparent}
.bp-dr-pop button.bp-dr-day:focus-visible{outline-offset:-2px}
.bp-dr-pop button.bp-dr-day.is-end:focus-visible{outline-color:var(--bp-dr-ink)}

/* choosing a month and year, in place of the days */
.bp-dr-pop .bp-dr-jump{max-width:300px;margin:0 auto}
.bp-dr-pop .bp-dr-jyear{font-weight:700;font-variant-numeric:tabular-nums}
.bp-dr-pop .bp-dr-jgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.bp-dr-pop button.bp-dr-jm{padding:12px 0;border:0;border-radius:5px;background:transparent;color:var(--bp-dr-ink);font-weight:400;text-align:center}
.bp-dr-pop button.bp-dr-jm:hover{background:var(--bp-dr-soft)}
.bp-dr-pop button.bp-dr-jm[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--bp-dr-accent);font-weight:700}

.bp-dr-pop .bp-dr-foot{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px solid var(--bp-dr-line)}
.bp-dr-pop button.bp-dr-btn{padding:6px 12px;border:1px solid var(--bp-dr-line);border-radius:6px;background:var(--bp-dr-panel);color:var(--bp-dr-ink);font-weight:400}
.bp-dr-pop button.bp-dr-btn:hover{border-color:var(--bp-dr-accent)}
.bp-dr-pop button.bp-dr-done{margin-left:auto;border-color:var(--bp-dr-accent);background:var(--bp-dr-accent);color:var(--bp-dr-on-accent);font-weight:600}

/* two months: one arrow at each outer end */
@media (min-width:621px){
  .bp-dr-pop .bp-dr-mon:first-child .bp-dr-next,.bp-dr-pop .bp-dr-mon:last-child .bp-dr-prev{visibility:hidden}
}

/* ---------- a phone: one month, at the bottom of the screen ---------- */
@media (max-width:620px){
  .bp-dr-pop,.bp-dr-pop.bp-dr-plain{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
    padding:14px 12px calc(12px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-radius:12px 12px 0 0;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
  .bp-dr-pop .bp-dr-hint{flex-basis:100%;text-align:left}
  .bp-dr-pop .bp-dr-body{flex-direction:column}
  .bp-dr-pop .bp-dr-pres{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 2px;width:auto}
  .bp-dr-pop button.bp-dr-pre{padding:7px 7px}
  .bp-dr-pop .bp-dr-mon + .bp-dr-mon{display:none}
  .bp-dr-pop .bp-dr-blank,.bp-dr-pop button.bp-dr-day{height:36px;line-height:36px}
  .bp-dr-pop button.bp-dr-nav{padding:4px 14px}
  .bp-dr-pop button.bp-dr-btn{padding:8px 14px}
}
/* a short phone: slightly shorter days, so the whole sheet shows without scrolling */
@media (max-width:620px) and (max-height:600px){
  .bp-dr-pop .bp-dr-blank,.bp-dr-pop button.bp-dr-day{height:33px;line-height:33px}
}

@media (prefers-reduced-motion:no-preference){
  .bp-dr-pop{animation:bp-dr-in .12s ease-out}
  @keyframes bp-dr-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @media (max-width:620px){
    .bp-dr-pop{animation-name:bp-dr-up}
    @keyframes bp-dr-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  }
}

/* The calendar is never printed. */
@media print{
  .bp-dr-pop{display:none!important}
}