/* ────────────────────────────────────────────────────────────────────────
   DaterangePicker — native (jQuery-free) implementation.
   Class prefix `drpn-`. Some legacy class names (`day`, `month1`, `gap`,
   `checked`, `first-date-selected`, `last-date-selected`, `real-today`,
   `hovering`, `prev`, `next`, `month-name`, `week-name`, etc.) are emitted
   on the same elements so existing CSS overrides keep working.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Legacy class hooks the component still exposes ──────────────────── */

.pd-daterange-picker-modal-mode {
	position: relative;
}

.pd-daterange-picker-modal-mode input {
	pointer-events: none;
}

.pd-daterange-picker-clear-button {
	position: absolute;
	right: 10px;
	top: 0;
	cursor: pointer;
	padding: 10px 5px;
	font-size: 16px;
	font-weight: bold;
	color: rgb(94, 98, 120);
	z-index: 500;
}

.drpn-root {
	font-family:
		Montserrat,
		Helvetica Neue,
		Arial,
		sans-serif;
}

.drpn-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.drpn-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.drpn-input-wrap input {
	flex: 1;
}

.drpn-clear-button {
	right: 10px;
	top: 0;
}

/* ── Dropdown root ──────────────────────────────────────────────────── */

.drpn-dropdown {
	position: absolute;
	border: 1px solid #bfbfbf;
	background-color: #efefef;
	font-size: 12px;
	line-height: 20px;
	color: #aaa;
	font-family:
		Montserrat,
		Helvetica Neue,
		Arial,
		sans-serif;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
	box-sizing: initial;
	padding: 0;
	border-radius: 4px;
	z-index: 2050;
}

.drpn-dropdown.drpn-pos-default {
	top: 100%;
	left: 0;
	margin-top: 4px;
}

.drpn-dropdown.drpn-pos-left {
	top: 100%;
	left: 0;
	margin-top: 4px;
}

.drpn-dropdown.drpn-pos-right {
	top: 100%;
	right: 0;
	left: auto;
	margin-top: 4px;
}

.drpn-dropdown.drpn-pos-up {
	bottom: 100%;
	top: auto;
	margin-bottom: 4px;
	margin-top: 0;
}

.drpn-dropdown.drpn-pos-fixed {
	position: fixed;
}

.drpn-dropdown.drpn-pos-inline {
	position: relative;
	display: inline-block;
	box-shadow: none;
	margin-top: 0;
}

.drpn-content {
	position: relative;
	border: 1px solid #bfbfbf;
	border-radius: 3px;
	background-color: #fff;
	padding: 20px 27px;
	cursor: default;
	width: auto;
}

.drpn-pos-inline .drpn-content {
	border: 0;
}

.drpn-month-wrapper-inner {
	display: flex;
	align-items: flex-start;
}

/* ── Topbar ─────────────────────────────────────────────────────────── */

.drpn-topbar {
	font-size: 12px;
	color: #333;
	padding: 6px 0 10px 0;
	display: none; /* legacy default-hidden, keeps parity with jQuery layout */
}

.drpn-topbar b {
	color: #393562;
	font-weight: 700;
}

.drpn-topbar .separator-day {
	color: #888;
}

/* ── Tables ─────────────────────────────────────────────────────────── */

.drpn-table {
	width: 295px;
	border-collapse: separate;
	border-spacing: 0;
}

.drpn-table th,
.drpn-table td {
	vertical-align: middle;
	text-align: center;
	line-height: 14px;
	margin: 0;
	padding: 0;
}

.drpn-table thead .caption th {
	padding-top: 0;
}

.drpn-table .caption .prev,
.drpn-table .caption .next {
	cursor: pointer;
	padding: 0 5px;
	color: #212529;
	font-size: 14px;
	user-select: none;
	display: inline-block;
}

.drpn-table .caption .prev:hover,
.drpn-table .caption .next:hover {
	color: #c9c9c9;
	transition: all 0.1s linear;
}

.drpn-cap-prev {
	width: 27px;
	text-align: left;
}

.drpn-cap-next {
	width: 27px;
	text-align: right;
}

.drpn-table .month-name {
	color: #393562;
	text-align: center;
	font-style: normal;
	font-weight: 600;
	line-height: 27px;
	text-transform: capitalize;
	font-size: 14px;
	padding-bottom: 8px;
}

