/* ============================================================
   Modern dialog skin — back-office details / edit popups.
   Loaded globally from inc_header.php so EVERY jQuery UI dialog
   (booking details, fraud/email notify, mass email, confirmations,
   …) reads with one visual language, matching the Contacts (Clients)
   modernization (css/client.css tokens: 12px radius, #e3e8ee
   borders, #16242f titles, #0089CF accent, soft shadow).

   Targets jQuery UI dialog markup only (.ui-dialog*), which exists
   solely while a dialog is open — so this file is inert on pages
   that never open one. It loads AFTER the CDN jquery-ui theme, so
   it wins by cascade order. No ids/classes the page JS binds to are
   changed; this is purely a restyle.
   ============================================================ */

/* Backdrop */
.ui-widget-overlay {
	background: rgba(16, 36, 47, 0.5);
	opacity: 1;
}

/* Dialog shell */
.ui-dialog {
	padding: 0;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(16, 42, 67, 0.22);
	overflow: hidden;
	font-family: 'Roboto', Arial, sans-serif;
}

/* Title bar — accent header (#0089CF), the platform accent shared by the
   modernized Back Office pages (client.css / backoffice.css / reports.css).
   Promoted here so Contacts, Reservation, Reports and every other module read
   the same accent dialog header instead of each restyling it locally. */
.ui-dialog .ui-dialog-titlebar {
	background: #0089CF;
	border: none;
	border-radius: 0;
	padding: 14px 20px;
}
.ui-dialog .ui-dialog-title {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
}
.ui-dialog .ui-dialog-titlebar-close {
	right: 14px;
	top: 50%;
	margin: -13px 0 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: none;
	transition: 0.15s ease-in-out;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
	background: #ffffff;
}

/* Content area */
.ui-dialog .ui-dialog-content {
	padding: 16px 20px;
	color: #22313f;
	font-size: 13px !important; /* several templates hardcode 14px inline */
	line-height: 1.55;
}
.ui-dialog .ui-dialog-content > div[id$="-content"] { font-size: 13px !important; }
.ui-dialog .ui-dialog-content .content-body { padding: 0; }

/* Button pane */
.ui-dialog .ui-dialog-buttonpane {
	border-top: 1px solid #e3e8ee;
	background: #fafcfe;
	padding: 10px 20px;
	margin: 0;
}
.ui-dialog .ui-dialog-buttonpane button {
	display: inline-block;
	border: 1px solid #cfd8df;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	background: #ffffff;
	color: #33424f;
	transition: 0.15s ease-in-out;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
	border-color: #0089CF;
	color: #0089CF;
	background: #f5fbff;
}

/* Section headers inside content (Booking/Customer/Passenger/Notes/Media …) */
.ui-dialog .ui-dialog-content .txt-header-blue {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0b6aa2;
	margin: 4px 0;
}

/* Legacy right-aligned label cells */
.ui-dialog .ui-dialog-content td[align="right"] {
	color: #7a8794;
	font-size: 12px;
	white-space: nowrap;
	vertical-align: top;
}

/* Inner data tables (trip / passenger grids) — soften the bordercolor=1 grid */
.ui-dialog .ui-dialog-content table[border="1"] {
	border: 1px solid #e3e8ee;
	width: 100%;
}
.ui-dialog .ui-dialog-content table[border="1"] td {
	border: 1px solid #eaeff4;
	padding: 7px 9px;
}
.ui-dialog .ui-dialog-content tr.highlight1 td {
	background: #f2f7fa;
	color: #33454f;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border-bottom: 1px solid #dde7ee;
}
.ui-dialog .ui-dialog-content tr.listtr td { border-bottom: 1px solid #eef2f5; }
.ui-dialog .ui-dialog-content tr.listtr:hover td { background: #f5f9fc; }

/* Inputs & buttons inside dialogs */
.ui-dialog .ui-dialog-content textarea,
.ui-dialog .ui-dialog-content input[type="text"] {
	box-sizing: border-box;
	padding: 7px 10px;
	font-size: 12.5px;
	font-family: inherit;
	color: #22313f;
	background: #ffffff;
	border: 1px solid #d3dbe2;
	border-radius: 8px;
	max-width: 100%;
}
.ui-dialog .ui-dialog-content textarea:focus,
.ui-dialog .ui-dialog-content input[type="text"]:focus {
	outline: none;
	border-color: #0089CF;
	box-shadow: 0 0 0 3px rgba(0, 137, 207, 0.12);
}
.ui-dialog .ui-dialog-content input.black-button {
	display: inline-block;
	border: 1px solid #cfd8df;
	border-radius: 8px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	background: #ffffff;
	color: #33424f;
	transition: 0.15s ease-in-out;
}
.ui-dialog .ui-dialog-content input.black-button:hover {
	border-color: #0089CF;
	color: #0089CF;
	background: #f5fbff;
}
/* Primary save actions inside dialogs read as accent buttons */
.ui-dialog .ui-dialog-content input.black-button#savebookingbttn,
.ui-dialog .ui-dialog-content input.black-button#saveaccnotebttn {
	background: #0089CF;
	border-color: #0089CF;
	color: #ffffff;
}
.ui-dialog .ui-dialog-content input.black-button#savebookingbttn:hover,
.ui-dialog .ui-dialog-content input.black-button#saveaccnotebttn:hover {
	background: #0a76b0;
	border-color: #0a76b0;
}
.ui-dialog .ui-dialog-content button.be-link-2 {
	border: 1px solid #bfd9ea;
	border-radius: 7px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	color: #0b6aa2;
	background: #ffffff;
	cursor: pointer;
	transition: 0.15s ease-in-out;
}
.ui-dialog .ui-dialog-content button.be-link-2:hover { background: #eaf5fc; }

/* ============================================================
   jQuery UI datepicker — global modern skin.
   #ui-datepicker-div is appended to <body> and shared by every
   Back Office date field (booking search, reports, operator report
   date, …). Promoted here (was per-module) so all date pickers read
   with the same accent card. Loaded after the CDN jquery-ui theme,
   so it wins by cascade order.
   ============================================================ */
#ui-datepicker-div.ui-datepicker,
.ui-datepicker {
	background: #ffffff;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	box-shadow: 0 14px 44px rgba(16, 42, 67, 0.22);
	padding: 8px;
	font-family: 'Roboto', Arial, sans-serif;
}
.ui-datepicker .ui-datepicker-header {
	background: #0089CF;
	border: none;
	border-radius: 8px;
	color: #ffffff;
	padding: 5px 0;
}
.ui-datepicker .ui-datepicker-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.9;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	background: none;
	border: none;
	border-radius: 6px;
	top: 4px;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 4px; }
