/**
 * /my-profile — self-service staff profile view + edit.
 * The white card / gradient comes from Kadence's boxed page layout; this file
 * styles the edit form (mirrors the Laravel "Edit Profile" screen) and the
 * small view-mode toolbar.
 */

/* ---- shared ---- */
.bw-profile { width: 100%; }

/* Left/right inset matching the boxed front-end pages (~2rem, like the search
   page and /why-brentwood/). The page's .entry-content-wrap has zero padding
   here, so edit mode + the empty state add their own. View mode reuses
   .bw-staff, which already insets its own columns — don't double-pad it. */
.bw-profile--edit,
.bw-profile--empty {
	box-sizing: border-box;
	padding: 2.5rem 2rem 3rem;
}
.bw-profile--empty { font-size: 1.05rem; }

@media (max-width: 600px) {
	.bw-profile--edit,
	.bw-profile--empty { padding: 1.75rem 1.1rem 2.5rem; }
}

/* ---- view mode ---- */
.bw-profile__bar {
	display: flex;
	justify-content: flex-end;
	/* Push down so the button clears the sticky header's "Apply" CTA, which
	   sits top-right (the page title is hidden, so content starts high). */
	margin: 2.5rem 0 1rem;
}
.bw-profile__btn,
.bw-pbtn {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	border: 0;
	border-radius: 6px;
	padding: .7rem 1.2rem;
	text-decoration: none;
	transition: filter .15s ease, background .15s ease;
}
.bw-profile__btn,
.bw-pbtn--save {
	background: var(--global-palette1, #c8272c);
	color: #fff;
}
.bw-profile__btn:hover,
.bw-pbtn--save:hover { filter: brightness(.92); color: #fff; }

.bw-pbtn--ghost {
	background: transparent;
	color: var(--global-palette4, #2b2f36);
	border: 1px solid var(--global-palette6, #cbd2d9);
}
.bw-pbtn--ghost:hover { background: var(--global-palette8, #f4f6f8); }
.bw-pbtn[disabled] { opacity: .6; cursor: default; }

/* ---- edit form ---- */
.bw-pform__title {
	font-size: 1.6rem;
	margin: 0 0 1.25rem;
}
.bw-pform__status {
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	border-radius: 6px;
	font-size: .95rem;
}
.bw-pform__status.is-ok   { background: #e8f5ec; color: #1b5e35; }
.bw-pform__status.is-err  { background: #fdecea; color: #a02622; }
.bw-pform__status.is-busy { background: var(--global-palette8, #f4f6f8); color: var(--global-palette4, #2b2f36); }

.bw-pform__grid {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
.bw-pform__main  { flex: 1 1 auto; min-width: 0; }
.bw-pform__aside { flex: 0 0 13.5rem; }

.bw-prow { display: flex; gap: 1rem; }
.bw-prow--2 > * { flex: 1 1 0; min-width: 0; }

.bw-pfield { margin: 0 0 1rem; }
.bw-plabel {
	display: block;
	font-size: .8rem;
	color: var(--global-palette5, #5b6470);
	margin: 0 0 .3rem;
}
.bw-pinput {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .8rem;
	border: 1px solid var(--global-palette6, #cbd2d9);
	border-radius: 6px;
	font: inherit;
	background: #fff;
}
.bw-pinput::placeholder { color: #9aa3ad; font-style: italic; }
.bw-pinput:focus,
.bw-ms__search:focus { outline: 2px solid var(--global-palette2, #9b1c20); outline-offset: 1px; }

/* ---- categories multi-select ---- */
.bw-ms { position: relative; }
.bw-ms__control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	min-height: 2.6rem;
	padding: .35rem .5rem;
	border: 1px solid var(--global-palette6, #cbd2d9);
	border-radius: 6px;
	background: #fff;
	cursor: text;
}
.bw-ms__tokens { display: contents; list-style: none; margin: 0; padding: 0; }
.bw-ms__token {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	background: var(--global-palette8, #eef1f4);
	border: 1px solid var(--global-palette6, #cbd2d9);
	border-radius: 999px;
	padding: .2rem .25rem .2rem .65rem;
	font-size: .85rem;
}
.bw-ms__token button {
	border: 0; background: none; cursor: pointer;
	font-size: 1rem; line-height: 1; color: #6b7480; padding: 0 .15rem;
}
.bw-ms__token button:hover { color: var(--global-palette1, #c8272c); }
.bw-ms__search {
	flex: 1 1 8rem;
	min-width: 8rem;
	border: 0;
	padding: .25rem;
	font: inherit;
	background: transparent;
}
.bw-ms__search:focus { outline: 0; }
.bw-ms__menu {
	position: absolute;
	z-index: 30;
	left: 0; right: 0; top: calc(100% + 4px);
	max-height: 16rem;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--global-palette6, #cbd2d9);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
	padding: .35rem;
}
.bw-ms__opt {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .4rem .5rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: .92rem;
}
.bw-ms__opt:hover { background: var(--global-palette8, #f4f6f8); }
.bw-ms__opt.is-hidden { display: none; }
.bw-ms__opt input { accent-color: var(--global-palette1, #c8272c); }

/* ---- connect user account ---- */
.bw-userpick { position: relative; }
.bw-userpick__clear {
	position: absolute;
	right: .5rem; top: 50%; transform: translateY(-50%);
	border: 0; background: none; cursor: pointer;
	font-size: 1.3rem; line-height: 1; color: var(--global-palette1, #c8272c);
}
.bw-userpick__menu {
	position: absolute;
	z-index: 30;
	left: 0; right: 0; top: calc(100% + 4px);
	max-height: 14rem; overflow: auto;
	background: #fff;
	border: 1px solid var(--global-palette6, #cbd2d9);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.bw-userpick__opt { padding: .55rem .75rem; cursor: pointer; font-size: .92rem; }
.bw-userpick__opt:hover { background: var(--global-palette8, #f4f6f8); }

/* ---- photo ---- */
.bw-pphoto {
	border: 1px solid var(--global-palette6, #cbd2d9);
	border-radius: 8px;
	padding: 1rem;
	background: #fff;
	text-align: center;
}
.bw-pphoto__preview {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background: var(--global-palette8, #eef1f4) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	margin: 0 0 .85rem;
}
.bw-pphoto__ph { width: 46%; height: 46%; fill: #c2c9d1; }
.bw-pphoto__btn {
	display: inline-flex; align-items: center; gap: .45em;
	background: var(--global-palette1, #c8272c);
	color: #fff; font-weight: 600;
	padding: .6rem 1rem; border-radius: 6px; cursor: pointer;
}
.bw-pphoto__btn:hover { filter: brightness(.92); }

/* ---- actions ---- */
.bw-pform__actions {
	display: flex; gap: .75rem; align-items: center;
	margin-top: 1.25rem;
}

/* ---- responsive ---- */
@media (max-width: 782px) {
	.bw-pform__grid { flex-direction: column-reverse; }
	.bw-pform__aside { flex: 1 1 auto; width: 100%; max-width: 18rem; }
}
@media (max-width: 520px) {
	.bw-prow--2 { flex-direction: column; gap: 0; }
}