/*
include_meta {
    DevMode: false,
    Category: "Public",
    LoadPriority: 32,
    Media: "screen"
}
*/
/** Pareto Date / Time Pickers **/

/* --- Drag-drop states: every day can take what is being dragged, so only the
   one under the pointer is marked (the calendar's own drop-target blue) --- */
td.pdp-day-cell-droppable {
	transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

td.pdp-day-cell-droppable-hover {
	background-color: rgba(66, 133, 244, 0.16) !important;
	box-shadow: inset 0 0 0 2px rgba(66, 133, 244, 0.55);
}

/* --- Input field --- */
.pareto_picker_input {
	color: #24282d;
}

/* --- Container --- */
.pareto_picker_container {
	display: block;
	position: absolute;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 12px;
	font-family: 'Manrope', sans-serif;
	box-sizing: border-box;
}

/* --- Clear value --- */
.pareto_picker_clear_value_label {
	display: block;
	position: static;
	font-size: 12px;
	color: #999;
	text-decoration: none;
	text-align: right;
	padding: 8px 4px 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.pareto_picker_clear_value_label:hover {
	color: #555;
	text-decoration: underline;
}

/* --- Navigation controls row --- */
.pareto_date_picker_prev_month,
.pareto_date_picker_next_month {
	width: 32px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.pareto_date_picker_prev_month:hover,
.pareto_date_picker_next_month:hover {
	background-color: #f0f0f0;
}

.pareto_date_picker_prev_month > span,
.pareto_date_picker_next_month > span {
	font-size: 0;
	line-height: 0;
}

.pareto_date_picker_prev_month > span::after {
	content: '‹';
	font-size: 22px;
	font-weight: 300;
	color: #555;
	line-height: 1;
}

.pareto_date_picker_next_month > span::after {
	content: '›';
	font-size: 22px;
	font-weight: 300;
	color: #555;
	line-height: 1;
}

/* --- Jump to today button --- */
.pareto_date_picker_jump_today {
	width: 32px !important;
	cursor: pointer;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.pareto_date_picker_jump_today:hover {
	background-color: #f0f0f0;
}

/* --- Month / Year selector dropdowns --- */
.pareto_date_picker_month_selector,
.pareto_date_picker_year_selector {
	display: inline-block;
}

.pareto_date_picker_month_selector select,
.pareto_date_picker_year_selector select {
	-webkit-appearance: none;
	appearance: none;
	background-color: #f5f5f5;
	color: #24282d;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 20px 4px 8px;
	height: auto;
	box-sizing: border-box;
	cursor: pointer;
	text-align: left;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	transition: border-color 0.15s ease;
}

.pareto_date_picker_month_selector select:hover,
.pareto_date_picker_year_selector select:hover {
	border-color: #bbb;
}

.pareto_date_picker_month_selector select:focus,
.pareto_date_picker_year_selector select:focus {
	outline: none;
	border-color: #00529b;
}

/* --- Day-of-week headers --- */
.pareto_date_picker_dow_header {
	font-weight: 600;
	text-align: center;
	color: #999;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pareto_date_picker_dow_header td {
	width: 34px;
	color: #999;
	padding: 6px 0 4px;
}

/* --- Calendar date rows --- */
.pareto_date_picker_cal_row {
	text-align: center;
	height: auto;
}

.pareto_date_picker_cal_row td {
	cursor: pointer;
	color: #333;
	background-color: transparent;
	border-radius: 4px;
	width: 30px;
	height: 30px;
	font-size: 12px;
	vertical-align: middle;
	transition: background-color 120ms ease;
}

.pareto_date_picker_cal_row td:hover {
	background-color: #f0f0f0;
}

/* --- Out-of-bounds (other month) cells --- */
.pareto_date_picker_cal_oob_cell {
	color: #ccc !important;
	background-color: transparent !important;
}

.pareto_date_picker_cal_oob_cell:hover {
	background-color: #f8f8f8 !important;
}

/* --- Today cell: outlined, so it stays recognisable without competing with the selection.
   It used to carry the solid fill, which made today read as the chosen date
   (#1608 TSK-028, #1605 CAL-027a). --- */
.pareto_date_picker_cal_today_cell {
	color: #00529b !important;
	font-weight: 600;
	background-color: transparent !important;
	border-radius: 4px;
	box-shadow: inset 0 0 0 2px #00529b;
}

.pareto_date_picker_cal_today_cell:hover {
	background-color: #e0ecf7 !important;
}

/* --- Weekend cells --- */
.pareto_date_picker_cal_row td.pareto_date_picker_cal_weekend_cell {
	background-color: #f1f1f1;
}

.pareto_date_picker_cal_row td.pareto_date_picker_cal_weekend_cell:hover {
	background-color: #f0f0f0;
}

.pareto_date_picker_cal_row td.pareto_date_picker_cal_weekend_cell.pareto_date_picker_cal_oob_cell {
	background-color: #f1f1f1 !important;
}

.pareto_date_picker_cal_row td.pareto_date_picker_cal_weekend_cell.pareto_date_picker_cal_oob_cell:hover {
	background-color: #f0f0f0 !important;
}

/* --- Selected cell: the filled one, because it is the date the user chose.
   (The apply-process mini calendar already had to override the old rule to get this.) --- */
.pareto_date_picker_cal_selected_cell {
	color: #fff !important;
	font-weight: 700;
	background-color: #00529b !important;
	border-radius: 4px;
}

/* Selected AND today: the fill marks the selection, the ring still marks today */
.pareto_date_picker_cal_today_cell.pareto_date_picker_cal_selected_cell {
	color: #fff !important;
	background-color: #00529b !important;
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #00529b;
}

/* --- Specificity overrides for nested context --- */
div.pareto_picker_container div div .wide tbody .pareto_date_picker_cal_row .pareto_date_picker_cal_today_cell {
	color: #00529b;
}

div.pareto_picker_container div div .wide tbody .pareto_date_picker_cal_row .pareto_date_picker_cal_oob_cell {
	background-color: transparent;
	color: #ccc;
}

/*** Time Picker ***/

.pareto_time_picker_table_scroll_up {
	height: 18px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/images/icons/18/single_arrow_thick_u_18x.png);
}

.pareto_time_picker_table_scroll_down {
	height: 18px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/images/icons/18/single_arrow_thick_d_18x.png);
}

.pareto_time_picker_table_selection_container {
	overflow: hidden;
	text-align: center;
}

.pareto_time_picker_time_select {
	transition: background-color 0.5s ease;
	height: 20px;
	cursor: pointer;
}

.pareto_time_picker_time_select:hover {
	background-color: rgba(20, 20, 20, 0.4);
	color: rgb(200, 200, 255);
}

.pareto_time_picker_time_select_selected {
	font-weight: bold;
	color: #fff;
	background-color: #00529b;
	border-radius: 4px;
}

/** End Pareto Date / Time Pickers **/

/* ============================================
   Mini-calendar sidebar overrides (preserved)
   ============================================ */

div.ops_container div.mini_cal_container {
	max-width: 100%;
}

div.ops_container div.mini_cal_container div.pareto_picker_container {
	box-shadow: none;
	margin-bottom: 0;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	width: 100%;
	background-color: #FFFFFF;
	padding: 12px;
	box-sizing: border-box;
	overflow: hidden;
	position: static;
}

div.ops_container div.mini_cal_container table {
	width: 100%;
	table-layout: auto;
	border-collapse: separate;
}

div.ops_container div.mini_cal_container table td {
	padding: 2px;
	width: auto;
}

div.ops_container div.mini_cal_container .pareto_date_picker_dow_header td {
	width: auto;
}

div.ops_container div.mini_cal_container .pareto_date_picker_month_selector,
div.ops_container div.mini_cal_container .pareto_date_picker_year_selector {
	margin: 0;
	white-space: nowrap;
}

div.ops_container div.mini_cal_container table td:has(.pareto_date_picker_month_selector),
div.ops_container div.mini_cal_container table td:has(.pareto_date_picker_year_selector) {
	width: 1%;
	white-space: nowrap;
}

div.ops_container div.mini_cal_container .pareto_date_picker_month_selector select,
div.ops_container div.mini_cal_container .pareto_date_picker_year_selector select {
	width: auto;
	border-radius: 6px;
	font-family: 'Manrope', sans-serif;
	font-size: 12px;
	padding: 4px 18px 4px 6px;
	height: auto;
}

div.ops_container div.mini_cal_container .pareto_date_picker_jump_today {
	width: 28px !important;
	height: 28px;
	padding-right: 30px !important;
	background-image: url(/images/icons/mini-cal-today-icon.svg);
	background-size: 24px 24px;
}

div.ops_container div.mini_cal_container table thead th,
div.ops_container div.mini_cal_container table tbody td {
	font-size: 12px;
	padding: 2px;
	text-align: center;
}

div.ops_container div.mini_cal_container table tbody td {
	height: 24px;
	vertical-align: middle;
	border-radius: 6px;
}

/* #1608 TSK-016 / #1605 CAL-010: the keyboard cursor. Distinct from both the selection
   (filled) and today (ringed), because it can sit on either while arrowing around. */
.pdp-day-cell-keyboard-focus {
	box-shadow: inset 0 0 0 2px #1b74c9;
	border-radius: 4px;
}

/* --- #1662: the calendar's sidebar mini calendar wants the opposite emphasis to a picker,
   and both are right.

   In a picker you are CHOOSING a date, so the chosen one is the subject and today is
   context - that is #1608 TSK-028 / #1605 CAL-027a, and it stays as it is above.

   In the sidebar you are NAVIGATING, and today is the anchor you keep orienting back to
   while the selected day is just where you happen to be looking. So today keeps the solid
   fill here and the selection takes the light treatment, as it did before d9a70e1c.

   Scoped to .mini_cal_container so the picker popup is untouched. --- */
.mini_cal_container .pareto_date_picker_cal_today_cell {
	color: #fff !important;
	font-weight: 700;
	background-color: #00529b !important;
	border-radius: 4px;
	box-shadow: none;
}

.mini_cal_container .pareto_date_picker_cal_today_cell:hover {
	background-color: 00437f !important;
}

.mini_cal_container .pareto_date_picker_cal_selected_cell {
	color: #00529b !important;
	font-weight: 600;
	background-color: #e0ecf7 !important;
	border-radius: 4px;
}

/* Today and selected at once: today's fill wins, so today never loses its identity. */
.mini_cal_container .pareto_date_picker_cal_today_cell.pareto_date_picker_cal_selected_cell {
	color: #fff !important;
	background-color: #00529b !important;
	box-shadow: none;
}

/* #1670: manual time entry, shown only when the calendar setting enables it. Sits under the
   wheel as an escape hatch for a time no increment can express; the list above stays the fast
   path, so this is deliberately quiet rather than the focal point of the popup. */
.pareto_time_picker_manual_cell {
    padding: 4px;
}

.pareto_time_picker_manual_input {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.pareto_time_picker_manual_input:focus {
    outline: none;
    border-color: #16387D;
}

/* Invalid text can still be typed one character at a time - "8:7" is a legal prefix of "8:75".
   The cue says "not yet a time" while they are mid-entry; it is the commit that refuses, not
   the keystroke. */
.pareto_time_picker_manual_input.pareto_time_picker_manual_invalid {
    border-color: #c0392b;
    background-color: #fdf3f2;
}