.drpn-table .month-name .month-element,
.drpn-table .month-name .year-element {
	display: inline-block;
}

/* Selectable month/year (the chevron click target) */

.drpn-table .month-name .select-wrapper {
	position: relative;
	display: inline-block;
}

.drpn-table .drpn-month-label,
.drpn-table .drpn-year-label {
	cursor: pointer;
	color: #393562;
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
}

.drpn-table .drpn-year-label {
	padding-left: 4px;
}

.drpn-table .select-wrapper-dropdown-icon {
	display: inline-block;
	transform: translateY(-2px);
	padding-right: 6px;
}

.drpn-table .drp-arrow-down {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	display: inline-block;
}

.drpn-table .select-wrapper select {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0.001;
	cursor: pointer;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* ── Weekday header ─────────────────────────────────────────────────── */

.drpn-table .week-name {
	height: 20px;
	line-height: 20px;
	font-weight: 100;
	text-transform: uppercase;
	color: #aaa;
	font-size: 11px;
	border-top: 2px solid #eff1f8;
	border-bottom: 2px solid #eff1f8;
}

.drpn-table .week-name th {
	padding: 9px 12.324px;
}

.drpn-table .week-name th:nth-child(5),
.drpn-table tbody td:nth-child(5) {
	border-right: 0.667px solid #dfe3f1;
}

/* ── Day cells ──────────────────────────────────────────────────────── */

.drpn-table tbody td {
	position: relative;
}

.drpn-table tbody td > div {
	background-color: inherit !important;
	line-height: 1.9;
	margin-left: 5px;
	margin-right: 5px;
}

.drpn-table .day {
	padding: 5px 0;
	line-height: 1.9;
	font-size: 12px;
	margin-bottom: 1px;
	cursor: default;
	height: 32px;
	width: 32px;
	color: #393562;
	text-align: center;
	font-style: normal;
	font-weight: 600;
	z-index: 99;
}

.drpn-table .day.lastMonth,
.drpn-table .day.nextMonth {
	display: none; /* matches jQuery: hide outside-month days */
}

/* Keyboard-navigation focus ring on the day cell (WCAG 2.4.7). The class sits on
   the <td>; outline the inner .day so it reads above any range fill. */
.drpn-table td.kbd-focused .day {
	outline: 2px solid #2b55cc;
	outline-offset: -2px;
	border-radius: 4px;
	position: relative;
	z-index: 100;
}

/* placeholder cell emitted instead of rendering a hidden .day for outside-month
   slots — preserves the 7-column grid without the extra inner div. */
.drpn-table .drpn-other-month,
.drpn-mvs-table .drpn-other-month {
	background: transparent;
	pointer-events: none;
}

.drpn-table .day.toMonth.valid {
	color: #333;
	cursor: pointer;
}

.drpn-table .day.toMonth.invalid {
	color: #c9c9c9;
	cursor: default;
}

.drpn-table .day.toMonth.hovering {
	background-color: #cdecfa;
}

.drpn-table .day.real-today {
	background-color: rgb(255, 230, 132);
	box-shadow: inset 0 0 0 2px #4d7cfc;
	border-radius: 50%;
}

.drpn-table .day.real-today.checked,
.drpn-table .day.real-today.hovering {
	background-color: rgb(112, 204, 213);
}

/* Range fill on the cell wrapper td (matches `td:has(.checked)` in legacy) */

.drpn-table tbody td:has(.checked),
.drpn-table tbody td:has(.hovering) {
	background-color: #e8edff;
}

.drpn-table tbody td:has(.first-date-selected)::after,
.drpn-table tbody td:has(.last-date-selected)::before {
	content: '';
	position: absolute;
	width: 60%;
	height: 100%;
	z-index: 0;
	background-color: #e8edff;
}

.drpn-table tbody td:has(.first-date-selected)::after {
	bottom: 0;
	right: -5px;
}

.drpn-table tbody td:has(.last-date-selected)::before {
	top: 0;
	left: -5px;
}

.drpn-table tbody td:has(.checked.last-date-selected),
.drpn-table tbody td:has(.checked.first-date-selected) {
	background-color: transparent;
}

.drpn-table .day.checked {
	background-color: rgb(156, 219, 247);
}

.drpn-table .day.checked.last-date-selected,
.drpn-table .day.checked.first-date-selected {
	position: relative;
	border-radius: 50%;
	background-color: #4d7cff !important;
	color: #ffffff !important;
}

/* Max-day cap indicator: marks the inclusive last picker-able day under the
   active maxDays cap. Acts as a "fence post" — the dashed right border on the
   td reads as "you can go up to here". Rendered only while a partial selection
   is in progress (the cap is dormant once both endpoints are picked). */

.drpn-table tbody td:has(.day.max-day-cap) {
	position: relative;
}

.drpn-table tbody td:has(.day.max-day-cap)::after {
	content: '';
	position: absolute;
	top: 4px;
	bottom: 4px;
	right: -1px;
	width: 0;
	border-right: 2px dashed #b94c4c;
	z-index: 100;
	pointer-events: none;
}

/* ── Gap (decorative separator between two months in legacy) ───────── */

.drpn-month-wrapper-inner > .gap {
	width: 15px;
	height: auto;
	font-size: 0;
	line-height: 0;
	margin: 0 10px;
	visibility: hidden;
}

/* ── Tooltip chip ───────────────────────────────────────────────────── */

.drpn-tooltip {
	position: absolute;
	background-color: #4d7cff;
	color: #fff;
	padding: 0 6px;
	border-radius: 2px;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	z-index: 100;
	pointer-events: none;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.drpn-tooltip::after {
	content: '';
	position: absolute;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #4d7cff;
	left: 50%;
	margin-left: -4px;
	bottom: -4px;
}

/* Cap-overflow error variant. Selectors include `.date-range-picker-root` to
   raise specificity above app-level overrides like
   `body .date-range-picker-root .drpn-tooltip { ... !important }` that some
   consumers apply to the base tooltip; without this, the red error background
   would be silently lost. `!important` keeps the rule winning even when the
   consumer override also uses `!important`. */
.date-range-picker-root .drpn-tooltip.drpn-tooltip-error {
	background-color: #b94c4c !important;
}

.date-range-picker-root .drpn-tooltip.drpn-tooltip-error::after {
	border-top-color: #b94c4c !important;
}

/* Tooltip must paint above the day-cell label. `.drpn-table .day` carries
   `z-index: 99` and gains a stacking context via consumer rules like
   `.day.valid { position: relative }` (gopass shop SCSS). The base tooltip
   `z-index: 100` would normally win, but consumer overrides reset it (e.g.
   gopass `body .date-range-picker-root .drpn-tooltip { z-index: 10 }`),
   sinking the chip below the day number. Re-assert with the same 3-class
   form as the error variant + `!important` so both the normal and red
   overflow tooltip variants always sit on top of the cell content. */
.date-range-picker-root .drpn-tooltip {
	z-index: 1000 !important;
}

/* ── Time picker ────────────────────────────────────────────────────── */

.drpn-time-row {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid #eff1f8;
}

.drpn-time {
	width: 295px; /* match the calendar table width so each time picker sits below its calendar */
	padding: 0 5px;
	text-align: center;
	box-sizing: border-box;
}

.drpn-content.drpn-single-month .drpn-time-row {
	justify-content: center;
}

.drpn-time .time-current-container {
	font-size: 12px;
	color: #393562;
	margin-bottom: 4px;
}

.drpn-time .hour,
.drpn-time .minute {
	text-align: right;
	white-space: nowrap;
	margin-bottom: 2px;
}

.drpn-time label {
	white-space: nowrap;
	display: inline-block;
}

.drpn-time input[type='range'] {
	display: inline-block;
	width: 129px;
	margin: 0;
	padding: 0;
	height: 20px;
	vertical-align: middle;
}

/* ── Footer (Confirm/Cancel) ────────────────────────────────────────── */

.drpn-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 12px;
	margin-top: 12px;
	border-top: 1px solid #eff1f8;
}

.drpn-btn {
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 6px;
	border: 1px solid #d0d4dd;
	background: #fff;
	color: #393562;
	cursor: pointer;
	transition: all 120ms ease;
}

.drpn-btn:hover {
	background: #f6f7f9;
}

.drpn-btn-confirm {
	background: #4d7cff;
	border-color: #4d7cff;
	color: #fff;
}

.drpn-btn-confirm:hover {
	background: #3a68e6;
	border-color: #3a68e6;
	color: #fff;
}

.drpn-btn-cancel {
	color: #6b7280;
}

/* ── Single-month layout overrides ──────────────────────────────────── */

.drpn-content.drpn-single-month .drpn-month-wrapper-inner {
	flex-direction: column;
}

@media (max-width: 690px) {
	.drpn-month-wrapper-inner > .gap {
		display: none;
	}
}

@media (max-width: 680px) {
	.drpn-month-wrapper-inner {
		flex-direction: column;
	}
}

/* ── Modal mode ─────────────────────────────────────────────────────── */

.drpn-modal .modal-body.drpn-modal-body {
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.drpn-modal .drpn-content {
	border: 0;
	box-shadow: none;
	width: 100%;
	padding: 14px;
	background-color: transparent;
}

.drpn-modal .drpn-month-wrapper-inner {
	flex-direction: column;
}

/* ── Mobile vertical-scroll ─────────────────────────────────────────── */

.drpn-mvs {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.drpn-mvs-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px 8px;
	background: #fff;
	gap: 12px;
}

.drpn-mvs-selectors {
	display: flex;
	align-items: center;
	gap: 6px;
}

.drpn-mvs-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 6px;
	background: #f6f7f9;
	cursor: pointer;
	transition: background 120ms ease;
}

.drpn-mvs-select-wrap:hover {
	background: #eef0f3;
}

.drpn-mvs-select-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #393562;
	text-transform: capitalize;
}

