/* ================================================================
   PEARL OWNERS PORTAL — MY BOOKINGS PLUGIN OVERRIDES
   --------------------------------------------------------
   Restyles the "My Bookings" plugin (Beds24 integration) to
   match Pearl's navy + gold design system. Targets selectors
   from class-shortcodes.php ([my_bookings]), class-timeline-
   calendar.php ([my_bookings_timeline]) and assets/css/
   calendar.css ([my_bookings_calendar]).

   The plugin embeds inline <style> in the body; this file is
   enqueued in wp_footer so it parses LAST. We still use
   !important on a number of rules because the plugin uses
   inline styles inside its own <style> tags.
   ================================================================ */

/* ============================================================
   Wrapping container — drop into Pearl's card look
   ============================================================ */
.my-bookings-container,
.my-bookings-calendar-container {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px;
	margin: 0 0 16px;
	box-shadow: none;
}
@container vp (max-width: 760px) {
	.my-bookings-container,
	.my-bookings-calendar-container {
		padding: 16px;
		border-radius: 18px;
		box-shadow: 0 6px 14px -10px rgba(15,26,58,.18);
		border-color: transparent;
	}
}
.my-bookings-container h2 {
	font-family: var(--display);
	color: var(--navy);
	font-size: 18px;
	margin: 0 0 14px;
	letter-spacing: 0.5px;
}

/* ============================================================
   Filters strip — match Pearl pill / field style
   ============================================================ */
.bookings-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.bookings-filters select,
.bookings-filters input {
	background: #f3f5fa !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	font-family: inherit !important;
	min-width: 140px;
}
.bookings-filters select:focus,
.bookings-filters input:focus {
	outline: none !important;
	border-color: var(--navy) !important;
}

/* ============================================================
   Bookings table — restyle to look like Pearl .table-row
   ============================================================ */
.my-bookings-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: transparent;
}
.my-bookings-table thead { background: transparent !important; }
.my-bookings-table th {
	background: transparent !important;
	color: var(--muted) !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 10px !important;
	font-weight: 600;
	padding: 6px 8px 10px !important;
	border-bottom: 1px solid var(--line) !important;
	text-align: left !important;
}
.my-bookings-table td {
	padding: 12px 8px !important;
	border-bottom: 1px solid var(--line) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	font-size: 12px !important;
	color: var(--ink) !important;
	vertical-align: middle !important;
}
.my-bookings-table tr:hover {
	background: rgba(32,54,111,.025) !important;
}

/* ============================================================
   Status badges — map to Pearl tag-d styles
   ============================================================ */
.booking-status {
	display: inline-block;
	font-size: 10px !important;
	font-weight: 600 !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	letter-spacing: 0.3px;
	text-transform: none !important;
	border: none !important;
}
.status-confirmed,
.booking-status.status-confirmed {
	background: rgba(31,157,106,.12) !important;
	color: var(--success) !important;
}
.status-pending,
.booking-status.status-pending {
	background: rgba(205,160,62,.15) !important;
	color: #98701f !important;
}
.status-cancelled,
.booking-status.status-cancelled {
	background: rgba(193,69,58,.12) !important;
	color: #b03a30 !important;
}
.status-black,
.booking-status.status-black {
	background: rgba(11,15,26,.08) !important;
	color: var(--ink) !important;
}

/* ============================================================
   "View Details" button — Pearl navy/gold style
   ============================================================ */
.toggle-details,
.view-details {
	background: var(--navy) !important;
	color: #fff !important;
	border: none !important;
	padding: 7px 14px !important;
	border-radius: 10px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer;
	letter-spacing: 0.3px;
}
.toggle-details:hover,
.view-details:hover {
	background: var(--navy-dark) !important;
}

/* Expanded details row */
.booking-details {
	background: rgba(32,54,111,.025) !important;
}
.details-content {
	padding: 16px 8px !important;
	display: flex !important;
	gap: 28px !important;
	flex-wrap: wrap;
}
.detail-section h4 {
	font-family: var(--display) !important;
	color: var(--navy) !important;
	font-size: 13px !important;
	letter-spacing: 0.5px !important;
	margin: 0 0 8px !important;
}
.detail-section p {
	font-size: 12px !important;
	color: var(--ink) !important;
	margin: 4px 0 !important;
}

