/*
 * Shared Job Bank visual tokens.
 *
 * Workspace and portal styles map their component-specific variables to this
 * palette so every surface uses the same black, white, and gold hierarchy.
 */
:root {
	--jb-brand-black: #08090a;
	--jb-brand-charcoal: #17191c;
	--jb-brand-charcoal-soft: #24272b;
	--jb-brand-white: #ffffff;
	--jb-brand-off-white: #f6f5f0;
	--jb-brand-gold: #a77922;
	--jb-brand-gold-strong: #765112;
	--jb-brand-gold-soft: #dfc46f;
	--jb-brand-gold-wash: rgba(167, 121, 34, 0.11);
	--jb-brand-page: #f4f4f1;
	--jb-brand-surface: #ffffff;
	--jb-brand-surface-soft: #f8f7f2;
	--jb-brand-text: #17191c;
	--jb-brand-muted: #656861;
	--jb-brand-line: #dedfd9;
	--jb-brand-line-strong: #8d7b54;
	--jb-brand-sidebar: #0d0f11;
	--jb-brand-sidebar-active: #c99a32;
	--jb-brand-sidebar-active-text: #10110d;
	--jb-brand-sidebar-hover: rgba(202, 164, 72, 0.16);
	--jb-brand-sidebar-text: #f4f1e8;
	--jb-brand-sidebar-muted: #d5bd75;
	--jb-brand-sidebar-line: rgba(202, 164, 72, 0.28);
	--jb-brand-shadow: 0 12px 30px rgba(8, 9, 10, 0.09);
	--jb-phone-picker-bg: #ffffff;
	--jb-phone-picker-surface: #f8f7f2;
	--jb-phone-picker-input-bg: #ffffff;
	--jb-phone-picker-text: #17191c;
	--jb-phone-picker-muted: #656861;
	--jb-phone-picker-line: rgba(118, 89, 27, 0.28);
	--jb-phone-picker-hover-bg: rgba(167, 121, 34, 0.10);
	--jb-phone-picker-active-bg: rgba(167, 121, 34, 0.16);
	--jb-phone-picker-active-text: #765112;
	--jb-phone-picker-shadow: 0 18px 40px rgba(8, 9, 10, 0.14);
}

html[data-theme="dark"],
html[data-theme-mode="dark"] {
	--jb-brand-gold: #b18a39;
	--jb-brand-gold-strong: #d0b66c;
	--jb-brand-gold-soft: #e1cc88;
	--jb-brand-gold-wash: rgba(177, 138, 57, 0.12);
	--jb-brand-page: #0f1113;
	--jb-brand-surface: #191c1f;
	--jb-brand-surface-soft: #23272b;
	--jb-brand-text: #f4f3ee;
	--jb-brand-muted: #b8bab5;
	--jb-brand-line: #34383d;
	--jb-brand-line-strong: #574d36;
	--jb-brand-sidebar: #08090a;
	--jb-brand-sidebar-active: #b98b2b;
	--jb-brand-sidebar-active-text: #0c0d0e;
	--jb-brand-sidebar-hover: rgba(225, 204, 136, 0.14);
	--jb-brand-sidebar-text: #f6f3ea;
	--jb-brand-sidebar-muted: #e1cc88;
	--jb-brand-sidebar-line: rgba(225, 204, 136, 0.24);
	--jb-brand-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
	--jb-phone-picker-bg: #111315;
	--jb-phone-picker-surface: #1b1e21;
	--jb-phone-picker-input-bg: #242628;
	--jb-phone-picker-text: #f4f3ee;
	--jb-phone-picker-muted: #b8bab5;
	--jb-phone-picker-line: rgba(225, 204, 136, 0.20);
	--jb-phone-picker-hover-bg: rgba(225, 204, 136, 0.10);
	--jb-phone-picker-active-bg: rgba(225, 204, 136, 0.18);
	--jb-phone-picker-active-text: #f4f3ee;
	--jb-phone-picker-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

body.jb-admin-light,
body.jb-employer-light,
body.jb-seeker-light {
	--jb-phone-picker-bg: #ffffff;
	--jb-phone-picker-surface: #f8f7f2;
	--jb-phone-picker-input-bg: #ffffff;
	--jb-phone-picker-text: #17191c;
	--jb-phone-picker-muted: #656861;
	--jb-phone-picker-line: rgba(118, 89, 27, 0.28);
	--jb-phone-picker-hover-bg: rgba(167, 121, 34, 0.10);
	--jb-phone-picker-active-bg: rgba(167, 121, 34, 0.16);
	--jb-phone-picker-active-text: #765112;
	--jb-phone-picker-shadow: 0 18px 40px rgba(8, 9, 10, 0.14);
}

/*
 * Frappe owns the sidebar account menu markup. These shared presentation
 * rules keep its name and email readable against the Job Bank black sidebar.
 */
:is(body.jb-admin-workspace, body.jb-employer-workspace, body.jb-seeker-workspace)
	.body-sidebar-bottom .sidebar-user-button {
	border: 1px solid color-mix(in srgb, var(--jb-brand-gold) 38%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--jb-brand-gold) 11%, transparent) !important;
	color: var(--jb-brand-sidebar-text) !important;
}

