/* remuvl 2026-10-21: flat dropdowns and our own date / time pickers (pickers.js) on every remuvl screen.
   Colours come from --rp-*; each page maps them to its own (the office in office-ui.css, the others where this file
   is loaded). Low specificity (:where) so a page's own sizes and borders still win. */
:root {
  --rp-card: #fff; --rp-ink: #1d212f; --rp-mute: #8c9097; --rp-line: #e3e3ef; --rp-soft: #f4f5f9;
  --rp-acc: #845adf; --rp-on: #fff; --rp-f: inherit;
}
:where(select:not([multiple]):not([size])) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9097' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right max(8px, .75em) center !important; background-size: clamp(12px, 1.25em, 16px) !important; padding-right: calc(clamp(12px, 1.25em, 16px) + max(8px, .75em) + 6px) !important; /* 2026-10-22: the arrow to the text's size, close to it */
}
@supports (appearance: base-select) {
  :where(select:not([multiple]):not([size])), :where(select:not([multiple]):not([size]))::picker(select) { appearance: base-select; }
  :where(select)::picker-icon { display: none; }
  /* 2026-10-22: the text in the middle of the box (base-select put it at the top: the pills looked skew) */
  select:not([multiple]):not([size]) { display: inline-flex; align-items: center; line-height: 1.2; }
  :where(select)::picker(select) { border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-card); color: var(--rp-ink); padding: 6px; box-shadow: 0 12px 32px rgba(17, 28, 67, .16); margin-top: 4px; max-height: 320px; }
  :where(select) option { padding: 8px 12px; border-radius: 8px; font-family: var(--rp-f); }
  :where(select) option:hover, :where(select) option:focus-visible { background: var(--rp-soft); outline: none; }
  :where(select) option:checked { background: color-mix(in srgb, var(--rp-acc) 12%, transparent); color: var(--rp-acc); font-weight: 600; }
  :where(select) option::checkmark { display: none; }
}
:where(input[type=date]:not([data-native])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9097' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 17px !important; padding-right: 36px !important; cursor: pointer;
}
:where(input[type=time]:not([data-native])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9097' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 17px !important; padding-right: 36px !important; cursor: pointer;
}
input[type=date]:not([data-native])::-webkit-calendar-picker-indicator, input[type=time]:not([data-native])::-webkit-calendar-picker-indicator { display: none; }

.dp-pop { position: fixed; z-index: 100000; width: 300px; max-width: calc(100vw - 16px); padding: 14px; box-sizing: border-box; background: var(--rp-card); color: var(--rp-ink); border: 1px solid var(--rp-line); border-radius: 16px; box-shadow: 0 16px 40px rgba(17, 28, 67, .18); font-family: var(--rp-f); text-align: left; }
.dp-pop * { box-sizing: border-box; }
.dp-pop button { font-family: var(--rp-f); margin: 0; line-height: 1; text-transform: none; letter-spacing: 0; min-height: 0; box-shadow: none; }
.dp-pop .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-pop .dp-head b { font-size: 15px; font-weight: 600; }
.dp-pop .dp-nav { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--rp-soft); color: var(--rp-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dp-pop .dp-nav:hover { background: color-mix(in srgb, var(--rp-acc) 12%, transparent); color: var(--rp-acc); }
.dp-pop .dp-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dp-pop .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dp-pop .dp-dow { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--rp-mute); padding: 4px 0 6px; }
.dp-pop .dp-day, .dp-pop .dp-t { border: 0; border-radius: 9px; background: var(--rp-soft); color: var(--rp-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.dp-pop .dp-day { aspect-ratio: 1; }
.dp-pop .dp-t { height: 34px; }
.dp-pop .dp-day:hover:not(:disabled), .dp-pop .dp-t:hover:not(:disabled) { background: color-mix(in srgb, var(--rp-acc) 12%, transparent); color: var(--rp-acc); }
.dp-pop .dp-day.out { background: transparent; color: var(--rp-mute); opacity: .65; }
.dp-pop .dp-day.today, .dp-pop .dp-t.today { box-shadow: inset 0 0 0 1.5px var(--rp-acc); }
.dp-pop .dp-day.on, .dp-pop .dp-t.on { background: var(--rp-acc); color: var(--rp-on); font-weight: 700; }
.dp-pop .dp-day:disabled, .dp-pop .dp-t:disabled { opacity: .3; cursor: default; }
.dp-pop .dp-day:focus-visible, .dp-pop .dp-nav:focus-visible, .dp-pop .dp-t:focus-visible { outline: 2px solid var(--rp-acc); outline-offset: 1px; }
.dp-pop .dp-thead { justify-content: center; }
.dp-pop .dp-tval { font-size: 22px !important; font-weight: 700 !important; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.dp-pop .dp-tlab { margin: 4px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-mute); }
.dp-pop .dp-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 8px; }
.dp-pop .dp-mins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.dp-pop .dp-mins.few { grid-template-columns: repeat(4, 1fr); }
.dp-pop .dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rp-line); }
.dp-pop .dp-foot button { border: 0; background: transparent; color: var(--rp-acc); font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.dp-pop .dp-foot button:hover { background: color-mix(in srgb, var(--rp-acc) 12%, transparent); }