/* ============================================================
   TIMELINE ([my_bookings_timeline])
   ============================================================ */
.tl-wrapper {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.tl-controls {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px !important;
	align-items: flex-end !important;
	margin-bottom: 16px !important;
}
.tl-control-group label {
	font-size: 11px !important;
	color: var(--muted) !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600 !important;
	margin-bottom: 4px;
}
.tl-control-group input,
.tl-control-group select {
	background: #f3f5fa !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	padding: 11px 14px !important;
	font-size: 13px !important;
	font-family: inherit !important;
	color: var(--ink) !important;
	min-width: 180px;
}
.tl-control-group input:focus,
.tl-control-group select:focus {
	outline: none !important;
	border-color: var(--navy) !important;
}

.tl-search-btn {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 26px !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	letter-spacing: 0.3px;
	box-shadow: 0 6px 14px -6px rgba(32,54,111,.4) !important;
	cursor: pointer;
}
.tl-search-btn:hover {
	background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-deep) 100%) !important;
}

.tl-container {
	border: 1px solid var(--line) !important;
	border-radius: 16px !important;
	overflow-x: auto !important;
	background: #fff;
}

/* Timeline header — Pearl navy gradient */
.tl-header {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
	color: #fff !important;
	padding: 14px 22px !important;
	display: flex !important;
	justify-content: space-between;
	align-items: center;
}
.tl-month-title {
	font-family: var(--display) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	color: #fff !important;
}
.tl-nav-btn {
	background: rgba(205,160,62,.2) !important;
	border: 1px solid rgba(205,160,62,.3) !important;
	color: var(--gold) !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 8px !important;
}
.tl-nav-btn:hover {
	background: rgba(205,160,62,.35) !important;
	color: #fff !important;
}

/* Day headers + grid */
.tl-days-row {
	background: #fafbfc !important;
	border-bottom: 1px solid var(--line) !important;
}
.tl-prop-label,
.tl-prop-name {
	background: #fafbfc !important;
	border-right: 1px solid var(--line) !important;
}
.tl-prop-name {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--navy) !important;
	background: #fff !important;
}
.tl-day-header {
	border-right: 1px solid #f3f4f8 !important;
}
.tl-day-name {
	color: var(--muted) !important;
	font-weight: 500 !important;
}
.tl-day-num {
	color: var(--ink) !important;
	font-weight: 600 !important;
}
.tl-cell {
	border-right: 1px solid #f3f4f8 !important;
}
.tl-cell.weekend {
	background: #fafbfc !important;
}
.tl-cell.today {
	background: rgba(205,160,62,.08) !important;
	box-shadow: inset 0 0 0 1px rgba(205,160,62,.4) !important;
}

/* Booking bars on the timeline — Pearl gold by default,
   navy for blocked, red for cancelled */
.tl-booking {
	background: linear-gradient(135deg, var(--gold) 0%, #b4862a 100%) !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 0 rgba(0,0,0,.05);
	color: var(--navy);
}
.tl-booking:hover {
	box-shadow: 0 4px 14px -4px rgba(205,160,62,.5) !important;
}
.tl-booking[data-status="black"],
.tl-booking.tl-status-black,
.tl-booking[data-status="blocked"] {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
}
.tl-booking[data-status="cancelled"],
.tl-booking.tl-status-cancelled {
	background: linear-gradient(135deg, #c1453a 0%, #8c2f26 100%) !important;
}
.tl-booking[data-status="pending"],
.tl-booking.tl-status-pending {
	background: linear-gradient(135deg, #e3b855 0%, #c79133 100%) !important;
}

/* Tooltip — Pearl dark navy */
.tl-tooltip,
#calendar-tooltip.tl-tooltip {
	background: var(--navy-deep) !important;
	color: #fff !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	font-size: 12px !important;
	box-shadow: 0 12px 30px -10px rgba(15,26,58,.5) !important;
	max-width: 300px !important;
}
.tl-tooltip-title,
#calendar-tooltip .tl-tooltip-title {
	font-family: var(--display) !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	color: var(--gold) !important;
	border-bottom-color: rgba(255,255,255,.12) !important;
}
.tl-tooltip-label,
#calendar-tooltip .tl-tooltip-label {
	color: rgba(255,255,255,.6) !important;
}