.drpn-mvs-select {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0.001;
	cursor: pointer;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.drpn-mvs-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 5;
	border-top: 2px solid #eff1f8;
	border-bottom: 2px solid #eff1f8;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #aaa;
	padding: 9px 0;
	text-align: center;
}

.drpn-mvs-scroll {
	flex: 1;
	min-height: 0;
	/* position:relative makes THIS the offsetParent of the .drpn-mvs-month blocks, so
	   `monthEl.offsetTop` is measured relative to the scroll container (0 for the first
	   rendered month). scrollToMonth() / scrollMvsToCurrent() / onMvsScroll() all read
	   offsetTop against scroll.scrollTop. Without a positioned scroll container the
	   offsetParent falls through to the positioned .drpn-content, so offsetTop
	   over-counts by the .drpn-mvs-header + .drpn-mvs-weekdays heights above the scroll
	   and `scrollTop = offsetTop - 8` over-scrolls — burying the selected month's
	   name/year label under the top edge until the user scrolls. (QA__G-282 follow-up.) */
	position: relative;
	overflow-y: auto;
	/* Intentionally NO -webkit-overflow-scrolling: touch — on iOS Safari it breaks the
	   position:sticky weekday header (it misaligns / jumps during momentum scroll).
	   Momentum scrolling is the default for overflow containers on modern iOS, so the
	   property is unnecessary; Chrome/Android never honoured it, so removing it is a
	   no-op there. */
}