:is(body.jb-admin-workspace, body.jb-employer-workspace, body.jb-seeker-workspace)
	.body-sidebar-bottom .sidebar-user-button:hover {
	border-color: color-mix(in srgb, var(--jb-brand-gold-soft) 58%, transparent);
	background: color-mix(in srgb, var(--jb-brand-gold) 18%, transparent) !important;
}

:is(body.jb-admin-workspace, body.jb-employer-workspace, body.jb-seeker-workspace)
	.body-sidebar-bottom .avatar-name-email > .text-truncate:not(.text-secondary) {
	color: var(--jb-brand-sidebar-text) !important;
	font-weight: 700;
}

:is(body.jb-admin-workspace, body.jb-employer-workspace, body.jb-seeker-workspace)
	.body-sidebar-bottom .avatar-name-email > .text-secondary {
	color: var(--jb-brand-sidebar-muted) !important;
	opacity: 1;
}

/* Native Frappe Phone country picker, tuned for Job Bank light/dark contrast. */
.phone-picker-popover {
	border: 1px solid var(--jb-phone-picker-line) !important;
	border-radius: 12px !important;
	background: var(--jb-phone-picker-bg) !important;
	box-shadow: var(--jb-phone-picker-shadow) !important;
	color: var(--jb-phone-picker-text) !important;
}

.phone-picker-popover .popover-body,
.phone-picker-popover .popover-content,
.phone-picker-popover .phone-picker {
	border-radius: 12px;
	background: var(--jb-phone-picker-bg) !important;
	color: var(--jb-phone-picker-text) !important;
}

.phone-picker-popover .search-phones {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0 0 8px;
	background: var(--jb-phone-picker-bg);
}

.phone-picker-popover .search-phones input.form-control {
	border: 1px solid var(--jb-phone-picker-line) !important;
	border-radius: 8px;
	background: var(--jb-phone-picker-input-bg) !important;
	color: var(--jb-phone-picker-text) !important;
	box-shadow: none !important;
}

.phone-picker-popover .search-phones input.form-control::placeholder {
	color: var(--jb-phone-picker-muted) !important;
	opacity: 1;
}

.phone-picker-popover .search-phone,
.phone-picker-popover .search-phone svg {
	color: var(--jb-phone-picker-muted) !important;
}

.phone-picker-popover .phone-section {
	scrollbar-color: var(--jb-phone-picker-line) var(--jb-phone-picker-bg);
}

.phone-picker-popover .phone-wrapper {
	border-radius: 7px;
	color: var(--jb-phone-picker-text) !important;
	font-weight: 500;
}

.phone-picker-popover .phone-wrapper .country {
	color: currentColor !important;
}

.phone-picker-popover .phone-wrapper img {
	opacity: 1;
}

.phone-picker-popover .phone-wrapper:hover,
.phone-picker-popover .phone-wrapper:focus,
.phone-picker-popover .phone-wrapper.bg-gray-100 {
	background: var(--jb-phone-picker-hover-bg) !important;
	color: var(--jb-phone-picker-text) !important;
}

.phone-picker-popover .phone-wrapper.bg-gray-100 {
	background: var(--jb-phone-picker-active-bg) !important;
	color: var(--jb-phone-picker-active-text) !important;
	font-weight: 600;
}

.phone-picker-popover .picker-arrow::before {
	border-bottom-color: var(--jb-phone-picker-line) !important;
}

.phone-picker-popover .picker-arrow::after {
	border-bottom-color: var(--jb-phone-picker-bg) !important;
}