.tl-loading {
	color: var(--muted) !important;
	font-size: 13px !important;
}

/* ============================================================
   FULLCALENDAR ([my_bookings_calendar]) — mobile view
   ============================================================ */
.fc .fc-toolbar-title {
	font-family: var(--display) !important;
	color: var(--navy) !important;
	letter-spacing: 0.5px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}
.fc .fc-button {
	background: var(--navy) !important;
	border-color: var(--navy) !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 8px 14px !important;
	text-transform: none !important;
	letter-spacing: 0.3px !important;
}
.fc .fc-button:hover {
	background: var(--navy-dark) !important;
	border-color: var(--navy-dark) !important;
}
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: var(--navy) !important;
}
.fc-event {
	background: linear-gradient(135deg, var(--gold) 0%, #b4862a 100%) !important;
	border-color: var(--gold) !important;
	color: var(--navy) !important;
	border-radius: 4px !important;
	padding: 1px 4px !important;
	font-weight: 600 !important;
	font-size: 11px !important;
}
.fc-event:hover {
	box-shadow: 0 4px 14px -4px rgba(205,160,62,.5) !important;
}
.fc-day-today {
	background: rgba(205,160,62,.08) !important;
}
.fc th {
	color: var(--muted) !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 10px !important;
	font-weight: 600 !important;
}
.fc-daygrid-day-number {
	color: var(--ink) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

/* ============================================================
   Property assignment admin page — light touch
   ============================================================ */
.role-settings h2,
.wrap > h2 {
	font-family: var(--display);
	color: var(--navy);
	letter-spacing: 0.5px;
}

/* ============================================================
   Direct Bookings + Payment Details plugin restyle
   (Teal → Pearl navy/gold)
   Precise class targeting — these plugins output their own
   <style> block in the body, so we use !important everywhere.
   ============================================================ */

/* --- Direct Bookings specific classes --- */
.db-container, .dba-container {
	max-width: none !important;
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: 16px !important;
	padding: 22px !important;
	margin: 0 0 16px !important;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.db-header h2, .dba-header h2 {
	font-family: var(--display) !important;
	color: var(--navy) !important;
	letter-spacing: 0.5px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

/* All primary buttons — teal → navy gradient */
.db-btn-primary, .dba-btn-primary,
.db-btn-search, .dba-btn-search,
.db-btn-confirm-cancel, .dba-btn-confirm-cancel,
button.button-primary.db-btn-primary,
input[type="submit"].db-btn-primary {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 22px !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	box-shadow: 0 6px 14px -6px rgba(32,54,111,.35) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.db-btn-primary:hover, .dba-btn-primary:hover,
.db-btn-search:hover, .dba-btn-search:hover {
	background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-deep) 100%) !important;
	box-shadow: 0 8px 20px -8px rgba(32,54,111,.5) !important;
}

/* View button (was teal) */
.db-btn-view, .dba-btn-view {
	background: #fff !important;
	color: var(--navy) !important;
	border: 1px solid var(--line) !important;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
}
.db-btn-view:hover, .dba-btn-view:hover {
	background: var(--navy) !important;
	color: #fff !important;
	border-color: var(--navy) !important;
}

/* Cancel keeps red — user expects it */
.db-btn-cancel, .dba-btn-cancel {
	background: #c1453a !important;
	color: #fff !important;
	border: none !important;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
}
.db-btn-secondary, .dba-btn-secondary,
.db-btn-cancel-disabled {
	background: #fff !important;
	color: var(--muted) !important;
	border: 1px solid var(--line) !important;
	padding: 10px 18px !important;
	border-radius: 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
}

/* Form inputs */
.db-form input, .db-form select, .db-form textarea,
.dba-form input, .dba-form select, .dba-form textarea,
.db-form-group input, .db-form-group select, .db-form-group textarea {
	background: #f3f5fa !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	color: var(--ink) !important;
}
.db-form input:focus, .db-form select:focus, .db-form textarea:focus,
.dba-form input:focus, .dba-form select:focus, .dba-form textarea:focus {
	outline: none !important;
	border-color: var(--navy) !important;
	background: #fff !important;
}

/* Table headers + rows */
.db-table, .dba-table, .db-container table, .dba-container table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: transparent !important;
}
.db-table thead th, .dba-table thead th,
.db-container table thead th, .dba-container table thead th {
	background: transparent !important;
	color: var(--muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	padding: 8px 12px 12px !important;
	border-bottom: 1px solid var(--line) !important;
	text-align: left !important;
}
.db-table tbody td, .dba-table tbody td,
.db-container table tbody td, .dba-container table tbody td {
	padding: 12px !important;
	border-bottom: 1px solid var(--line) !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	font-size: 13px !important;
	color: var(--ink) !important;
}
.db-table tbody tr:hover td, .dba-table tbody tr:hover td {
	background: rgba(32,54,111,.025) !important;
}

/* Status pills */
.db-status, .dba-status, .db-admin-status, .dba-admin-status {
	display: inline-block !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
}
.status-confirmed, .status-approved {
	background: rgba(31,157,106,.12) !important;
	color: var(--success) !important;
	border: none !important;
}
.status-pending {
	background: rgba(205,160,62,.15) !important;
	color: #98701f !important;
	border: none !important;
}
.status-cancelled, .status-rejected {
	background: rgba(193,69,58,.12) !important;
	color: #b03a30 !important;
	border: none !important;
}

/* Pagination */
.db-pagination, .dba-pagination,
.db-page-btn, .dba-page-btn {
	background: #fff !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	margin: 0 2px !important;
	font-size: 12px !important;
}
.db-page-btn.active, .dba-page-btn.active {
	background: var(--navy) !important;
	border-color: var(--navy) !important;
	color: #fff !important;
}

/* Filter sections */
.db-filter-section, .dba-filter-section {
	background: #f3f5fa !important;
	padding: 14px 16px !important;
	border-radius: 12px !important;
	margin-bottom: 16px !important;
	border: none !important;
}

/* Modal */
.db-modal, .dba-modal {
	background: rgba(11,15,26,.45) !important;
}
.db-modal-content, .dba-modal-content {
	border-radius: 16px !important;
	border: none !important;
	box-shadow: 0 24px 60px -20px rgba(15,26,58,.45) !important;
}

/* --- Payment Details specific classes --- */
.pd-container {
	max-width: none !important;
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: 16px !important;
	padding: 22px !important;
	margin: 0 0 16px !important;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.pd-header h2 {
	font-family: var(--display) !important;
	color: var(--navy) !important;
	letter-spacing: 0.5px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}
.pd-btn-primary, .pda-btn-primary, button.pd-btn-primary {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 22px !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	box-shadow: 0 6px 14px -6px rgba(32,54,111,.35) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.pd-btn-primary:hover, .pda-btn-primary:hover {
	background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-deep) 100%) !important;
}
.pd-btn-secondary, .pda-btn-secondary {
	background: #fff !important;
	color: var(--navy) !important;
	border: 1px solid var(--line) !important;
	padding: 10px 18px !important;
	border-radius: 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* PD form */
.pd-form input, .pd-form select, .pd-form textarea,
.pd-form-group input, .pd-form-group select, .pd-form-group textarea {
	background: #f3f5fa !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	color: var(--ink) !important;
}
.pd-form input:focus, .pd-form select:focus, .pd-form textarea:focus {
	outline: none !important;
	border-color: var(--navy) !important;
	background: #fff !important;
}

/* PD tables */
.pd-container table, .pda-container table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: transparent !important;
}
.pd-container table thead th, .pda-container table thead th {
	background: transparent !important;
	color: var(--muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	padding: 8px 12px 12px !important;
	border-bottom: 1px solid var(--line) !important;
	text-align: left !important;
}
.pd-container table tbody td, .pda-container table tbody td {
	padding: 12px !important;
	border-bottom: 1px solid var(--line) !important;
	font-size: 13px !important;
	color: var(--ink) !important;
}

/* Preference / Primary pill */
.pd-preference-primary, .pd-preference, .pda-preference-primary {
	background: rgba(205,160,62,.15) !important;
	color: #98701f !important;
	border: none !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	display: inline-block !important;
}

/* Edit + delete action buttons (small icons) */
.pd-action-edit, .pda-action-edit,
.pd-btn-edit, .pda-btn-edit {
	background: rgba(32,54,111,.08) !important;
	color: var(--navy) !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	padding: 0 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.pd-action-edit:hover, .pda-action-edit:hover {
	background: var(--navy) !important;
	color: #fff !important;
}
.pd-action-delete, .pda-action-delete,
.pd-btn-delete, .pda-btn-delete {
	background: rgba(193,69,58,.1) !important;
	color: #b03a30 !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	padding: 0 !important;
	cursor: pointer !important;
}
.pd-action-delete:hover, .pda-action-delete:hover {
	background: #b03a30 !important;
	color: #fff !important;
}

/* Kill any leftover teal — nuclear option matching plugin's palette */
[style*="#4a9eb4"] { border-color: var(--navy) !important; }
[style*="background: #4a9eb4"], [style*="background:#4a9eb4"],
[style*="background-color: #4a9eb4"], [style*="background-color:#4a9eb4"] { background: var(--navy) !important; color: #fff !important; }
[style*="background: #3a8ea4"], [style*="background:#3a8ea4"],
[style*="background-color: #3a8ea4"], [style*="background-color:#3a8ea4"] { background: var(--navy-dark) !important; }
[style*="background: #3dbfb8"], [style*="background:#3dbfb8"],
[style*="background-color: #3dbfb8"], [style*="background-color:#3dbfb8"] { background: var(--navy) !important; color: #fff !important; }
[style*="background: #35aba5"], [style*="background:#35aba5"] { background: var(--navy-dark) !important; }
[style*="background: #5a9ab8"], [style*="background:#5a9ab8"] { background: var(--navy) !important; color: #fff !important; }
[style*="color: #4a9eb4"], [style*="color:#4a9eb4"] { color: var(--navy) !important; }
[style*="color: #3dbfb8"], [style*="color:#3dbfb8"] { color: var(--navy) !important; }
[style*="color: #35aba5"], [style*="color:#35aba5"] { color: var(--navy) !important; }
[style*="border: 1px solid #4a9eb4"], [style*="border:1px solid #4a9eb4"] { border-color: var(--navy) !important; }
[style*="border: 1px solid #3dbfb8"], [style*="border:1px solid #3dbfb8"] { border-color: var(--navy) !important; }
[style*="border-color: #4a9eb4"], [style*="border-color:#4a9eb4"] { border-color: var(--navy) !important; }
[style*="border-color: #3dbfb8"], [style*="border-color:#3dbfb8"] { border-color: var(--navy) !important; }

/* Kill any leftover teal specifically on plus icons */
.pd-plus, .db-plus, .dba-plus {
	color: var(--gold) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* Wrap plugin container into a Pearl card */
.db-owner-container, .db-admin-container, .pd-owner-container, .pd-admin-container,
.direct-bookings, .payment-details, .rental-documents, .rental-reports, .rental-payouts {
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	padding:22px;
	margin:0 0 16px;
}
@container vp (max-width:760px) {
	.db-owner-container, .db-admin-container, .pd-owner-container, .pd-admin-container,
	.direct-bookings, .payment-details, .rental-documents, .rental-reports, .rental-payouts {
		padding:16px; border-radius:18px; border-color:transparent;
		box-shadow:0 6px 14px -10px rgba(15,26,58,.18);
	}
}

/* Primary buttons — teal → navy gradient */
.db-owner-container button, .db-admin-container button,
.pd-owner-container button, .pd-admin-container button,
button.db-btn, button.pd-btn, button.rd-btn,
input[type="submit"].db-submit, input[type="submit"].pd-submit,
.direct-bookings .btn-primary, .payment-details .btn-primary {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
	color:#fff !important;
	border:none !important;
	padding:12px 22px !important;
	border-radius:12px !important;
	font-size:13px !important;
	font-weight:600 !important;
	font-family: inherit !important;
	cursor:pointer !important;
	box-shadow: 0 6px 14px -6px rgba(32,54,111,.35) !important;
}
.db-owner-container button:hover, .db-admin-container button:hover,
.pd-owner-container button:hover, .pd-admin-container button:hover {
	background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-deep) 100%) !important;
}

/* Secondary buttons */
.db-btn-secondary, .pd-btn-secondary, button.cancel-btn, button.edit-btn {
	background:#fff !important;
	color:var(--navy) !important;
	border:1px solid var(--line) !important;
	padding:10px 18px !important;
	border-radius:10px !important;
	font-size:12px !important;
	font-weight:600 !important;
}

/* Form inputs */
.db-owner-container input, .db-owner-container select, .db-owner-container textarea,
.db-admin-container  input, .db-admin-container  select, .db-admin-container  textarea,
.pd-owner-container  input, .pd-owner-container  select, .pd-owner-container  textarea,
.pd-admin-container  input, .pd-admin-container  select, .pd-admin-container  textarea {
	background:#f3f5fa !important;
	border:1px solid transparent !important;
	border-radius:12px !important;
	padding:12px 14px !important;
	font-family:inherit !important;
	font-size:13px !important;
	color:var(--ink) !important;
}
.db-owner-container input:focus, .db-admin-container input:focus,
.pd-owner-container input:focus, .pd-admin-container input:focus {
	outline:none !important;
	border-color:var(--navy) !important;
}

/* Tables — Pearl look */
.db-owner-container table, .db-admin-container table,
.pd-owner-container  table, .pd-admin-container  table,
table.direct-bookings-table, table.payment-details-table, table.rental-reports-table, table.rental-payouts-table {
	width:100%;
	border-collapse:collapse;
	background:transparent !important;
}
.db-owner-container table th, .db-admin-container table th,
.pd-owner-container  table th, .pd-admin-container  table th {
	background:transparent !important;
	color:var(--muted) !important;
	text-transform:uppercase !important;
	letter-spacing:1px !important;
	font-size:10px !important;
	font-weight:600 !important;
	padding:8px 12px 12px !important;
	border-bottom:1px solid var(--line) !important;
	text-align:left !important;
}
.db-owner-container table td, .db-admin-container table td,
.pd-owner-container  table td, .pd-admin-container  table td {
	padding:12px !important;
	border-bottom:1px solid var(--line) !important;
	border-left:none !important; border-right:none !important; border-top:none !important;
	font-size:13px !important;
	color:var(--ink) !important;
}
.db-owner-container tr:hover td, .db-admin-container tr:hover td,
.pd-owner-container  tr:hover td, .pd-admin-container  tr:hover td {
	background: rgba(32,54,111,.025) !important;
}

/* Status pills across plugins */
.db-status, .pd-status, .booking-status, .payout-status {
	display:inline-block !important;
	padding:3px 8px !important;
	border-radius:999px !important;
	font-size:10px !important;
	font-weight:600 !important;
}
.status-confirmed, .status-approved, .status-sent, .status-paid, .status-active {
	background: rgba(31,157,106,.12) !important;
	color: var(--success) !important;
}
.status-pending, .status-review {
	background: rgba(205,160,62,.15) !important;
	color: #98701f !important;
}
.status-rejected, .status-cancelled, .status-failed, .status-declined {
	background: rgba(193,69,58,.12) !important;
	color: #b03a30 !important;
}
.status-inquiry, .status-new {
	background: rgba(11,15,26,.06) !important;
	color: var(--ink) !important;
}

/* Any leftover teal (5a9ab8, 4a9eb4, 5a7a9a) recoloured with a broad targeting */
[style*="background: #4a9eb4"], [style*="background:#4a9eb4"] {
	background: var(--navy) !important;
}
[style*="background: #5a9ab8"], [style*="background:#5a9ab8"],
[style*="background-color: #5a9ab8"] {
	background: var(--navy) !important;
	color: #fff !important;
}
[style*="color: #4a9eb4"], [style*="color:#4a9eb4"],
[style*="color: #5a9ab8"], [style*="color:#5a9ab8"] {
	color: var(--navy) !important;
}
[style*="border: 1px solid #4a9eb4"], [style*="border:1px solid #4a9eb4"] {
	border-color: var(--navy) !important;
}

/* DataTables — hide the ugly buttons row and restyle pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border:1px solid var(--line) !important;
	background:#fff !important;
	color:var(--ink) !important;
	border-radius:8px !important;
	padding:6px 12px !important;
	margin:0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--navy) !important;
	border-color: var(--navy) !important;
	color:#fff !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	background:#f3f5fa !important;
	border:1px solid transparent !important;
	border-radius:10px !important;
	padding:8px 12px !important;
}