.ui-datepicker .ui-datepicker-next { right: 4px; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: rgba(255, 255, 255, 0.22);
	border: none;
	top: 4px;
}
.ui-datepicker .ui-datepicker-prev:hover { left: 4px; }
.ui-datepicker .ui-datepicker-next:hover { right: 4px; }
.ui-datepicker table.ui-datepicker-calendar { margin: 6px 0 2px; }
.ui-datepicker th {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8a97a5;
	padding: 5px 0;
}
.ui-datepicker td { padding: 1px; }
/* beat the theme's .ui-widget-content .ui-state-default border/background */
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
	border-color: transparent;
	background: none;
}
.ui-datepicker td span,
.ui-datepicker td a {
	border: 1px solid transparent;
	border-radius: 6px;
	background: none;
	text-align: center;
	padding: 5px;
	font-size: 12px;
	color: #22313f;
}
.ui-datepicker td a.ui-state-hover {
	background: #eaf5fc;
	border-color: transparent;
	color: #0b6aa2;
}
.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td a.ui-state-highlight {
	background: #ffffff;
	border-color: #0089CF;
	color: #0b6aa2;
	font-weight: 600;
}
.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td a.ui-state-active {
	background: #0089CF;
	border-color: #0089CF;
	color: #ffffff;
	font-weight: 600;
}
.ui-datepicker td.ui-datepicker-unselectable span { color: #b5bec7; }
.ui-dialog .ui-dialog-content span.be-link-2 { color: #0b6aa2; cursor: pointer; }

/* Save / Send actions read as accent buttons whether keyed by id or value. */
.ui-dialog .ui-dialog-content input.black-button[value="Save"],
.ui-dialog .ui-dialog-content input.black-button[value="Send"] {
	background: #0089CF;
	border-color: #0089CF;
	color: #ffffff;
}
.ui-dialog .ui-dialog-content input.black-button[value="Save"]:hover,
.ui-dialog .ui-dialog-content input.black-button[value="Send"]:hover {
	background: #0a76b0;
	border-color: #0a76b0;
	color: #ffffff;
}
/* Legacy .input-styled action buttons inside dialogs → accent button. */
.ui-dialog .ui-dialog-content input[type="button"].input {
	display: inline-block;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	background: #0089CF;
	border: 1px solid #0089CF;
	border-radius: 8px;
	color: #ffffff;
	transition: 0.15s ease-in-out;
}
.ui-dialog .ui-dialog-content input[type="button"].input:hover {
	background: #0a76b0;
	border-color: #0a76b0;
}
/* Copy chips / mail toggle inside the booking dialog. */
.ui-dialog .ui-dialog-content #btn-mail {
	border: 1px solid #bfd9ea;
	border-radius: 7px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	color: #0b6aa2;
	background: #ffffff;
	cursor: pointer;
}
.ui-dialog .ui-dialog-content #btn-mail:hover { background: #eaf5fc; }

/* HQ 100624 — the "permission not granted" pop-up (PageSection::getPermissionNotice,
   templates/common/section/inc_permissionnotice.php). Brand face Manrope with Thai /
   Arabic stacked after it; Phosphor lock in the brand text blue; logical properties only. */
/* !important + one class more than the back office's global `body, body * { Roboto !important }`
   (backoffice-skin.css): a new component is drawn in the brand face (owner 2026-09-22), the rest of
   the page keeps Roboto until it is touched — same technique as css/login.css. */
body .lt-permnotice-dlg,
body .lt-permnotice-dlg * {
	font-family: "Manrope", "Noto Sans Arabic", "Noto Sans Thai", sans-serif !important;
}
.lt-permnotice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.lt-permnotice__icon {
	flex: 0 0 auto;
	color: #006FA7;
	line-height: 0;
	margin-block-start: 2px;
}
.lt-permnotice__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #22313f;
	overflow-wrap: anywhere;
}
/* Above every fixed back-office layer (tutorial coach-mark 2147482200, bug-report panel 2147483000,
   tutorial tip 2147483200): the pop-up answers the click the user just made, so nothing may cover it. */
.ui-widget-overlay.lt-permnotice-overlay { z-index: 2147483300 !important; }
.ui-dialog.lt-permnotice-dlg { z-index: 2147483400 !important; }