/* One dark canvas across public pages, account workspaces, and utility pages. */
:root {
  --nrj-page-canvas: #071014;
  --nrj-post-canvas: #07171e;
}

html:not([data-theme="light"]),
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) .app-shell,
html:not([data-theme="light"]) .app-shell > main,
html:not([data-theme="light"]) .app-shell > main > .view,
html:not([data-theme="light"]) .app-shell .hero,
html:not([data-theme="light"]) .app-shell .page-head,
html:not([data-theme="light"]) .employer-landing-main,
html:not([data-theme="light"]) .early-access-intro,
html:not([data-theme="light"]) .early-access-meaning,
html:not([data-theme="light"]) .early-access-request,
html:not([data-theme="light"]) .trust-header + main,
html:not([data-theme="light"]) .trust-section,
html:not([data-theme="light"]) .trust-browser-section,
html:not([data-theme="light"]) .trust-legal {
  background-color: var(--nrj-page-canvas) !important;
  background-image: none !important;
}

/* Keep employer and recruiter job forms on the same blue blueprint canvas. */
html:not([data-theme="light"]) body:is([data-user-role="employer"], [data-user-role="recruiting_organization"]) .app-shell > main :is(#postView, :is(#messagesView, #admin-supportView)).view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--nrj-post-canvas) !important;
  background-image:
    linear-gradient(rgba(34, 211, 238, .043) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .043) 1px, transparent 1px),
    radial-gradient(circle at 78% 7%, rgba(0, 165, 226, .13), transparent 28%) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