.drpn-mvs-month {
	padding: 14px 14px 4px;
}

.drpn-mvs-month-name {
	color: #393562;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	padding-bottom: 6px;
	text-align: center;
}

.drpn-mvs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.drpn-mvs-table td {
	vertical-align: middle;
	text-align: center;
	position: relative;
	background-color: inherit;
}

.drpn-mvs-table .day {
	height: 38px;
	width: 38px;
	max-width: 38px;
	margin: 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #393562;
	cursor: pointer;
	line-height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-sizing: border-box;
}

.drpn-mvs-table .day.lastMonth,
.drpn-mvs-table .day.nextMonth {
	visibility: hidden;
}

.drpn-mvs-table .day.real-today {
	background-color: rgb(255, 230, 132);
	box-shadow: inset 0 0 0 2px #4d7cfc;
	border-radius: 50%;
}

.drpn-mvs-table tbody td:has(.checked) {
	background-color: #e8edff;
}

.drpn-mvs-table .day.checked.last-date-selected,
.drpn-mvs-table .day.checked.first-date-selected {
	border-radius: 50%;
	background-color: #4d7cff !important;
	color: #ffffff !important;
}

.drpn-mvs .drpn-footer {
	border-top: 1px solid #e2e5ea;
	padding: 10px 14px;
	background: #fff;
}

/* ── Currency info footer row ────────────────────────────────────────── */

.drpn-footer-info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #eff1f8;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #4b5565;
}

.drpn-footer-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	font-size: 16px;
	color: #4b5565;
}

.drpn-footer-info-text {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.drpn-footer-info-text strong {
	font-weight: 700;
}