/* bootstrap-datetimepicker – brand-colored override */
:root { --dp-accent: #F4511E; --dp-accent-dark: #d93d10; }

.datetimepicker {
	width: 270px;
	padding: 4px;
	border-radius: 12px !important;
	margin-top: 4px;
	direction: ltr;
	box-shadow: 0 8px 30px rgba(0,0,0,.15);
	border: 1px solid #eee;
}

.datetimepicker-inline { width: 220px; }

.datetimepicker.datetimepicker-rtl { direction: rtl; }
.datetimepicker.datetimepicker-rtl table tr td span { float: right; }

.datetimepicker-dropdown,
.datetimepicker-dropdown-left { top: 0; left: 0; }

[class*=" datetimepicker-dropdown"]:before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid rgba(0,0,0,.15);
	position: absolute;
}
[class*=" datetimepicker-dropdown"]:after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #fff;
	position: absolute;
}
[class*=" datetimepicker-dropdown-top"]:before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid rgba(0,0,0,.15);
	border-bottom: 0;
}
[class*=" datetimepicker-dropdown-top"]:after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #fff;
	border-bottom: 0;
}

.datetimepicker-dropdown-bottom-left:before  { top: -7px; right: 6px; }
.datetimepicker-dropdown-bottom-left:after   { top: -6px; right: 7px; }
.datetimepicker-dropdown-bottom-right:before { top: -7px; left: 6px; }
.datetimepicker-dropdown-bottom-right:after  { top: -6px; left: 7px; }
.datetimepicker-dropdown-top-left:before     { bottom: -7px; right: 6px; }
.datetimepicker-dropdown-top-left:after      { bottom: -6px; right: 7px; }
.datetimepicker-dropdown-top-right:before    { bottom: -7px; left: 6px; }
.datetimepicker-dropdown-top-right:after     { bottom: -6px; left: 7px; }

.datetimepicker > div { display: none; }
.datetimepicker.minutes  div.datetimepicker-minutes { display: block; }
.datetimepicker.hours    div.datetimepicker-hours   { display: block; }
.datetimepicker.days     div.datetimepicker-days    { display: block; }
.datetimepicker.months   div.datetimepicker-months  { display: block; }
.datetimepicker.years    div.datetimepicker-years   { display: block; }

.datetimepicker table { margin: 2px 5px; }

/* Header */
.datetimepicker table thead {
	padding: 10px;
	font-size: 16px;
	background: var(--dp-accent);
	border-radius: 8px 8px 0 0;
}

.datetimepicker thead tr:first-child th,
.datetimepicker tfoot tr:first-child th {
	cursor: pointer;
	font-size: 16px;
	color: #F4511E !important;
	font-weight: 600;
}

.datetimepicker thead tr:first-child th:hover,
.datetimepicker tfoot tr:first-child th:hover {
	background: var(--dp-accent-dark);
	color: #fff !important;
	border-radius: 6px;
}

th .next { color: #fff !important; }

/* Cells */
.datetimepicker td,
.datetimepicker th {
	text-align: center;
	background-color: #fff;
	width: 24px;
	height: 24px;
	font-weight: 500;
	border-radius: 6px;
	border: 0;
}

.datetimepicker table tr td {
	font-size: 14px;
	padding: 5px;
	color: #232323;
}

.table-striped .datetimepicker table tr td,
.table-striped .datetimepicker table tr th {
	background-color: transparent;
	padding: 5px;
}

/* Hover */
.datetimepicker table tr td.minute:hover,
.datetimepicker table tr td.hour:hover,
.datetimepicker table tr td.day:hover {
	background: #fde8e2;
	color: var(--dp-accent);
	cursor: pointer;
}

/* Old / new month days */
.datetimepicker table tr td.old,
.datetimepicker table tr td.new { color: #bbb; }

/* Disabled */
.datetimepicker table tr td.disabled,
.datetimepicker table tr td.disabled:hover {
	background: 0;
	color: #ccc;
	cursor: default;
}

/* Today highlight */
.datetimepicker table tr td.today,
.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover {
	background-color: #fde8e2 !important;
	color: var(--dp-accent) !important;
	font-weight: 700;
}

/* Active / selected */
.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active.active {
	background-color: var(--dp-accent) !important;
	color: #fff !important;
	text-shadow: none;
}

/* Month / year span cells */
.datetimepicker table tr td span {
	display: block;
	width: 23%;
	height: 50px;
	line-height: 50px;
	float: left;
	margin: 1%;
	cursor: pointer;
	border-radius: 6px;
	font-size: 14px;
}

.datetimepicker .datetimepicker-hours span {
	height: 28px;
	line-height: 28px;
	font-size: 15px;
	font-weight: 400;
}

.datetimepicker .datetimepicker-hours table tr td span.hour_am,
.datetimepicker .datetimepicker-hours table tr td span.hour_pm { width: 14.6%; }

.datetimepicker .datetimepicker-hours fieldset legend,
.datetimepicker .datetimepicker-minutes fieldset legend {
	margin-bottom: inherit;
	line-height: 30px;
}

.datetimepicker .datetimepicker-minutes span {
	height: 28px;
	line-height: 28px;
}

.datetimepicker table tr td span:hover {
	background: #fde8e2;
	color: var(--dp-accent);
}

.datetimepicker table tr td span.disabled,
.datetimepicker table tr td span.disabled:hover {
	background: 0;
	color: #ccc;
	cursor: default;
}

.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active.disabled:hover,
.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active.active {
	background-color: var(--dp-accent) !important;
	color: #fff !important;
	text-shadow: none;
}

.datetimepicker table tr td span.old { color: #bbb; }

.datetimepicker th.switch { width: 280px; }
.datetimepicker th i { pointer-events: none; }

.input-append.date .add-on i,
.input-prepend.date .add-on i,
.input-group.date span { cursor: pointer; }

@media (max-width: 768px) {
    .datetimepicker {
        width: calc(100vw - 24px) !important;
        max-width: 320px;
        left: 45px !important;
        right: 12px !important;
    }
    .datetimepicker th.switch { width: auto !important; }
    .datetimepicker table { margin: 2px 0; width: 100%; }
    .datetimepicker td, .datetimepicker th { width: auto; }
    .datetimepicker table tr td span { width: 22%; font-size: 13px; height: 44px; line-height: 44px; }
    .datetimepicker .datetimepicker-hours span,
    .datetimepicker .datetimepicker-minutes span { height: 36px; line-height: 36px; }
}