.browse-filter-column { min-width: 0; }
.browse-filter-column #jobFilterPanel { position: static; }
#browseView .browse-saved-jobs { width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; }
html:not([data-theme="light"]) #browseView .browse-saved-jobs { background: #043044; }
html:not([data-theme="light"]) #browseView .browse-saved-jobs:hover { background: #054054; }
.browse-saved-jobs [data-saved-jobs-count] { min-width: 24px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
#savedJobsDialog { width: min(720px, calc(100% - 32px)); max-height: min(680px, calc(100dvh - 48px)); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid #1593a1; border-radius: 8px; color: var(--text); background: var(--surface); }
html:not([data-theme="light"]) #savedJobsDialog { background: #031c26; }
#savedJobsDialog::backdrop { background: rgba(0, 10, 16, .75); }
.saved-jobs-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.saved-jobs-dialog-head h2 { margin: 0; font-size: 24px; }
.saved-jobs-dialog-head button { width: 36px; height: 36px; padding: 0; font-size: 22px; flex-shrink: 0; }
.saved-jobs-empty { padding: 32px 0; text-align: center; }
.saved-jobs-empty h3 { margin: 0 0 20px; font-size: 18px; }
@media (max-width: 600px) { #savedJobsDialog { padding: 16px; } }

/* Admin workspaces use the same teal surfaces as the business/job views. */
html:not([data-theme="light"]) #admin-supportView {
  background-color: #07171e !important;
  background-image: linear-gradient(rgba(34,211,238,.043) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.043) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
}
#admin-supportView #adminSupportConversation { max-width: 1320px; margin: 0 auto; padding: 20px 28px 40px; }
#adminSupportConversation form > button { justify-self: start; }
.support-ticket-management { max-width: 1320px; margin: 0 auto 32px; padding: 0 28px; }
.support-ticket-management > summary { cursor: pointer; color: var(--soft); padding: 12px 0; }
#admin-supportView #adminSupportConversation .support-thread-message.is-requester { justify-self: start; background: var(--surface-2); border-color: var(--line); }
#admin-supportView #adminSupportConversation .support-thread-message.is-support { justify-self: end; background: var(--surface); border-color: var(--line-strong); }
html:not([data-theme="light"]) :is(#messagesView, #admin-supportView) {
  --surface: #043044;
  --surface-2: #072536;
  --line: #17636b;
  --line-strong: #1593a1;
  --muted: #aac3cc;
  --soft: #8fd9e3;
}

html:not([data-theme="light"]) :is(#messagesView, #admin-supportView) .page-head {
  background-color: #043044 !important;
  border-bottom-color: #17636b;
}

html:not([data-theme="light"]) :is(#messagesView, #admin-supportView) :is(input, textarea) {
  background: #043044;
  border-color: #17636b;
  color: var(--text);
}

html:not([data-theme="light"]) :is(#messagesView, #admin-supportView) .btn-secondary {
  background: #072536;
  border-color: #1593a1;
  color: var(--text);
}

html:not([data-theme="light"]) :is(#messagesView, #admin-supportView) [data-support-conversation][aria-pressed="true"] {
  background: #043044;
  border-color: #16c7dd;
}

:is(#messagesView, #admin-supportView) .dashboard-wrap { max-width: 1320px; margin: 0 auto; padding: 20px 28px 40px; }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) { display: grid; grid-template-columns: minmax(280px, .66fr) minmax(0, 1fr); gap: 14px; max-width: none; }
:is(#messagesView, #admin-supportView) .support-inbox-panel,
:is(#messagesView, #admin-supportView) .support-conversation-panel { min-width: 0; padding: 24px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); }
html:not([data-theme="light"]) :is(#messagesView, #admin-supportView) :is(.support-inbox-panel, .support-conversation-panel) { background: #031c26; }
:is(#messagesView, #admin-supportView) .support-inbox-panel { min-height: 780px; }
:is(#messagesView, #admin-supportView) .support-availability { position: relative; margin: 0 0 12px; padding: 4px 0 20px 80px; min-height: 82px; }
:is(#messagesView, #admin-supportView) .support-availability :is(.is-available, .is-offline)::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #21c45b; }
:is(#messagesView, #admin-supportView) .support-availability .is-offline::before { background: #ef4444; }
:is(#messagesView, #admin-supportView) .support-availability::before { content: ''; position: absolute; left: 0; top: 0; width: 60px; height: 60px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface) url('../assets/home-icons/headset.webp') center / 38px 38px no-repeat; }
:is(#messagesView, #admin-supportView) .support-inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:is(#messagesView, #admin-supportView) .support-inbox-heading h2 { margin: 0; font-size: 22px; }
:is(#messagesView, #admin-supportView) .support-inbox-heading .btn { padding: 8px 10px; font-size: 12px; }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) nav { display: grid; gap: 10px; margin: 16px 0; }
:is(#messagesView, #admin-supportView) [data-support-conversation] { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 16px; text-align: left; white-space: normal; }
:is(#messagesView, #admin-supportView) [data-support-conversation][aria-pressed="true"] { box-shadow: 0 0 0 1px #16c7dd; }
:is(#messagesView, #admin-supportView) .support-inbox-avatar, :is(#messagesView, #admin-supportView) .support-message-avatar { display: grid; place-items: center; border-radius: 50%; background: #0087ed; color: white; border: 2px solid #237c98; font-weight: 700; }
:is(#messagesView, #admin-supportView) .support-inbox-avatar { width: 42px; height: 42px; flex-shrink: 0; }
:is(#messagesView, #admin-supportView) .support-inbox-copy { display: grid; gap: 8px; min-width: 0; flex: 1; }
:is(#messagesView, #admin-supportView) .support-inbox-copy > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 400; }
:is(#messagesView, #admin-supportView) [data-support-conversation] .badge { font-size: 10px; flex-shrink: 0; }
:is(#messagesView, #admin-supportView) .support-new-conversation { font-size: 12px; }
:is(#messagesView, #admin-supportView) .support-conversation-panel > [role="status"]:empty { display: none; }
:is(#messagesView, #admin-supportView) .support-conversation-panel > [role="status"] { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
:is(#messagesView, #admin-supportView) .support-thread { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
:is(#messagesView, #admin-supportView) .support-thread-head { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
:is(#messagesView, #admin-supportView) .support-thread-head h3 { font-size: 22px; margin: 0; }
:is(#messagesView, #admin-supportView) .support-thread-head p { font-size: 12px; }
:is(#messagesView, #admin-supportView) .support-thread-actions { justify-content: flex-end; }
:is(#messagesView, #admin-supportView) .support-thread-messages { gap: 12px; padding: 20px 0; }
:is(#messagesView, #admin-supportView) .support-thread-message { position: relative; width: fit-content; max-width: calc(100% - 58px); margin-left: 58px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
:is(#messagesView, #admin-supportView) .support-thread-message.is-requester { justify-self: end; background: var(--surface); border-color: var(--line-strong); }
:is(#messagesView, #admin-supportView) .support-message-avatar { position: absolute; left: -58px; top: 0; width: 38px; height: 38px; font-size: 13px; }
:is(#messagesView, #admin-supportView) .is-requester .support-message-avatar { background: #00aeef; font-size: 11px; }
:is(#messagesView, #admin-supportView) .support-thread-sender { gap: 6px; }
:is(#messagesView, #admin-supportView) .support-thread-sender strong { font-size: 11px; color: var(--soft); }
:is(#messagesView, #admin-supportView) .support-thread-sender time { font-size: 10px; }
:is(#messagesView, #admin-supportView) .support-thread-message p { font-size: 13px; line-height: 1.5; margin-top: 6px; }
:is(#messagesView, #admin-supportView) .support-thread-message > time { display: block; text-align: right; margin-top: 6px; font-size: 10px; }
:is(#messagesView, #admin-supportView) .support-action-required { background: #733634; border-color: #e47e70; color: #fff; }
:is(#messagesView, #admin-supportView) .page-head { padding: 38px 28px 22px; }
:is(#messagesView, #admin-supportView) .page-head h1 { font-size: 44px; }
:is(#messagesView, #admin-supportView) .support-image-field { display: grid; grid-template-columns: minmax(0, 290px) auto; column-gap: 12px; justify-content: start; }
:is(#messagesView, #admin-supportView) .support-image-field input { grid-column: 1; border: 1px solid var(--line-strong); border-radius: 6px; }
:is(#messagesView, #admin-supportView) .support-image-field .small-muted { align-self: center; }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) .support-thread-reply { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--line); }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) label { gap: 4px; font-size: 12px; }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) textarea { min-height: 66px; padding: 10px; }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) input { padding: 8px 10px; }
:is(#messagesView, #admin-supportView) .support-image-field .small-muted { font-size: 11px; }
:is(#messagesView, #admin-supportView) .support-image-preview { max-width: 260px; }
:is(#messagesView, #admin-supportView) .support-image-preview img { max-height: 100px; object-fit: contain; }
:is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) .btn-primary { color: #001b23; background: #00cde5; border-color: #00cde5; }
@media (max-width: 900px) {
  :is(#supportView, #messagesView, #admin-supportView) :is(#supportMessages, #adminSupportConversation) { grid-template-columns: 1fr; }
  :is(#messagesView, #admin-supportView) .support-inbox-panel { min-height: 0; }
  :is(#messagesView, #admin-supportView) .dashboard-wrap { padding: 16px; }
}
@media (max-width: 480px) {
  :is(#messagesView, #admin-supportView) :is(.support-inbox-panel, .support-conversation-panel) { padding: 16px; }
  :is(#messagesView, #admin-supportView) .support-inbox-heading { align-items: flex-start; flex-direction: column; }
  :is(#messagesView, #admin-supportView) [data-support-conversation] { flex-wrap: wrap; }
  :is(#messagesView, #admin-supportView) .support-thread-message { margin-left: 44px; max-width: calc(100% - 44px); }
  :is(#messagesView, #admin-supportView) .support-message-avatar { left: -44px; width: 32px; height: 32px; }
  :is(#messagesView, #admin-supportView) .support-image-field { grid-template-columns: 1fr; }
}

html:not([data-theme="light"]) .view[id^="admin"] {
  --surface: #043044;
  --surface-card: #043044;
  --surface-soft: #072536;
  --panel: #043044;
  --panel-strong: #072536;
  --line: #17636b;
  --line-strong: #1593a1;
  --muted: #aac3cc;
  --soft: #8fd9e3;
}

html:not([data-theme="light"]) .view[id^="admin"] .page-head {
  background-color: #043044 !important;
}

html:not([data-theme="light"]) .view[id^="admin"] :is(input, select, textarea) {
  background-color: #07171e;
  border-color: var(--line);
  color: var(--text);
}

html:not([data-theme="light"]) .view[id^="admin"] :is(
  .admin-workspace-nav, .nrj-account-table th, .data-table th,
  .nrj-account-summary, .admin-action-summary
) {
  background-color: #072536;
  border-color: var(--line);
}

html:not([data-theme="light"]) .view[id^="admin"] :is(
  .workspace-tab.active, .admin-tab.active, .admin-company-tab.active,
  [data-admin-account-type].active
) {
  background-color: #08364b;
  border-color: #16c7dd;
  color: #e4f2f5;
}

html:not([data-theme="light"]) #postView #jobPostForm {
  background: var(--nrj-post-canvas) !important;
}

html:not([data-theme="light"]) #postView {
  --surface: #043044;
  --surface-2: #072536;
  --surface-card: #043044;
  --surface-soft: #072536;
  --line: #17636b;
  --line-strong: #1593a1;
  --muted: #aac3cc;
  --soft: #8fd9e3;
}

html:not([data-theme="light"]) #postView #jobPostForm :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: var(--surface);
  border-color: var(--line);
}

html:not([data-theme="light"]) #postView :is(.job-form-intro > div, .agency-disclosure-notice) {
  background: var(--surface);
  border-color: var(--line);
}

html:not([data-theme="light"]) #postView #jobPostForm .job-form-disclosure {
  background: transparent !important;
}

html:not([data-theme="light"]) #postView #jobPostForm > .job-form-step-disclosure {
  border-color: #043044;
}

html:not([data-theme="light"]) body:is([data-user-role="employer"], [data-user-role="recruiting_organization"]) .app-shell > main #postView.view .page-head {
  border-bottom-color: rgba(0, 202, 239, .34);
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 72% 28%, rgba(0, 165, 226, .18), transparent 36%),
    linear-gradient(112deg, rgba(4, 24, 36, .96) 0%, rgba(5, 32, 45, .94) 58%, rgba(4, 48, 68, .9) 100%) !important;
  box-shadow: inset 0 -24px 70px rgba(0, 163, 214, .035);
}

html:not([data-theme="light"]) body:is([data-user-role="employer"], [data-user-role="recruiting_organization"]) #postView .page-head .eyebrow {
  border-color: rgba(0, 202, 239, .52);
  color: var(--accent-2);
  background: rgba(2, 21, 31, .76);
}

/* Keep business account creation consistent with the blue employer workspace. */
html:not([data-theme="light"]) .app-shell > main #employer-createView.view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #07171e !important;
  background-image:
    linear-gradient(rgba(34, 211, 238, .043) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .043) 1px, transparent 1px),
    radial-gradient(circle at 82% 6%, rgba(0, 165, 226, .13), transparent 28%) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

html:not([data-theme="light"]) #employer-createView .page-head {
  border-bottom-color: rgba(0, 202, 239, .34);
  background-color: #043044 !important;
  background-image:
    radial-gradient(circle at 72% 28%, rgba(0, 165, 226, .16), transparent 36%),
    linear-gradient(112deg, rgba(4, 48, 68, .98) 0%, rgba(4, 48, 68, .94) 62%, rgba(5, 41, 58, .96) 100%) !important;
  box-shadow: inset 0 -24px 70px rgba(0, 163, 214, .05);
}

html:not([data-theme="light"]) #employer-createView .page-head .eyebrow {
  border-color: rgba(0, 202, 239, .52);
  color: var(--accent-2);
  background: rgba(2, 21, 31, .76);
}

html:not([data-theme="light"]) #employer-createView :is(
  .employer-onboarding-form,
  .employer-onboarding-review,
  .employer-onboarding-confirmation
) {
  border-color: rgba(0, 202, 239, .5);
  background: #043044;
  box-shadow: inset 0 0 42px rgba(0, 163, 214, .06), 0 16px 36px rgba(0, 0, 0, .16);
}

html:not([data-theme="light"]) #employer-createView .business-type-chooser label {
  border-color: rgba(0, 202, 239, .34);
  background: #072536;
}

html:not([data-theme="light"]) #employer-createView .business-type-chooser label:has(input:checked) {
  border-color: rgba(34, 211, 238, .82);
  background: #08364b;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .38), 0 0 24px rgba(0, 202, 239, .08);
}

html:not([data-theme="light"]) #employer-createView :is(input, select, textarea) {
  border-color: rgba(0, 202, 239, .34);
  background-color: #07171e;
}

html:not([data-theme="light"]) #employer-createView :is(input, select, textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

html:not([data-theme="light"]) #employer-createView :is(
  .employer-onboarding-section,
  .employer-onboarding-review-note
) {
  border-color: rgba(0, 202, 239, .3);
}

html:not([data-theme="light"]) #employer-createView :is(
  .employer-onboarding-step,
  .employer-onboarding-review li > span
) {
  border-color: rgba(34, 211, 238, .75);
  background: #072536;
  color: #67e8f9;
  box-shadow: 0 0 16px rgba(34, 211, 238, .1);
}