/* ==================================================================
 * SBA Waterless Wash — Portal stylesheet v2.2 (Staff + Agent)
 * Dark navy palette. Full-page, no theme constraints.
 * ================================================================== */

/* Reset for the full-page portal */
body.sba-portal-body{
	margin:0;padding:0;
	background:#0E1419;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color:#E5EAF0;line-height:1.55;-webkit-font-smoothing:antialiased;
	min-height:100vh;
}
body.sba-portal-body *{box-sizing:border-box}
body.sba-portal-body a{color:#5EB8A8;text-decoration:none}
body.sba-portal-body a:hover{color:#7DD9C9}

.sba-portal [hidden],
.sba-modal[hidden]{display:none !important}

.sba-portal{
	/* Core palette */
	--p-bg:#0E1419;
	--p-surface:#11171D;
	--p-surface-2:#1A2129;
	--p-surface-3:#252D37;
	--p-border:#252D37;
	--p-border-soft:#1E252D;
	--p-text:#E5EAF0;
	--p-text-soft:#A6B5C2;
	--p-text-mute:#6F7E8B;

	/* Accent green (kept from booking flow for continuity) */
	--p-green:#10B981;
	--p-green-2:#34D399;
	--p-green-3:#059669;

	/* Status accent colors — DARK-friendly */
	--p-radius:14px;
	--p-radius-sm:10px;
	--p-warn-bg:rgba(245,158,11,.15);  --p-warn-fg:#FCD34D;
	--p-ok-bg:rgba(16,185,129,.15);    --p-ok-fg:#34D399;
	--p-info-bg:rgba(59,130,246,.15);  --p-info-fg:#93C5FD;
	--p-bad-bg:rgba(239,68,68,.15);    --p-bad-fg:#FCA5A5;
	--p-purple-bg:rgba(168,85,247,.15);--p-purple-fg:#C4B5FD;
	--p-teal-bg:rgba(20,184,166,.15);  --p-teal-fg:#5EEAD4;

	min-height:100vh;display:flex;flex-direction:column;
}

/* ====================== TOPBAR ====================== */
.sba-portal__topbar{
	display:flex;justify-content:space-between;align-items:center;
	padding:14px 22px;background:var(--p-surface);
	border-bottom:1px solid var(--p-border);
	position:sticky;top:0;z-index:100;
}
.sba-portal__brand{display:flex;align-items:center;gap:12px}
.sba-portal__logo{
	width:38px;height:38px;border-radius:10px;
	background:linear-gradient(135deg,var(--p-green),var(--p-green-3));color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:18px;
	box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.sba-portal__brand-name{font-weight:700;font-size:15px;color:var(--p-text)}
.sba-portal__brand-sub{font-size:12px;color:var(--p-text-mute)}
.sba-portal__top-actions{display:flex;align-items:center;gap:14px}

/* Online status toggle (agent only) */
.sba-portal__online-toggle{
	display:flex;align-items:center;gap:8px;
	background:var(--p-surface-2);border:1px solid var(--p-border);
	border-radius:999px;padding:5px 12px 5px 8px;cursor:pointer;
	font-size:12px;font-weight:600;color:var(--p-text-soft);
	transition:.15s;
}
.sba-portal__online-toggle:hover{border-color:var(--p-green-2)}
.sba-portal__online-toggle .dot{
	width:10px;height:10px;border-radius:50%;
	background:#6F7E8B;box-shadow:0 0 0 2px rgba(111,126,139,.25);
	transition:.2s;
}
.sba-portal__online-toggle.is-online .dot{
	background:var(--p-green-2);box-shadow:0 0 0 3px rgba(52,211,153,.25);
	animation:online-pulse 2s ease-in-out infinite;
}
.sba-portal__online-toggle.is-online{color:var(--p-green-2);border-color:rgba(52,211,153,.3)}
@keyframes online-pulse{
	0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.25)}
	50%{box-shadow:0 0 0 6px rgba(52,211,153,.10)}
}

.sba-portal__bell{
	position:relative;background:var(--p-surface-2);border:1px solid var(--p-border);
	width:38px;height:38px;border-radius:50%;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	color:var(--p-text-soft);font-size:16px;transition:.15s;
}
.sba-portal__bell:hover{border-color:var(--p-green-2);color:var(--p-green-2)}
.sba-portal__bell.is-ringing{animation:bell-ring .6s ease;color:var(--p-green-2)}
@keyframes bell-ring{
	0%,100%{transform:rotate(0)}
	20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}
	60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}
}
.sba-portal__bell-count{
	position:absolute;top:-4px;right:-4px;
	background:#EF4444;color:#fff;border:2px solid var(--p-surface);
	min-width:18px;height:18px;border-radius:9px;
	display:flex;align-items:center;justify-content:center;
	font-size:10px;font-weight:700;padding:0 5px;
}
.sba-portal__user{display:flex;align-items:center;gap:10px}
.sba-portal__avatar{
	width:36px;height:36px;border-radius:50%;
	background:linear-gradient(135deg,var(--p-green),var(--p-green-3));color:#fff;
	display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
.sba-portal__user-name{font-size:13px;font-weight:600;color:var(--p-text);line-height:1.2}
.sba-portal__user-role{font-size:11px;color:var(--p-text-mute)}
.sba-portal__logout{
	color:var(--p-text-mute);width:36px;height:36px;
	display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.sba-portal__logout:hover{background:var(--p-surface-2);color:#FCA5A5}

/* ====================== NOTIF PANEL ====================== */
/* Positioned relative to the bell wrapper, so the panel always aligns under the bell */
.sba-portal__bell-wrap{position:relative;display:inline-flex}
.sba-notif-panel{
	position:absolute;
	top:calc(100% + 12px);
	right:0;
	width:340px;max-width:calc(100vw - 30px);
	background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);
	box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:200;overflow:hidden;
}
/* On small screens, take the panel out of the absolute flow and center it as a fixed sheet
   so it can never overflow the viewport (was previously clipping at the right edge on mobile). */
@media (max-width:600px){
	.sba-notif-panel{
		position:fixed;
		top:64px;
		left:50%;
		right:auto;
		transform:translateX(-50%);
		width:calc(100vw - 24px);
		max-width:380px;
		max-height:calc(100vh - 80px);
	}
	.sba-notif-panel__list{max-height:calc(100vh - 160px) !important}
}
.sba-notif-panel__header{
	display:flex;justify-content:space-between;align-items:center;
	padding:12px 16px;border-bottom:1px solid var(--p-border);
	color:var(--p-text);
}
.sba-notif-panel__clear{
	background:transparent;border:none;cursor:pointer;
	font-size:12px;color:var(--p-green-2);font-weight:600;
}
.sba-notif-panel__clear:hover{text-decoration:underline}
.sba-notif-panel__list{max-height:60vh;overflow:auto}
.sba-notif-item{
	padding:12px 16px;border-bottom:1px solid var(--p-border);cursor:pointer;
	display:flex;gap:10px;color:var(--p-text);
}
.sba-notif-item:last-child{border-bottom:none}
.sba-notif-item:hover{background:var(--p-surface-2)}
.sba-notif-item.is-unread{background:rgba(16,185,129,.06)}
.sba-notif-item__dot{
	width:8px;height:8px;border-radius:50%;background:var(--p-green-2);
	margin-top:7px;flex-shrink:0;
}
.sba-notif-item:not(.is-unread) .sba-notif-item__dot{background:transparent}
.sba-notif-item__title{font-size:13px;font-weight:600;color:var(--p-text);margin-bottom:2px}
.sba-notif-item__body{font-size:12px;color:var(--p-text-soft);line-height:1.4}
.sba-notif-item__time{font-size:11px;color:var(--p-text-mute);margin-top:2px}
.sba-notif-panel__empty{padding:30px;text-align:center;color:var(--p-text-mute);font-size:13px}

/* ====================== STATS ROW ====================== */
.sba-portal__stats{
	display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
	padding:18px 22px 0;
}
.sba-portal__stats--agent{grid-template-columns:repeat(3,1fr)}
.sba-stat{
	background:var(--p-surface);padding:14px 16px;border-radius:var(--p-radius-sm);
	border:1px solid var(--p-border);
}
.sba-stat__label{font-size:12px;color:var(--p-text-mute);margin-bottom:4px}
.sba-stat__val{font-size:22px;font-weight:700;color:var(--p-text)}
@media (max-width:720px){
	.sba-portal__stats{grid-template-columns:repeat(2,1fr)}
	.sba-portal__stats--agent{grid-template-columns:repeat(3,1fr)}
	.sba-portal__stats--agent .sba-stat{padding:10px 12px}
	.sba-portal__stats--agent .sba-stat__val{font-size:18px}
}

/* ====================== TABS ====================== */
.sba-portal__tabs{
	display:flex;gap:6px;padding:18px 22px 0;
	border-bottom:1px solid var(--p-border);margin-top:18px;
	overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.sba-portal__tab{
	background:transparent;border:none;cursor:pointer;
	padding:10px 16px;font-size:14px;font-weight:600;color:var(--p-text-mute);
	border-bottom:3px solid transparent;display:flex;align-items:center;gap:6px;
	white-space:nowrap;position:relative;
}
.sba-portal__tab:hover{color:var(--p-text)}
.sba-portal__tab.is-active{color:var(--p-green-2);border-bottom-color:var(--p-green-2)}
.sba-tab-badge{
	background:#EF4444;color:#fff;min-width:18px;height:18px;
	border-radius:9px;font-size:10px;font-weight:700;
	display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}

/* Sub-tabs (for staff: Active vs Assigned to Agent) */
.sba-portal__subtabs{
	display:flex;gap:0;padding:14px 22px 0;
	flex-wrap:wrap;
}
.sba-portal__subtab{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-radius:999px;padding:7px 14px;cursor:pointer;
	font-size:12px;font-weight:600;color:var(--p-text-soft);
	display:inline-flex;align-items:center;gap:6px;
	margin-right:8px;margin-bottom:8px;transition:.15s;
}
.sba-portal__subtab:hover{border-color:var(--p-green-2);color:var(--p-text)}
.sba-portal__subtab.is-active{
	background:linear-gradient(135deg,var(--p-green),var(--p-green-3));
	color:#fff;border-color:transparent;
}
.sba-portal__subtab--warn.is-active{
	background:linear-gradient(135deg,#F59E0B,#D97706);
}

/* Agent mobile bottom-nav tabs */
.sba-portal__tabs--mobile{padding:0;margin-top:0;border-bottom:none}
@media (max-width:720px){
	.sba-portal__tabs--mobile{
		position:fixed;left:0;right:0;bottom:0;background:var(--p-surface);
		border-top:1px solid var(--p-border);
		justify-content:space-around;z-index:80;
		padding:6px 0 max(6px,env(safe-area-inset-bottom));
		box-shadow:0 -4px 12px rgba(0,0,0,.4);
	}
	.sba-portal__tabs--mobile .sba-portal__tab{
		flex-direction:column;gap:2px;font-size:11px;padding:8px;
		border-bottom:none;border-top:2px solid transparent;
	}
	.sba-portal__tabs--mobile .sba-portal__tab.is-active{
		border-top-color:var(--p-green-2);color:var(--p-green-2);
	}
	.sba-portal__tabs--mobile .sba-portal__tab .ti{font-size:20px}
	.sba-portal--agent .sba-pane{padding-bottom:80px}
}

/* ====================== FILTERS / SEARCH ====================== */
.sba-portal__filters{
	display:flex;justify-content:space-between;gap:12px;
	padding:18px 22px;flex-wrap:wrap;
}
.sba-search{
	flex:1;min-width:220px;position:relative;
	display:flex;align-items:center;
}
.sba-search .ti{position:absolute;left:12px;color:var(--p-text-mute);font-size:16px}
.sba-search input{
	width:100%;padding:10px 14px 10px 36px;border:1px solid var(--p-border);
	border-radius:var(--p-radius-sm);background:var(--p-surface);font-size:14px;color:var(--p-text);
}
.sba-search input::placeholder{color:var(--p-text-mute)}
.sba-search input:focus{outline:none;border-color:var(--p-green-2);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.sba-filter-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sba-filter,.sba-date-range input{
	padding:10px 12px;border:1px solid var(--p-border);
	border-radius:var(--p-radius-sm);background:var(--p-surface);font-size:14px;color:var(--p-text);
}
.sba-filter:focus,.sba-date-range input:focus{outline:none;border-color:var(--p-green-2)}
.sba-date-range{display:inline-flex;align-items:center;gap:6px}
.sba-date-range input{font-size:13px;padding:8px 10px}
.sba-date-range__sep{color:var(--p-text-mute);font-size:12px}

/* ====================== PANES ====================== */
.sba-pane{display:none;padding:18px 22px 22px}
.sba-pane.is-active{display:block}

/* ====================== BOOKINGS TABLE (staff dispatch) ====================== */
.sba-orders-table-wrap{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-radius:var(--p-radius);overflow:hidden;
	box-shadow:0 2px 14px rgba(0,0,0,.3);
}
.sba-orders-table{
	width:100%;border-collapse:collapse;font-size:13px;color:var(--p-text);
}
.sba-orders-table th{
	text-align:left;padding:12px 14px;
	background:var(--p-surface-2);color:var(--p-text-soft);
	font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
	border-bottom:1px solid var(--p-border);
}
.sba-orders-table td{
	padding:13px 14px;border-bottom:1px solid var(--p-border);vertical-align:middle;
}
.sba-orders-table tr:last-child td{border-bottom:none}
.sba-orders-table tr:hover td{background:var(--p-surface-2)}
.sba-orders-table tr.is-rejected td{background:rgba(239,68,68,.07)}
.sba-orders-table tr.is-rejected:hover td{background:rgba(239,68,68,.12)}
.sba-orders-table tr.is-offline td{background:rgba(239,68,68,.05)}
.sba-orders-table tr.is-offline:hover td{background:rgba(239,68,68,.10)}
.sba-orders-table__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:var(--p-green-2)}
.sba-orders-table__empty{text-align:center;padding:50px;color:var(--p-text-mute)}
.sba-orders-table__actions{text-align:right;white-space:nowrap}

.sba-status-pill{
	display:inline-block;padding:3px 10px;border-radius:999px;
	font-size:11px;font-weight:600;text-transform:capitalize;
}
.sba-status-pill[data-s="pending"]{background:var(--p-warn-bg);color:var(--p-warn-fg)}
.sba-status-pill[data-s="confirmed"]{background:var(--p-info-bg);color:var(--p-info-fg)}
.sba-status-pill[data-s="assigned"]{background:var(--p-ok-bg);color:var(--p-ok-fg)}
.sba-status-pill[data-s="accepted_by_agent"]{background:var(--p-teal-bg);color:var(--p-teal-fg)}
.sba-status-pill[data-s="on_the_way"]{background:var(--p-purple-bg);color:var(--p-purple-fg)}
.sba-status-pill[data-s="in_progress"]{background:var(--p-teal-bg);color:var(--p-teal-fg)}
.sba-status-pill[data-s="completed"]{background:var(--p-ok-bg);color:var(--p-ok-fg)}
.sba-status-pill[data-s="cancelled"]{background:var(--p-bad-bg);color:var(--p-bad-fg)}
.sba-status-pill[data-s="refund_in_progress"],.sba-status-pill[data-s="refunded"]{background:var(--p-warn-bg);color:var(--p-warn-fg)}

.sba-approval-flag,.sba-rejected-flag,.sba-offline-flag{
	display:inline-block;font-size:10px;padding:2px 8px;
	border-radius:999px;margin-left:6px;font-weight:600;vertical-align:middle;
	text-transform:uppercase;letter-spacing:.4px;
}
.sba-approval-flag{background:var(--p-warn-bg);color:var(--p-warn-fg)}
.sba-rejected-flag{background:var(--p-bad-bg);color:var(--p-bad-fg)}
.sba-offline-flag{background:var(--p-bad-bg);color:var(--p-bad-fg)}

.sba-by-tag{
	display:inline-flex;align-items:center;gap:4px;
	font-size:11px;color:var(--p-text-mute);
	background:var(--p-surface-2);padding:2px 8px;border-radius:6px;
}

/* Action buttons */
.sba-btn-primary,.sba-btn-secondary,.sba-btn-danger,.sba-btn-warn{
	display:inline-flex;align-items:center;gap:6px;
	padding:8px 14px;font-size:13px;font-weight:600;
	border-radius:var(--p-radius-sm);cursor:pointer;
	border:1px solid transparent;transition:.15s;
}
.sba-btn-primary{
	background:linear-gradient(135deg,var(--p-green),var(--p-green-3));color:#fff;
	box-shadow:0 3px 10px rgba(16,185,129,.25);
}
.sba-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(16,185,129,.35)}
.sba-btn-secondary{background:var(--p-surface-2);border-color:var(--p-border);color:var(--p-text-soft)}
.sba-btn-secondary:hover{background:var(--p-surface-3);color:var(--p-text);border-color:var(--p-green-2)}
.sba-btn-danger{background:var(--p-surface-2);border-color:rgba(239,68,68,.4);color:#FCA5A5}
.sba-btn-danger:hover{background:rgba(239,68,68,.15);color:#FEE2E2}
.sba-btn-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:#FCD34D}
.sba-btn-warn:hover{background:rgba(245,158,11,.2)}
.sba-btn-primary--full{width:100%;justify-content:center;padding:12px 18px;font-size:14px}
.sba-btn-primary:disabled,.sba-btn-secondary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sba-btn-sm{padding:6px 10px;font-size:12px}

.sba-pagination{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:18px}
.sba-page-btn{
	background:var(--p-surface-2);border:1px solid var(--p-border);
	min-width:32px;height:32px;border-radius:8px;cursor:pointer;
	font-size:13px;color:var(--p-text-soft);
}
.sba-page-btn:hover{border-color:var(--p-green-2);color:var(--p-text)}
.sba-page-btn.is-active{background:var(--p-green);color:#fff;border-color:transparent}

/* ====================== APPROVALS LIST ====================== */
.sba-approvals-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.sba-approval-card{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-radius:var(--p-radius);padding:16px;
	border-left:4px solid #F59E0B;
}
.sba-approval-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.sba-approval-card__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:var(--p-green-2);font-size:14px}
.sba-approval-card__from{font-size:12px;color:var(--p-text-mute);margin-top:2px}
.sba-approval-card__details{font-size:13px;color:var(--p-text-soft);margin-bottom:14px;display:flex;flex-direction:column;gap:4px}
.sba-approval-card__details strong{color:var(--p-text)}
.sba-approval-card__actions{display:flex;gap:8px;flex-wrap:wrap}

/* ====================== AGENTS GRID ====================== */
.sba-agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sba-agent-card{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-radius:var(--p-radius);padding:16px;display:flex;gap:12px;align-items:center;
}
.sba-agent-card__avatar{
	width:42px;height:42px;border-radius:50%;
	background:linear-gradient(135deg,var(--p-green-2),var(--p-green));color:#fff;
	display:flex;align-items:center;justify-content:center;font-weight:700;
	position:relative;
}
.sba-agent-card__avatar::after{
	content:"";position:absolute;bottom:-1px;right:-1px;
	width:12px;height:12px;border-radius:50%;
	border:2px solid var(--p-surface);background:#6F7E8B;
}
.sba-agent-card.is-online .sba-agent-card__avatar::after{background:var(--p-green-2)}
.sba-agent-card__name{font-weight:600;color:var(--p-text)}
.sba-agent-card__meta{font-size:12px;color:var(--p-text-mute)}
.sba-agent-card__online{font-size:11px;color:var(--p-green-2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.sba-agent-card.is-offline .sba-agent-card__online{color:var(--p-text-mute)}

/* ====================== AGENT JOBS LIST ====================== */
.sba-jobs-list{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.sba-job-card{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-radius:var(--p-radius);padding:16px;
}
.sba-job-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.sba-job-card__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:var(--p-green-2);font-size:14px}
.sba-job-card__customer{font-weight:600;color:var(--p-text)}
.sba-job-card__details{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px;color:var(--p-text-soft);margin-bottom:14px}
.sba-job-card__detail{display:flex;align-items:flex-start;gap:6px}
.sba-job-card__detail .ti{color:var(--p-green-2);margin-top:2px;flex-shrink:0}
.sba-job-card__detail a{color:var(--p-green-2)}
.sba-job-card__location{grid-column:1/-1}
.sba-job-card__actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--p-border)}

/* ====================== AGENT NEW BOOKING FORM ====================== */
.sba-agent-new-form{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-radius:var(--p-radius);padding:20px;
}
.sba-agent-new-form h3{margin:0 0 4px;font-size:18px;color:var(--p-text)}
.sba-form-hint{
	font-size:13px;margin:0 0 18px;padding:8px 12px;
	background:var(--p-warn-bg);color:var(--p-warn-fg);
	border-radius:var(--p-radius-sm);
}
.sba-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.sba-form-field--full{grid-column:1/-1}
@media (max-width:600px){.sba-form-grid{grid-template-columns:1fr}}
.sba-form-field{display:flex;flex-direction:column;gap:6px}
.sba-form-field label{font-size:13px;font-weight:600;color:var(--p-text-soft)}
.sba-form-field input,.sba-form-field select,.sba-form-field textarea{
	padding:10px 12px;border:1px solid var(--p-border);border-radius:var(--p-radius-sm);
	background:var(--p-surface-2);font-size:14px;color:var(--p-text);font-family:inherit;
}
.sba-form-field input::placeholder,.sba-form-field textarea::placeholder{color:var(--p-text-mute)}
.sba-form-field input:focus,.sba-form-field select:focus,.sba-form-field textarea:focus{
	outline:none;border-color:var(--p-green-2);box-shadow:0 0 0 3px rgba(52,211,153,.15);
}
.sba-form-field textarea{resize:vertical;min-height:60px}
.sba-req{color:#FCA5A5}
.sba-agent-new-form__total{
	display:flex;justify-content:space-between;align-items:center;
	background:var(--p-surface-2);padding:14px 16px;border-radius:var(--p-radius-sm);
	margin-bottom:16px;font-size:14px;color:var(--p-text-soft);
}
.sba-agent-new-form__total strong{font-size:18px;color:var(--p-green-2)}

/* Payment radio pills inside form */
.sba-pay-options{
	display:flex;gap:8px;flex-wrap:wrap;
}
.sba-pay-options input[type=radio]{display:none}
.sba-pay-options label{
	display:flex;align-items:center;gap:6px;
	padding:9px 14px;border-radius:999px;
	background:var(--p-surface-2);border:1px solid var(--p-border);
	font-size:13px;font-weight:500;color:var(--p-text-soft);cursor:pointer;
	transition:.15s;
}
.sba-pay-options label:hover{border-color:var(--p-green-2)}
.sba-pay-options input[type=radio]:checked + label{
	background:linear-gradient(135deg,var(--p-green),var(--p-green-3));
	color:#fff;border-color:transparent;
}

/* ====================== MODAL ====================== */
.sba-modal{
	position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;
}
.sba-modal[hidden]{display:none !important}
.sba-modal__backdrop{
	position:absolute;inset:0;
	background:rgba(15,23,30,.65);  /* neutral dark, not greenish */
	backdrop-filter:blur(3px);
}
.sba-modal__panel{
	position:relative;background:var(--p-surface);
	border:1px solid var(--p-border-strong, #2a3441);
	border-radius:18px;
	padding:26px;max-width:480px;width:100%;color:var(--p-text);
	box-shadow:0 32px 84px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
	max-height:90vh;overflow:auto;
	animation:sba-modal-in .2s ease-out;
}
@keyframes sba-modal-in{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.sba-modal--wide .sba-modal__panel{max-width:680px}
.sba-modal__close{
	position:absolute;top:14px;right:14px;
	background:transparent;border:none;cursor:pointer;
	width:32px;height:32px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--p-text-mute);font-size:18px;
}
.sba-modal__close:hover{background:var(--p-surface-2);color:var(--p-text)}
.sba-modal__panel h3{margin:0 0 6px;font-size:18px;color:var(--p-text)}
.sba-modal__sub{margin:0 0 16px;color:var(--p-text-mute);font-size:13px}
.sba-modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}

/* In-row expanded detail panel (staff "view inside the row") */
.sba-orders-table__detail-row td{padding:0 !important}
.sba-row-detail{
	background:var(--p-surface-2);padding:18px 22px;
	border-top:2px solid var(--p-green);
	animation:rowDetailIn .2s ease-out;
}
@keyframes rowDetailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.sba-row-detail__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:16px;margin-bottom:16px;
}
.sba-row-detail__cell{}
.sba-row-detail__label{
	font-size:10px;text-transform:uppercase;letter-spacing:.5px;
	color:var(--p-text-mute);margin-bottom:4px;font-weight:600;
}
.sba-row-detail__value{font-size:13px;color:var(--p-text);font-weight:500}
.sba-row-detail__section-title{
	font-size:11px;font-weight:700;color:var(--p-text-mute);
	text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;
}
.sba-row-detail__address{
	padding:10px 12px;background:var(--p-surface);border-radius:8px;
	font-size:13px;color:var(--p-text);
}
.sba-row-detail__close-btn{
	margin-top:14px;
}

/* Status timeline inside detail */
.sba-row-detail__timeline{
	display:flex;flex-direction:column;gap:8px;
}
.sba-tl-item{
	display:flex;gap:10px;padding:8px 0;position:relative;
}
.sba-tl-item::before{
	content:"";position:absolute;left:5px;top:18px;bottom:-8px;
	width:2px;background:var(--p-border);
}
.sba-tl-item:last-child::before{display:none}
.sba-tl-dot{
	width:12px;height:12px;border-radius:50%;
	background:var(--p-green-2);flex-shrink:0;margin-top:4px;
	box-shadow:0 0 0 3px rgba(52,211,153,.15);
	z-index:1;
}
.sba-tl-content{flex:1;min-width:0}
.sba-tl-title{font-weight:600;color:var(--p-text);font-size:13px}
.sba-tl-sub{font-size:12px;color:var(--p-green-2);margin-top:2px}
.sba-tl-notes{
	font-size:12px;color:var(--p-text-soft);margin-top:3px;
	padding:6px 10px;background:var(--p-surface);border-radius:6px;
}
.sba-tl-meta{font-size:10px;color:var(--p-text-mute);margin-top:4px;text-transform:uppercase;letter-spacing:.3px}

/* ====================== TOASTS ====================== */
.sba-toast-container{
	position:fixed;top:80px;right:22px;z-index:400;
	display:flex;flex-direction:column;gap:10px;pointer-events:none;
	max-width:340px;
}
.sba-toast{
	background:var(--p-surface);border:1px solid var(--p-border);
	border-left:4px solid var(--p-green);
	border-radius:var(--p-radius-sm);padding:12px 16px;
	box-shadow:0 8px 24px rgba(0,0,0,.5);
	pointer-events:auto;animation:toast-in .25s ease-out;
	display:flex;gap:10px;align-items:flex-start;
	font-size:13px;color:var(--p-text);
}
.sba-toast--success{border-left-color:var(--p-green-2)}
.sba-toast--error{border-left-color:#EF4444}
.sba-toast--info{border-left-color:var(--p-info-fg)}
.sba-toast--new{border-left-color:#F59E0B}
.sba-toast__icon{flex-shrink:0;font-size:16px;color:var(--p-green-2);margin-top:1px}
.sba-toast--error .sba-toast__icon{color:#EF4444}
.sba-toast--new .sba-toast__icon{color:#F59E0B}
.sba-toast__title{font-weight:600;margin-bottom:2px}
.sba-toast__body{font-size:12px;color:var(--p-text-soft)}
.sba-toast__close{
	background:transparent;border:none;cursor:pointer;
	color:var(--p-text-mute);font-size:14px;margin-left:auto;
	width:20px;height:20px;display:flex;align-items:center;justify-content:center;
}
@keyframes toast-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

@media (max-width:600px){
	.sba-toast-container{top:auto;bottom:84px;left:50%;right:auto;transform:translateX(-50%);max-width:300px;width:calc(100% - 32px)}
	.sba-toast{padding:10px 12px;font-size:12px}
}

/* ====================== LOGIN PAGES ====================== */
.sba-login-page{
	min-height:100vh;display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#0E1419 0%,#11171D 100%);
	padding:24px;position:relative;
}
.sba-login-page::before{
	content:"";position:absolute;inset:0;
	background:radial-gradient(circle at 20% 30%,rgba(16,185,129,.12),transparent 50%),
	           radial-gradient(circle at 80% 70%,rgba(52,211,153,.08),transparent 50%);
	pointer-events:none;
}
.sba-login-card{
	background:var(--p-surface);border:1px solid var(--p-border);border-radius:20px;
	padding:36px 28px;max-width:380px;width:100%;
	box-shadow:0 20px 60px rgba(0,0,0,.5);
	position:relative;text-align:center;
}
.sba-login-card__logo{
	width:64px;height:64px;border-radius:16px;margin:0 auto 16px;
	background:linear-gradient(135deg,var(--p-green-2),var(--p-green));color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:28px;
	box-shadow:0 8px 24px rgba(16,185,129,.3);
}
.sba-login-card h1{margin:0 0 6px;font-size:22px;color:var(--p-text)}
.sba-login-card__sub{margin:0 0 24px;color:var(--p-text-mute);font-size:14px}
.sba-login-card .sba-form-field{text-align:left;margin-bottom:14px}
.sba-login-card .sba-btn-primary--full{margin-top:6px}
.sba-login-card__alt{margin-top:20px;font-size:13px;color:var(--p-text-mute)}
.sba-login-card__alt a{font-weight:600;color:var(--p-green-2);margin-left:6px}

/* ====================== EMPTY ====================== */
.sba-empty{
	text-align:center;padding:50px 20px;color:var(--p-text-mute);font-size:14px;
	background:var(--p-surface);border-radius:var(--p-radius);
	border:1px dashed var(--p-border);
}

/* ====================== QR POPUP ====================== */
.sba-qr-popup{
	display:flex;flex-direction:column;align-items:center;gap:14px;
	padding:18px 6px;
}
.sba-qr-popup img,.sba-qr-popup svg{
	max-width:220px;width:100%;height:auto;
	border:8px solid #fff;border-radius:12px;
	box-shadow:0 8px 20px rgba(0,0,0,.4);
	background:#fff;
}
.sba-qr-popup__hint{font-size:13px;color:var(--p-text-mute);text-align:center;max-width:280px}

/* ====================== FLATPICKR DARK ====================== */
body.sba-portal-body .flatpickr-calendar,
.flatpickr-calendar.sba-portal-cal{
	background:var(--p-surface, #11171D) !important;
	border:1px solid var(--p-border, #252D37) !important;
	box-shadow:0 12px 30px rgba(0,0,0,.55) !important;
	color:var(--p-text, #E5EAF0) !important;
	z-index:10001 !important;
}
body.sba-portal-body .flatpickr-calendar .flatpickr-months,
body.sba-portal-body .flatpickr-calendar .flatpickr-current-month,
body.sba-portal-body .flatpickr-calendar .flatpickr-current-month input.cur-year,
body.sba-portal-body .flatpickr-calendar .flatpickr-monthDropdown-months,
body.sba-portal-body .flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-calendar.sba-portal-cal .flatpickr-months,
.flatpickr-calendar.sba-portal-cal .flatpickr-current-month,
.flatpickr-calendar.sba-portal-cal .flatpickr-current-month input.cur-year,
.flatpickr-calendar.sba-portal-cal .flatpickr-monthDropdown-months,
.flatpickr-calendar.sba-portal-cal .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{
	color:#E5EAF0 !important;
	background:transparent !important;
}
body.sba-portal-body .flatpickr-calendar .flatpickr-monthDropdown-months option,
.flatpickr-calendar.sba-portal-cal .flatpickr-monthDropdown-months option{
	background:#11171D !important;color:#E5EAF0 !important;
}
body.sba-portal-body .flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar.sba-portal-cal .flatpickr-weekday{color:#A6B5C2 !important;background:transparent !important}
body.sba-portal-body .flatpickr-calendar .flatpickr-day,
.flatpickr-calendar.sba-portal-cal .flatpickr-day{color:#E5EAF0 !important}
body.sba-portal-body .flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar.sba-portal-cal .flatpickr-day.today{border-color:#34D399 !important;background:transparent !important}
body.sba-portal-body .flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar.sba-portal-cal .flatpickr-day:hover{background:rgba(52,211,153,0.10) !important;color:#34D399 !important}
body.sba-portal-body .flatpickr-calendar .flatpickr-day.selected,
body.sba-portal-body .flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar.sba-portal-cal .flatpickr-day.selected,
.flatpickr-calendar.sba-portal-cal .flatpickr-day.selected:hover{
	background:#10B981 !important;color:#fff !important;border-color:transparent !important;font-weight:700;
}
body.sba-portal-body .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.sba-portal-cal .flatpickr-day.flatpickr-disabled{color:#3a4651 !important;text-decoration:line-through;background:transparent !important}
body.sba-portal-body .flatpickr-calendar .flatpickr-prev-month,
body.sba-portal-body .flatpickr-calendar .flatpickr-next-month,
.flatpickr-calendar.sba-portal-cal .flatpickr-prev-month,
.flatpickr-calendar.sba-portal-cal .flatpickr-next-month{color:#34D399 !important;fill:#34D399 !important}
body.sba-portal-body .flatpickr-calendar .flatpickr-prev-month svg,
body.sba-portal-body .flatpickr-calendar .flatpickr-next-month svg,
.flatpickr-calendar.sba-portal-cal .flatpickr-prev-month svg,
.flatpickr-calendar.sba-portal-cal .flatpickr-next-month svg{fill:#34D399 !important}

/* Inline error in login forms */
.sba-inline-err{
	font-size:13px;color:#FCA5A5;
	background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.25);
	border-radius:var(--p-radius-sm);padding:8px 12px;margin-bottom:10px;
	display:flex;align-items:center;gap:6px;
}
.sba-inline-err::before{content:"⚠";font-size:14px}

/* Login form contrast — inputs need to be clearly visible on dark background */
.sba-login-card .sba-form-field input{
	background:var(--p-surface-2);
	color:var(--p-text);
	border:1px solid var(--p-border);
}
.sba-login-card .sba-form-field input:focus{
	outline:none;
	border-color:var(--p-green-2);
	box-shadow:0 0 0 3px rgba(52,211,153,.15);
	background:var(--p-surface-2);
}
.sba-login-card .sba-form-field label{color:var(--p-text-soft)}

/* Autofill override (Chrome paints autofilled fields white by default) */
.sba-login-card input:-webkit-autofill,
.sba-login-card input:-webkit-autofill:hover,
.sba-login-card input:-webkit-autofill:focus{
	-webkit-text-fill-color:var(--p-text) !important;
	-webkit-box-shadow:0 0 0 1000px var(--p-surface-2) inset !important;
	caret-color:var(--p-text) !important;
	transition:background-color 9999s ease-in-out 0s;
}

/* v2.3 — Offline lock overlay, agent section title, proof preview */
.sba-offline-lock{
	background:rgba(239,68,68,.08);
	border:1px dashed rgba(239,68,68,.35);
	border-radius:var(--p-radius);
	padding:24px 20px;text-align:center;margin-bottom:14px;
}
.sba-offline-lock .ti{font-size:32px;color:#FCA5A5;margin-bottom:8px;display:block}
.sba-offline-lock h4{margin:0 0 4px;color:var(--p-text);font-size:16px}
.sba-offline-lock p{margin:0;font-size:13px;color:var(--p-text-soft)}

.sba-jobs-list.is-locked .sba-job-card{
	opacity:.5;pointer-events:none;
	filter:grayscale(.3);
}
.sba-jobs-list.is-locked .sba-job-card .sba-btn-primary,
.sba-jobs-list.is-locked .sba-job-card .sba-btn-danger,
.sba-jobs-list.is-locked .sba-job-card .sba-btn-warn{
	opacity:.4;cursor:not-allowed;
}

.sba-agent-section{margin-bottom:22px}
.sba-agent-section__title{
	margin:0 0 12px;font-size:14px;font-weight:700;
	color:var(--p-text);text-transform:uppercase;letter-spacing:.5px;
	display:flex;align-items:center;gap:8px;
}
.sba-agent-section__title .ti{color:var(--p-green-2)}

.sba-jobs-list--compact .sba-job-card{padding:12px}
.sba-jobs-list--compact .sba-job-card .sba-job-card__details{margin-bottom:0;grid-template-columns:1fr}

.sba-proof-preview{
	margin:14px 0;text-align:center;
	background:var(--p-surface-2);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius-sm);
	padding:8px;
}
.sba-proof-preview img{
	max-width:100%;max-height:300px;
	border-radius:8px;display:block;margin:0 auto;
}

.sba-date-range__label{
	font-size:12px;color:var(--p-text-mute);
	display:inline-flex;align-items:center;gap:4px;
	margin-right:4px;
}
.sba-date-range__label .ti{color:var(--p-green-2);font-size:14px}

/* v2.4 — Compact filter row (search + filters in one row) */
.sba-portal__filters--compact{
	display:flex;flex-wrap:wrap;align-items:center;gap:10px;
	margin-bottom:14px;
}
.sba-portal__filters--compact .sba-search{flex:1 1 240px;min-width:200px;max-width:380px}
.sba-portal__filters--compact .sba-filter{
	min-width:140px;max-width:180px;
}
.sba-portal__filters--compact .sba-filter--small{min-width:90px;max-width:110px}
.sba-portal__filters--compact .sba-date-range{
	display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.sba-portal__filters--compact .sba-date-range__label{
	color:var(--p-text-mute);font-size:12px;white-space:nowrap;
}
.sba-portal__filters--compact .sba-date-range input[type="date"]{
	min-width:130px;
}

.sba-search--compact{flex-grow:1}
.sba-search--compact input{padding:8px 12px 8px 36px;font-size:13px}

@media (max-width:920px){
	.sba-portal__filters--compact .sba-search{flex:1 1 100%;max-width:100%}
}

/* v2.4 — Scheduled Bookings parent cards */
.sba-sched-list{display:flex;flex-direction:column;gap:12px}
.sba-sched-card{
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius);
	overflow:hidden;
}
.sba-sched-card__head{
	display:grid;
	grid-template-columns:1fr auto;
	align-items:flex-start;
	gap:14px;
	padding:14px 16px;
	background:var(--p-surface-2);
}
.sba-sched-card__ref{color:var(--p-green-2);font-weight:700;font-size:13px;letter-spacing:.4px}
.sba-sched-card__customer{color:var(--p-text);font-size:14px;font-weight:500;margin-top:2px}
.sba-sched-card__meta{display:flex;align-items:center;gap:10px}
.sba-sched-card__total{color:var(--p-text);font-weight:600}
.sba-sched-card__toggle{white-space:nowrap}

.sba-sched-card__children{
	padding:12px 16px;
	background:rgba(255,255,255,0.02);
	border-top:1px solid var(--p-border);
}
.sba-sched-children__head{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:var(--p-text-mute);
	margin-bottom:10px;
}
.sba-sched-child{
	display:grid;
	grid-template-columns:120px 1fr 1fr auto auto;
	gap:12px;
	align-items:center;
	padding:10px 0;
	border-bottom:1px solid var(--p-border);
}
.sba-sched-child:last-child{border-bottom:none}
.sba-sched-child__ref{color:var(--p-green-2);font-weight:600;font-size:12px}
.sba-sched-child__date,
.sba-sched-child__agent{color:var(--p-text-soft);font-size:13px;display:flex;align-items:center;gap:4px}
.sba-sched-child__date .ti,
.sba-sched-child__agent .ti{color:var(--p-text-mute);font-size:14px}
.sba-sched-child__no-agent{color:var(--p-text-mute);font-style:italic}
.sba-sched-child__actions{display:flex;gap:6px}

@media (max-width:760px){
	.sba-sched-card__head{grid-template-columns:1fr;text-align:left}
	.sba-sched-child{grid-template-columns:1fr;text-align:left}
	.sba-sched-child__actions{justify-content:flex-start}
}

/* v2.4.1 — Flatpickr inside form-field needs relative positioning for static popup */
.sba-form-field{position:relative}
.sba-form-field .flatpickr-calendar.static{
	top:calc(100% + 4px) !important;
	left:0 !important;
	width:100% !important;
	max-width:340px;
}
.flatpickr-calendar.sba-portal-cal{
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:12px;
}

/* v2.5 — Scheduled card improvements (package, visits count, actions row) */
.sba-sched-card__head{
	display:grid;
	grid-template-columns:1fr auto;
	gap:14px;
	align-items:start;
}
.sba-sched-card__main{display:flex;flex-direction:column;gap:4px}
.sba-sched-card__pkg{
	color:var(--p-text-soft);font-size:12px;
	display:inline-flex;align-items:center;gap:4px;margin-top:2px;
}
.sba-sched-card__pkg .ti{color:var(--p-green-2);font-size:13px}
.sba-sched-card__meta{
	display:flex;flex-direction:column;gap:6px;align-items:flex-end;
}
.sba-sched-card__count{
	font-size:11px;color:var(--p-green-2);font-weight:600;
	display:inline-flex;align-items:center;gap:4px;
	background:rgba(52,211,153,.10);padding:3px 9px;border-radius:8px;
}
.sba-sched-card__actions{
	display:flex;gap:6px;
	padding:0 16px 12px;
	flex-wrap:wrap;
}

/* Tab badge sizing */
.sba-tab-badge{
	display:inline-flex;align-items:center;justify-content:center;
	background:#ef4444;color:#fff;font-size:10px;font-weight:700;
	min-width:18px;height:18px;border-radius:9px;padding:0 5px;
	margin-left:4px;line-height:1;
}

@media (max-width:760px){
	.sba-sched-card__head{grid-template-columns:1fr}
	.sba-sched-card__meta{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}

/* v2.6 — Skeleton shimmer loaders (matches design reference) */
.sba-skeleton{
	background:linear-gradient(90deg, var(--p-surface-2) 0%, rgba(255,255,255,0.04) 50%, var(--p-surface-2) 100%);
	background-size:200% 100%;
	border-radius:6px;
	animation:sba-shimmer 1.5s linear infinite;
	display:block;
}
@keyframes sba-shimmer{
	0%   { background-position:200% 0; }
	100% { background-position:-200% 0; }
}
.sba-skeleton--bar{height:12px;width:100%;margin-bottom:8px}
.sba-skeleton--bar-sm{height:10px;width:60%;margin-bottom:6px}
.sba-skeleton--bar-lg{height:18px;width:80%;margin-bottom:10px}
.sba-skeleton--card{
	height:80px;border-radius:var(--p-radius);
	margin-bottom:10px;
}

.sba-skeleton-row{
	display:flex;align-items:center;gap:12px;
	padding:12px 16px;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius);
	margin-bottom:8px;
}
.sba-skeleton-row > div{flex:1}
.sba-skeleton-row > div:first-child{max-width:80px}
.sba-skeleton-row > div:last-child{max-width:90px}


/* v2.8 — Wait hint (shown when parent isn't confirmed yet) */
.sba-sched-child__wait{
	color:var(--p-text-mute);font-size:12px;font-style:italic;
	display:inline-flex;align-items:center;gap:6px;
}
.sba-sched-child__wait .ti{color:#fbbf24}

/* Parent card actions left-aligned */
.sba-sched-card__actions{
	justify-content:flex-start;
}

/* Assigned-to-agents counter in the parent card meta */
.sba-sched-card__assigned-count{
	font-size:11px;font-weight:600;color:#a78bfa;
	display:inline-flex;align-items:center;gap:4px;
	background:rgba(167,139,250,.10);padding:3px 9px;border-radius:8px;
}

/* Date filter horizontal layout (was column) */
.sba-date-range{
	display:flex !important;
	flex-direction:row !important;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}
.sba-date-range__sep{color:var(--p-text-mute);font-weight:700;display:inline-block}
.sba-date-range input[type="date"]{
	width:auto !important;min-width:140px;
}

/* Portal width — reduce slightly with side breathing room; stable scrollbar */
html{ scrollbar-gutter:stable }
.sba-portal{
	max-width:1480px;
	margin:0 auto;
	padding-left:24px;padding-right:24px;
}
@media (max-width:768px){
	.sba-portal{padding-left:14px;padding-right:14px}
}

/* v2.8 — Edit visit modal: flatpickr above modal panel; inputs visible against dark background */
.sba-modal .flatpickr-calendar{ z-index:500 !important; }
.sba-modal .sba-form-field input[type="text"],
.sba-modal .sba-form-field input[type="date"],
.sba-modal .sba-form-field select,
.sba-modal .sba-form-field textarea{
	background:var(--p-surface-2);
	border:1px solid var(--p-border);
	color:var(--p-text);
	border-radius:10px;padding:10px 12px;
	font-size:14px;font-family:inherit;
	width:100%;
}
.sba-modal .sba-form-field input:focus,
.sba-modal .sba-form-field select:focus,
.sba-modal .sba-form-field textarea:focus{
	border-color:var(--p-green-2);outline:none;
	box-shadow:0 0 0 3px rgba(52,211,153,.18);
}

/* Payment status badge on scheduled parent card */
.sba-sched-card__pay{
	font-size:11px;font-weight:600;
	padding:3px 9px;border-radius:8px;
	display:inline-flex;align-items:center;gap:4px;letter-spacing:.3px;
}
.sba-sched-card__pay.is-paid{background:rgba(16,185,129,.18);color:#34D399}
.sba-sched-card__pay.is-failed{background:rgba(239,68,68,.18);color:#FCA5A5}
.sba-sched-card__pay.is-pending{background:rgba(245,158,11,.18);color:#FCD34D}

/* v2.8 — Staff portal width with side padding (agent stays fluid/mobile-first) */
body.sba-portal-body.has-staff-portal .sba-portal__topbar,
body.sba-portal-body.has-staff-portal .sba-portal__tabs,
body.sba-portal-body.has-staff-portal .sba-portal__content,
body.sba-portal-body.has-staff-portal .sba-portal__stats{
	padding-left:24px !important;
	padding-right:24px !important;
}
@media (max-width:768px){
	body.sba-portal-body.has-staff-portal .sba-portal__topbar,
	body.sba-portal-body.has-staff-portal .sba-portal__tabs,
	body.sba-portal-body.has-staff-portal .sba-portal__content,
	body.sba-portal-body.has-staff-portal .sba-portal__stats{
		padding-left:12px !important;
		padding-right:12px !important;
	}
}

/* v2.8 — Date range stays horizontal (left→right), never stacked */
.sba-date-range{flex-wrap:nowrap !important}
.sba-date-range input[type="date"]{min-width:120px;flex-shrink:0}
@media (max-width:640px){
	.sba-date-range{flex-wrap:wrap !important}
}

/* v2.8.1 — Login page polish (rounded, brighter inputs, eye toggle, no default error) */
.sba-login-input{
	width:100%;
	background:var(--p-surface-2) !important;
	border:1px solid var(--p-border) !important;
	color:var(--p-text) !important;
	border-radius:999px !important;
	padding:13px 18px !important;
	font-size:14px;
	transition:border-color .15s, box-shadow .15s;
}
.sba-login-input:focus{
	outline:none;
	border-color:var(--p-green-2) !important;
	box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.sba-login-pw-wrap{position:relative}
.sba-login-pw-wrap .sba-login-input{padding-right:48px !important}
.sba-login-pw-toggle{
	position:absolute;right:6px;top:50%;
	transform:translateY(-50%);
	background:transparent;border:none;cursor:pointer;
	width:36px;height:36px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--p-text-mute);
	transition:.15s;
}
.sba-login-pw-toggle:hover{color:var(--p-green-2);background:var(--p-surface-3)}
.sba-login-pw-toggle .ti{font-size:18px}

/* Login Sign-in button rounded */
.sba-login-submit{
	border-radius:999px !important;
	padding:14px 24px !important;
	font-weight:600;
	width:100%;
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
}

/* Hide the empty inline-err box by default (don't show empty red bar) */
.sba-login-card .sba-inline-err:empty{display:none}
.sba-login-card .sba-inline-err{
	background:rgba(239,68,68,.10);
	border:1px solid rgba(239,68,68,.25);
	color:#FCA5A5;
	padding:10px 14px;border-radius:10px;
	font-size:13px;text-align:left;
	margin-bottom:14px;
	display:flex;align-items:center;gap:8px;
}
.sba-login-card .sba-inline-err::before{
	content:"⚠";font-size:14px;
}

/* v2.8.1 — Agent online switch (true toggle style) */
.sba-portal__online-toggle{
	background:transparent;
	border:none;
	padding:6px 14px 6px 8px;
	cursor:pointer;
	display:inline-flex;align-items:center;gap:10px;
	font-size:13px;font-weight:600;
	color:var(--p-text-soft);
}
.sba-online-switch{
	display:inline-flex;align-items:center;
}
.sba-online-switch__track{
	position:relative;
	width:44px;height:24px;
	background:var(--p-surface-3);
	border-radius:999px;
	transition:background .2s;
	display:inline-block;
}
.sba-online-switch__thumb{
	position:absolute;
	top:3px;left:3px;
	width:18px;height:18px;
	background:#fff;
	border-radius:50%;
	transition:transform .2s, background .2s;
	box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.sba-portal__online-toggle.is-online .sba-online-switch__track{
	background:var(--p-green);
}
.sba-portal__online-toggle.is-online .sba-online-switch__thumb{
	transform:translateX(20px);
}
.sba-portal__online-toggle.is-online .lbl{
	color:var(--p-green-2);
}

/* v2.8.1 — Lock scroll when any modal is open in portals */
body.sba-portal-body.has-modal-open{overflow:hidden}

/* v2.8.2 — Bookings card layout (replaces orders table) */
.sba-bookings-cards{
	display:flex;flex-direction:column;gap:12px;
	padding:18px 22px 22px;
}
.sba-booking-card{
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius);
	overflow:hidden;
	transition:border-color .15s;
}
.sba-booking-card:hover{border-color:var(--p-border-soft, var(--p-border))}
.sba-booking-card.is-rejected{border-color:rgba(239,68,68,.35)}
.sba-booking-card.is-offline{border-color:rgba(245,158,11,.35)}
.sba-booking-card--skeleton{pointer-events:none;opacity:.85}

.sba-booking-card__head{
	display:grid;
	grid-template-columns:1fr auto;
	gap:14px;
	padding:14px 16px;
	background:var(--p-surface-2);
	border-bottom:1px solid var(--p-border);
	align-items:flex-start;
}
.sba-booking-card__main{display:flex;flex-direction:column;gap:4px}
.sba-booking-card__ref{
	color:var(--p-green-2);font-weight:700;font-size:13px;letter-spacing:.4px;
	display:inline-block;
}
.sba-booking-card__customer{
	color:var(--p-text);font-size:14px;
}
.sba-booking-card__customer strong{font-weight:600}
.sba-booking-card__pkg{
	color:var(--p-text-soft);font-size:12px;
	display:inline-flex;align-items:center;gap:4px;margin-top:2px;
}
.sba-booking-card__pkg .ti{color:var(--p-green-2);font-size:13px}

.sba-booking-card__meta{
	display:flex;flex-direction:column;gap:6px;align-items:flex-end;
	font-size:12px;
}
.sba-booking-card__total{
	color:var(--p-text);font-weight:600;font-size:14px;
}
.sba-booking-card__when{
	color:var(--p-text-soft);font-size:12px;
	display:inline-flex;align-items:center;gap:4px;
}
.sba-booking-card__when .ti{color:var(--p-green-2);font-size:13px}
.sba-booking-card__agent{
	color:var(--p-text-soft);font-size:12px;
	display:inline-flex;align-items:center;gap:4px;
}
.sba-booking-card__agent .ti{color:var(--p-text-mute);font-size:13px}
.sba-booking-card__no-agent{color:var(--p-text-mute);font-style:italic}
.sba-booking-card__onlinedot{
	color:#34D399;font-weight:600;font-size:11px;
}
.sba-booking-card__offlinedot{
	color:#FCA5A5;font-weight:600;font-size:11px;
}

.sba-booking-card__actions{
	display:flex;gap:6px;padding:10px 16px;
	flex-wrap:wrap;justify-content:flex-end;
}

@media (max-width:760px){
	.sba-booking-card__head{grid-template-columns:1fr}
	.sba-booking-card__meta{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:8px}
}

/* Per-visit completion badge on parent (e.g. "2/3 visits completed") */
.sba-sched-card__progress{
	font-size:11px;font-weight:600;color:var(--p-green-2);
	display:inline-flex;align-items:center;gap:4px;
	background:rgba(52,211,153,.10);padding:3px 9px;border-radius:8px;
}

/* "Customer modified" badge — shown when staff edited date/time of a customer's visit */
.sba-ww-modified-tag{
	display:inline-flex;align-items:center;gap:4px;
	font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
	color:#f59e0b;background:rgba(245,158,11,.14);
	padding:4px 10px;border-radius:999px;margin-left:8px;
	vertical-align:middle;line-height:1;
}
.sba-ww-modified-tag .ti{font-size:11px}

/* v2.8.3 — Date range filter compact + mobile-safe flatpickr */

/* Smaller "Pick a date" inputs (was too wide, especially on mobile) */
.sba-date-range input[type="text"],
.sba-date-range input[type="date"]{
	width:130px;
	min-width:0;
	font-size:13px;
	padding:8px 10px;
}
@media (max-width:600px){
	.sba-date-range input[type="text"],
	.sba-date-range input[type="date"]{
		width:120px;
		font-size:12px;
		padding:7px 8px;
	}
	.sba-date-range{flex-wrap:wrap}
	.sba-date-range__label{font-size:11px}
	.sba-date-range__sep{display:none}
}

/* Flatpickr: prevent overflow on small screens by re-anchoring + scaling down */
@media (max-width:600px){
	body.sba-portal-body .flatpickr-calendar.open{
		position:fixed !important;
		left:50% !important;
		top:50% !important;
		transform:translate(-50%, -50%) !important;
		max-width:calc(100vw - 24px) !important;
		width:300px !important;
	}
	body.sba-portal-body .flatpickr-calendar.open::before,
	body.sba-portal-body .flatpickr-calendar.open::after{
		display:none !important;
	}
	body.sba-portal-body .flatpickr-calendar.open .flatpickr-days{width:100% !important}
	body.sba-portal-body .flatpickr-calendar.open .dayContainer{width:100% !important;min-width:0 !important;max-width:none !important}
	body.sba-portal-body .flatpickr-calendar.open .flatpickr-day{max-width:14.28% !important;height:36px !important;line-height:36px !important}
	/* Add a backdrop behind the centered calendar to dim the page */
	body.sba-portal-body .flatpickr-calendar.open{
		box-shadow:0 0 0 100vmax rgba(0,0,0,.6), 0 8px 32px rgba(0,0,0,.5) !important;
	}
}

/* v2.8.4 — Card-style expanded detail panel (replaces row-based detail) */
.sba-booking-card__detail{
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-top:none;
	border-radius:0 0 var(--p-radius) var(--p-radius);
	margin-top:-12px;  /* hug the card above it */
	margin-bottom:12px;
	padding:0 16px 16px;
	animation:sba-detail-in .18s ease-out;
}
@keyframes sba-detail-in{
	from{opacity:0;transform:translateY(-4px)}
	to{opacity:1;transform:translateY(0)}
}
.sba-booking-card.is-expanded{
	border-bottom-left-radius:0 !important;
	border-bottom-right-radius:0 !important;
}
.sba-booking-card__detail .sba-row-detail{padding-top:12px}

/* v2.8.5 — Combined activity log modal (scheduled parent + children timeline) */
.sba-combined-log{
	display:flex;flex-direction:column;gap:14px;
	max-height:65vh;overflow:auto;padding:4px 2px;
}
.sba-combined-log__row{
	display:flex;gap:12px;
	padding-bottom:14px;border-bottom:1px solid var(--p-border);
}
.sba-combined-log__row:last-child{border-bottom:none}
.sba-combined-log__dot{
	width:10px;height:10px;border-radius:50%;
	background:var(--p-green);flex:0 0 10px;margin-top:6px;
	box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.sba-combined-log__body{flex:1;min-width:0}
.sba-combined-log__top{
	display:flex;align-items:center;gap:8px;
	font-size:12px;margin-bottom:4px;flex-wrap:wrap;
}
.sba-combined-log__chip{
	display:inline-flex;align-items:center;gap:4px;
	padding:3px 8px;border-radius:8px;
	font-size:11px;font-weight:600;letter-spacing:.3px;
}
.sba-combined-log__chip--parent{
	background:rgba(99,102,241,.15);color:#a5b4fc;
}
.sba-combined-log__chip--visit{
	background:rgba(52,211,153,.15);color:#6ee7b7;
}
.sba-combined-log__ref{
	color:var(--p-green-2);font-weight:600;font-size:11px;letter-spacing:.3px;
}
.sba-combined-log__actor{
	color:var(--p-text-mute);font-size:11px;
}
.sba-combined-log__actor::before{content:"by ";opacity:.7}
.sba-combined-log__action{
	color:var(--p-text);font-size:14px;font-weight:500;margin-bottom:3px;
}
.sba-combined-log__when{
	color:var(--p-text-mute);font-size:12px;
}

/* v2.8.5 — Agents tab split view: bookings (left) + agents list (right) */
.sba-agents-split{
	display:grid;
	grid-template-columns:1fr 320px;
	gap:18px;
	padding:18px 22px 22px;
	align-items:flex-start;
}
@media (max-width:900px){
	.sba-agents-split{grid-template-columns:1fr;gap:14px}
	.sba-agents-split__right{order:-1}
}
.sba-agents-split__left,
.sba-agents-split__right{
	background:transparent;
	min-width:0;
}
.sba-agents-split__left .sba-portal__filters{padding:0 0 14px}
.sba-agents-split__left .sba-bookings-cards{padding:0}
.sba-agents-split__search{margin-bottom:12px}
.sba-agents-list{
	display:flex;flex-direction:column;gap:8px;
	max-height:70vh;overflow:auto;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius);
	padding:8px;
}
.sba-agents-list .sba-empty{padding:24px 12px;text-align:center}
.sba-agent-card{
	display:flex;align-items:flex-start;gap:10px;
	padding:10px 12px;border-radius:10px;
	background:var(--p-surface-2);
	border:1px solid transparent;
	cursor:pointer;
	transition:background .15s, border-color .15s;
}
.sba-agent-card:hover{background:var(--p-surface-3);border-color:var(--p-border)}
.sba-agent-card.is-selected{
	background:rgba(52,211,153,.10);
	border-color:var(--p-green-2);
}
.sba-agent-card.is-selected .sba-agent-card__name{color:var(--p-green-2)}
.sba-agent-card__avatar{
	width:36px;height:36px;border-radius:50%;
	background:var(--p-green);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:14px;flex:0 0 36px;
	position:relative;
}
.sba-agent-card.is-online .sba-agent-card__avatar::after{
	content:'';position:absolute;
	right:-1px;bottom:-1px;
	width:11px;height:11px;border-radius:50%;
	background:#10b981;border:2px solid var(--p-surface);
}
.sba-agent-card.is-offline .sba-agent-card__avatar::after{
	content:'';position:absolute;
	right:-1px;bottom:-1px;
	width:11px;height:11px;border-radius:50%;
	background:#6b7280;border:2px solid var(--p-surface);
}
.sba-agent-card__body{flex:1;min-width:0}
.sba-agent-card__name{
	font-size:14px;font-weight:600;color:var(--p-text);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sba-agent-card__meta{
	font-size:11px;color:var(--p-text-mute);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;
}
.sba-agent-card__online{
	font-size:11px;font-weight:600;margin-top:4px;
}
.sba-agent-card.is-online .sba-agent-card__online{color:#34D399}
.sba-agent-card.is-offline .sba-agent-card__online{color:#9ca3af}

/* v2.8.5 — Orders-style detail view (replaces old row-detail) */
.sba-order-detail{
	padding:0;
	background:transparent;
	border:none;
	margin-top:0;
	margin-bottom:18px;
}
.sba-order-detail__head{
	padding:18px 20px 14px;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius) var(--p-radius) 0 0;
	display:flex;flex-direction:column;gap:4px;
	position:relative;
}
.sba-order-detail__head-actions{
	position:absolute;top:18px;right:20px;
}
.sba-order-detail__title{
	font-size:18px;
	color:var(--p-text);
	display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.sba-order-detail__title strong{font-weight:700}
.sba-order-detail__crumb{
	color:var(--p-text-mute);font-size:14px;font-weight:500;
}
.sba-order-detail__pill{
	font-size:11px;padding:3px 10px;
}
.sba-order-detail__sub{
	color:var(--p-text-mute);
	font-size:13px;
}
.sba-order-detail__grid{
	display:grid;
	grid-template-columns:1fr 320px;
	gap:18px;
	padding:18px 20px;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-top:none;
	border-radius:0 0 var(--p-radius) var(--p-radius);
}
@media (max-width:960px){
	.sba-order-detail__grid{grid-template-columns:1fr}
}
.sba-order-detail__main,
.sba-order-detail__side{display:flex;flex-direction:column;gap:14px}

.sba-order-block{
	background:var(--p-surface-2);
	border:1px solid var(--p-border);
	border-radius:10px;
	padding:14px 16px;
}
.sba-order-block__head{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin-bottom:12px;
	color:var(--p-text);font-size:14px;
}
.sba-order-block__head strong{font-weight:700;font-size:14px}
.sba-order-block__hint{
	color:#34D399;font-size:11px;font-weight:700;letter-spacing:.5px;
}
.sba-order-block__body{color:var(--p-text);font-size:14px;line-height:1.6}

/* Order item row */
.sba-order-item{
	display:grid;
	grid-template-columns:48px 1fr auto auto;
	gap:14px;align-items:center;
	padding:10px 0 0;
	border-top:1px solid var(--p-border);
}
.sba-order-item__thumb{
	width:48px;height:48px;border-radius:8px;
	background:var(--p-surface-3);color:var(--p-text-mute);
	display:flex;align-items:center;justify-content:center;
	font-size:20px;
}
.sba-order-item__title{font-weight:600;color:var(--p-text);font-size:14px}
.sba-order-item__sub{color:var(--p-text-mute);font-size:12px;margin-top:2px}
.sba-order-item__price{color:var(--p-text-mute);font-size:13px}
.sba-order-item__total{color:var(--p-text);font-weight:600;font-size:14px}

/* Payment summary table */
.sba-order-table{
	display:flex;flex-direction:column;gap:8px;
	padding-top:8px;border-top:1px solid var(--p-border);
}
.sba-order-table__row{
	display:grid;
	grid-template-columns:1fr auto auto;
	gap:14px;align-items:baseline;
	font-size:14px;color:var(--p-text);
	padding:2px 0;
}
.sba-order-table__row .sba-muted{color:var(--p-text-mute)}
.sba-order-table__row span:last-child{text-align:right;min-width:90px}
.sba-order-table__row--strong{
	font-weight:600;
	padding-top:10px;
	border-top:1px solid var(--p-border);
	margin-top:4px;
}

/* Payment status pill */
.sba-pay-pill{
	font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
	padding:3px 10px;border-radius:6px;
}
.sba-pay-pill.is-paid{background:rgba(16,185,129,.18);color:#34D399}
.sba-pay-pill.is-pending{background:rgba(245,158,11,.18);color:#FCD34D}
.sba-pay-pill.is-failed{background:rgba(239,68,68,.18);color:#FCA5A5}

/* Scheduled date/time block (highlighted box) */
.sba-order-block--sched{
	background:rgba(52,211,153,.08);
	border-color:rgba(52,211,153,.30);
}
.sba-sched-display{
	display:flex;flex-direction:column;align-items:center;gap:12px;
	padding:18px 8px;
}
.sba-sched-display__check{
	width:44px;height:44px;border-radius:50%;
	background:var(--p-surface-3);color:var(--p-text-mute);
	display:flex;align-items:center;justify-content:center;font-size:22px;
}
.sba-sched-display__check.is-done{
	background:#10b981;color:#fff;
}
.sba-sched-display__when{
	font-size:16px;font-weight:600;color:var(--p-green-2);
}

/* Activity timeline inside the order detail */
.sba-order-activity{padding:0}
.sba-order-activity .sba-tl-item{
	display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--p-border);
}
.sba-order-activity .sba-tl-item:last-child{border-bottom:none}
.sba-order-activity .sba-tl-dot{
	width:10px;height:10px;border-radius:50%;
	background:var(--p-green);flex:0 0 10px;margin-top:6px;
	box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.sba-order-activity .sba-tl-content{flex:1}

/* Right sidebar */
.sba-order-side-block{
	background:var(--p-surface-2);
	border:1px solid var(--p-border);
	border-radius:10px;
	padding:14px 16px;
}
.sba-order-side-block__head{
	margin-bottom:10px;color:var(--p-text);font-size:14px;
	display:flex;align-items:center;justify-content:space-between;
}
.sba-order-side-block__body{color:var(--p-text);font-size:13px}

.sba-customer-info{
	display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;
}
.sba-customer-info__avatar{
	width:42px;height:42px;border-radius:50%;
	background:var(--p-green);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:16px;flex:0 0 42px;
}
.sba-customer-info__name{
	font-weight:600;color:var(--p-text);font-size:14px;
}
.sba-customer-info__sub{
	color:var(--p-text-mute);font-size:11px;margin-top:1px;
}
.sba-customer-info__row{
	display:flex;align-items:center;gap:6px;
	color:var(--p-text-soft);font-size:13px;
	padding:5px 0;
}
.sba-customer-info__row .ti{color:var(--p-green-2);font-size:14px}
.sba-customer-info__section{
	padding-top:12px;margin-top:4px;border-top:1px solid var(--p-border);
	margin-bottom:6px;font-size:13px;color:var(--p-text);
}
.sba-customer-info__addr{
	color:var(--p-text-soft);font-size:13px;line-height:1.5;
}

/* Smaller status pill variant for inside cards */
.sba-status-pill--sm{font-size:10px;padding:2px 8px}

/* v2.8.7 — Action buttons inline in the meta column (bottom right-aligned) */
.sba-booking-card__actions--meta{
	margin-top:6px;
	display:flex;gap:6px;flex-wrap:wrap;
	justify-content:flex-end;
	padding:0;
}

/* Scheduled visits list inside the parent detail view */
.sba-sched-visits{
	display:flex;flex-direction:column;gap:8px;
}
.sba-sched-visit{
	display:grid;
	grid-template-columns:auto 1fr auto auto auto;
	gap:12px;align-items:center;
	padding:10px 12px;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:8px;
	font-size:13px;
}
.sba-sched-visit__idx{
	font-weight:700;color:var(--p-green-2);font-size:12px;
	background:rgba(52,211,153,.10);
	padding:3px 10px;border-radius:6px;
	letter-spacing:.3px;
}
.sba-sched-visit__when{
	color:var(--p-text);font-size:13px;
	display:inline-flex;align-items:center;gap:4px;
	min-width:0;
}
.sba-sched-visit__when .ti{color:var(--p-green-2);font-size:14px}
.sba-sched-visit__agent{
	font-size:12px;color:var(--p-text-soft);
	display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.sba-sched-visit__agent .ti{color:var(--p-text-mute);font-size:13px}
.sba-sched-visit__no-agent{color:var(--p-text-mute);font-style:italic}
.sba-sched-visit__actions{
	display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;
}

@media (max-width:760px){
	.sba-sched-visit{
		grid-template-columns:1fr;
		gap:8px;
	}
	.sba-sched-visit__actions{justify-content:flex-start}
}

/* v2.8.8 — Smaller date filter inputs in agent portal */
body.sba-portal-body.has-agent-portal .sba-date-range input[type="text"],
body.sba-portal-body.has-agent-portal .sba-date-range input[type="date"]{
	width:110px;
	min-width:0;
	font-size:12px;
	padding:6px 8px;
}

/* v2.8.8 — Actor role badge styling removed (plain inline text now: "Name · Role") */

/* v2.8.9 — Cap the inline scheduled-detail Activity height (long logs were eating the screen) */
.sba-order-activity{
	max-height:320px;
	overflow-y:auto;
	padding-right:6px;
}
.sba-order-activity::-webkit-scrollbar{width:8px}
.sba-order-activity::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:4px}
.sba-order-activity::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}

/* v2.8.9 — Proof of completion rows inside scheduled detail */
.sba-sched-proofs{
	display:flex;flex-direction:column;gap:14px;
}
.sba-sched-proof-row{
	display:flex;align-items:flex-start;gap:14px;
}
.sba-sched-proof-row__label{
	flex:0 0 80px;
	font-weight:700;color:var(--p-green-2);font-size:12px;
	background:rgba(52,211,153,.10);
	padding:6px 12px;border-radius:6px;
	letter-spacing:.3px;text-align:center;
}
.sba-sched-proof-row__thumb{
	display:inline-block;flex:0 0 auto;
	border-radius:10px;overflow:hidden;
	cursor:zoom-in;
	border:1px solid var(--p-border);
	transition:border-color .15s, transform .15s;
}
.sba-sched-proof-row__thumb:hover{
	border-color:var(--p-green-2);
	transform:scale(1.01);
}
.sba-sched-proof-row__thumb img{
	display:block;
	max-width:260px;max-height:240px;
	width:auto;height:auto;
}

/* v2.8.9 — Inline online/offline label next to assigned agent in scheduled visit rows */
.sba-booking-card__onlinedot{
	color:#34D399;font-size:11px;font-weight:600;letter-spacing:.3px;
}
.sba-booking-card__onlinedot::before{content:"● ";font-size:10px}
.sba-booking-card__offlinedot{
	color:#9ca3af;font-size:11px;font-weight:600;letter-spacing:.3px;
}
.sba-booking-card__offlinedot::before{content:"○ ";font-size:10px}

/* v2.8.10 — Visit number pill for child sub-bookings in the main Bookings list */
.sba-visit-num-pill{
	display:inline-block;
	background:rgba(52,211,153,.14);
	color:#34D399;
	font-size:11px;font-weight:700;letter-spacing:.3px;
	padding:3px 9px;border-radius:6px;
	margin-left:6px;
}

/* v2.8.10 — Agent user dropdown menu + notification settings panel */
.sba-portal__user-wrap{position:relative}
.sba-portal__avatar-btn{
	background:var(--p-green);color:#fff;
	border:none;cursor:pointer;
	width:36px;height:36px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	font-weight:700;font-size:14px;
	transition:transform .12s;
}
.sba-portal__avatar-btn:hover{transform:scale(1.05)}
.sba-portal__avatar-btn[aria-expanded="true"]{
	box-shadow:0 0 0 3px rgba(52,211,153,.30);
}

.sba-portal__usermenu{
	position:absolute;top:calc(100% + 10px);right:0;
	min-width:240px;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:12px;
	box-shadow:0 14px 30px rgba(0,0,0,.45);
	padding:10px;z-index:1200;
}
.sba-portal__usermenu-header{
	padding:8px 10px 10px;
	border-bottom:1px solid var(--p-border);
	margin-bottom:8px;
}
.sba-portal__usermenu-name{
	color:var(--p-text);font-weight:600;font-size:14px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sba-portal__usermenu-email{
	color:var(--p-text-mute);font-size:11px;margin-top:2px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sba-portal__usermenu-item{
	display:flex;align-items:center;gap:10px;
	width:100%;
	background:transparent;border:none;
	padding:10px 12px;border-radius:8px;
	color:var(--p-text);font-size:13px;cursor:pointer;
	text-align:left;
	transition:background .12s;
}
.sba-portal__usermenu-item:hover{background:var(--p-surface-2)}
.sba-portal__usermenu-item .ti{color:var(--p-green-2);font-size:16px}

.sba-notif-settings{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.sba-notif-settings__row{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	background:var(--p-surface-2);
	border:1px solid var(--p-border);
	padding:14px 16px;border-radius:10px;
}
.sba-notif-settings__row > div:first-child{min-width:0}
.sba-notif-settings__row strong{color:var(--p-text);font-size:14px;display:block}
.sba-notif-settings__hint{color:var(--p-text-mute);font-size:12px;margin-top:4px}

.sba-pw-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.sba-pw-form .sba-form-row label{
	display:block;color:var(--p-text);font-size:12px;font-weight:600;
	margin-bottom:6px;
}
.sba-pw-form .sba-form-row input{
	width:100%;
	background:var(--p-surface-2);
	border:1px solid var(--p-border);
	color:var(--p-text);
	border-radius:8px;
	padding:10px 14px;
	font-size:14px;
	box-sizing:border-box;
}
.sba-pw-form .sba-form-row input:focus{
	outline:none;
	border-color:var(--p-green-2);
	box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.sba-pw-form .sba-form-actions{
	display:flex;justify-content:flex-end;gap:8px;
	padding-top:6px;
}

/* ============================================================
   v2.8.13 — LOGIN PLACEHOLDER COLOR (fresh isolated rule)
   Uses unique class `sba-ww-loginput` so nothing else can match
   this selector. Triple-scoped with `sba-login-page` + `sba-login-card`
   for guaranteed specificity win. Placed at the very end of the
   stylesheet so it also wins any cascade ties.
   ============================================================ */
.sba-login-page .sba-login-card input.sba-ww-loginput::placeholder,
.sba-login-page .sba-login-card input.sba-ww-loginput::-webkit-input-placeholder,
.sba-login-page .sba-login-card input.sba-ww-loginput::-moz-placeholder,
.sba-login-page .sba-login-card input.sba-ww-loginput:-ms-input-placeholder,
.sba-login-page .sba-login-card input.sba-ww-loginput::-ms-input-placeholder{
	color:#f9fafe !important;
	-webkit-text-fill-color:#f9fafe !important;
	opacity:1 !important;
	font-weight:400 !important;
}
/* Defend against autofill turning the typed text dark */
.sba-login-page .sba-login-card input.sba-ww-loginput:-webkit-autofill,
.sba-login-page .sba-login-card input.sba-ww-loginput:-webkit-autofill:hover,
.sba-login-page .sba-login-card input.sba-ww-loginput:-webkit-autofill:focus{
	-webkit-text-fill-color:#f9fafe !important;
	caret-color:#f9fafe;
	transition:background-color 9999s ease-out 0s;
}

/* v2.9.2 — Show booking ref under each visit's "Visit N" label */
.sba-sched-visit__ref{
	font-size:10px;
	color:var(--p-text-mute);
	font-weight:600;
	letter-spacing:.3px;
	margin-top:2px;
	text-transform:none;
}

/* v2.9.4 — Cash submitted indicator on agent past job cards */
.sba-cash-submitted-pill{
	display:inline-flex;align-items:center;gap:4px;
	background:rgba(52,211,153,.16);
	color:#34D399;
	font-size:10px;font-weight:700;letter-spacing:.3px;
	padding:2px 7px;border-radius:6px;
	margin-left:6px;
	white-space:nowrap;
}
.sba-cash-submitted-pill .ti{font-size:11px}

/* v2.9.4 — Pager for agent Past tab */
.sba-past-pager{
	display:flex;align-items:center;justify-content:center;gap:14px;
	padding:14px 0 6px;
}
.sba-past-pager__info{
	color:var(--p-text-mute);font-size:13px;font-variant-numeric:tabular-nums;
}

/* ===== v2.9.15 — Coupon tag on staff/agent cards ===== */
.sba-booking-card__coupon{display:inline-flex;align-items:center;gap:4px;background:#e8f5ef;color:#076951;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}

/* ===== v2.9.21 — Staff portal Chat tab ===== */
.sba-chat-layout{display:grid;grid-template-columns:280px 1fr 260px;height:calc(100vh - 280px);min-height:500px;gap:12px;margin-top:14px}
.sba-chat-layout.no-side{grid-template-columns:280px 1fr}
.sba-chat-sessions{background:#fff;border:1px solid var(--ww-border, #c5dfd8);border-radius:10px;overflow-y:auto}
.sba-chat-session{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-bottom:1px solid #eef5f2;cursor:pointer;transition:background .15s;position:relative}
.sba-chat-session:hover{background:#f7faf8}
.sba-chat-session.is-active{background:#eef5f2;border-left:3px solid #076951;padding-left:9px}
.sba-chat-session__row{display:flex;align-items:center;gap:6px}
.sba-chat-session__name{font-weight:600;font-size:13px;color:#0a1f18;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sba-chat-session__time{font-size:10px;color:#88a99d}
.sba-chat-session__meta{font-size:11px;color:#5a8a78;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sba-chat-session__cat{background:#fff5d9;color:#8a5a00;padding:1px 6px;border-radius:8px;font-size:10px}
.sba-chat-session__queue{background:#fef3c7;color:#92400e;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:600}
.sba-chat-session__guest{background:#e6e6e6;color:#555;padding:1px 6px;border-radius:8px;font-size:10px}
.sba-chat-session__unread{position:absolute;top:10px;right:12px;background:#e54d4d;color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;min-width:18px;text-align:center}

.sba-chat-thread{background:#fff;border:1px solid var(--ww-border, #c5dfd8);border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.sba-chat-thread__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#88a99d;text-align:center;padding:30px}
.sba-chat-thread__empty i{font-size:48px;margin-bottom:10px;opacity:.4}
.sba-chat-thread__head{padding:10px 14px;border-bottom:1px solid #eef5f2;display:flex;justify-content:space-between;align-items:center;background:#fafdfc}
.sba-chat-thread__head h4{margin:0;font-size:14px;color:#0a1f18}
.sba-chat-thread__head small{color:#5a8a78;font-size:11px}
.sba-chat-thread__head__btns{display:flex;gap:6px}
.sba-chat-thread__head button{background:#fff;border:1px solid #c5dfd8;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;color:#3a5a4d}
.sba-chat-thread__head button:hover{background:#eef5f2}
.sba-chat-thread__head button.close-btn{color:#a52121;border-color:#f0c5c5}
.sba-chat-thread__body{flex:1;overflow-y:auto;padding:14px;background:#f7faf8;display:flex;flex-direction:column;gap:6px}
.sba-chat-thread__foot{border-top:1px solid #eef5f2;background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.sba-chat-thread__foot__row{display:flex;align-items:flex-end;gap:6px}
.sba-chat-thread__foot textarea{flex:1;border:1px solid #c5dfd8;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;resize:none;min-height:36px;max-height:120px;outline:none}
.sba-chat-thread__foot textarea:focus{border-color:#076951}
.sba-chat-thread__foot__btn{background:#076951;color:#fff;border:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
.sba-chat-thread__foot__btn.attach{background:#fff;color:#076951;border:1px solid #c5dfd8}
.sba-chat-thread__foot__reply{background:#eef5f2;border-radius:6px;padding:5px 8px;font-size:11px;color:#3a5a4d;display:flex;justify-content:space-between;align-items:center}
.sba-chat-thread__foot__reply button{background:none;border:0;color:#a52121;cursor:pointer;font-size:14px;padding:0 0 0 6px}

/* Reuse customer-side message styles in the staff thread body */
.sba-chat-thread__body .sba-chat-msg{max-width:80%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;word-wrap:break-word}
.sba-chat-thread__body .sba-chat-msg.mine{align-self:flex-end;background:#076951;color:#fff;border-bottom-right-radius:3px}
.sba-chat-thread__body .sba-chat-msg.theirs{align-self:flex-start;background:#fff;color:#0a1f18;border:1px solid #dceae5;border-bottom-left-radius:3px}
.sba-chat-thread__body .sba-chat-msg.theirs .sba-chat-msg__sender{color:#3a5a4d}
.sba-chat-thread__body .sba-chat-msg.system{align-self:center;background:transparent;color:#9fb8af;font-size:11px;text-align:center;font-style:italic;max-width:100%}
.sba-chat-thread__body .sba-chat-msg.auto{align-self:flex-start;background:#fff5d9;color:#5a4500;border:1px solid #efdba0;border-bottom-left-radius:3px;font-size:12px}
.sba-chat-thread__body .sba-chat-msg__time{display:flex;align-items:center;gap:4px;font-size:10px;color:#88a99d;margin-top:2px}
.sba-chat-thread__body .sba-chat-msg.mine .sba-chat-msg__time{color:rgba(255,255,255,.7);justify-content:flex-end}
.sba-chat-thread__body .sba-chat-msg__reply{background:rgba(0,0,0,.05);padding:4px 8px;border-radius:6px;font-size:11px;margin-bottom:4px;border-left:3px solid #076951;opacity:.85}
.sba-chat-thread__body .sba-chat-msg__sender{font-size:10px;font-weight:600;opacity:.7;margin-bottom:2px}
.sba-chat-thread__body .sba-chat-msg__img{display:block;max-width:200px;max-height:200px;border-radius:8px;margin-top:4px;cursor:pointer}
.sba-chat-thread__body .sba-chat-msg__ticks{display:inline-flex;align-items:center;font-size:11px}
.sba-chat-thread__body .sba-chat-msg__ticks.read{color:#7fceff}
.sba-chat-thread__body .sba-chat-typing{align-self:flex-start;color:#88a99d;font-size:11px;font-style:italic;padding:4px 12px}
.sba-chat-thread__body .sba-chat-typing::after{content:'...';display:inline-block}

/* Side panel */
.sba-chat-side{background:#fff;border:1px solid var(--ww-border, #c5dfd8);border-radius:10px;padding:14px;overflow-y:auto}
.sba-chat-side h4{margin:0 0 12px;font-size:13px;color:#076951;text-transform:uppercase;letter-spacing:.04em}
.sba-chat-side__row{margin-bottom:10px}
.sba-chat-side__row label{font-size:11px;color:#88a99d;text-transform:uppercase;letter-spacing:.04em}
.sba-chat-side__row .val{font-size:13px;color:#0a1f18;font-weight:500}
.sba-chat-side__bookings{margin-top:14px}
.sba-chat-side__bk{background:#eef5f2;padding:6px 10px;border-radius:6px;font-size:12px;margin-bottom:4px;display:flex;justify-content:space-between}
.sba-chat-side__bk code{font-size:11px;color:#076951}
.sba-chat-side__history-btn{margin-top:12px;width:100%;background:#fff;border:1px solid #c5dfd8;padding:8px;border-radius:6px;cursor:pointer;font-size:12px;color:#3a5a4d}
.sba-chat-side__history-btn:hover{background:#eef5f2}
.sba-chat-side__history{margin-top:8px;max-height:300px;overflow-y:auto;font-size:11px}
.sba-chat-side__history-item{background:#fafdfc;border:1px solid #eef5f2;border-radius:6px;padding:8px;margin-bottom:6px}
.sba-chat-side__history-item .date{color:#5a8a78;font-size:10px;margin-bottom:4px}
.sba-chat-side__history-item .msg{color:#3a5a4d;font-size:11px;margin-bottom:2px}

@media (max-width:1100px){
	.sba-chat-layout{grid-template-columns:240px 1fr}
	.sba-chat-side{display:none}
}
@media (max-width:768px){
	.sba-chat-layout{grid-template-columns:1fr;height:auto}
	.sba-chat-sessions{max-height:200px}
	.sba-chat-thread{min-height:400px}
}

/* Agent portal: inline chat trigger inside user menu */
.sba-agent-chat-trigger{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-size:13px;color:#3a5a4d;border-top:1px solid #eef5f2}
.sba-agent-chat-trigger:hover{background:#eef5f2}

/* Agent portal: header Chat button */
.sba-portal__chatbtn{position:relative;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--p-green,#076951),var(--p-green-3,#0d8a64));color:#fff;border:0;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;margin-right:10px}
.sba-portal__chatbtn:hover{filter:brightness(1.08)}
.sba-portal__chatbtn-badge{background:#e54d4d;color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;min-width:18px;text-align:center}
.sba-portal__chatbtn-badge[hidden]{display:none}

/* Agent portal: full-screen side chat panel */
.sba-agent-chat-panel{position:fixed;inset:0;z-index:100000}
.sba-agent-chat-panel[hidden]{display:none}
.sba-agent-chat-panel__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sba-agent-chat-panel__inner{position:absolute;top:0;right:0;height:100%;width:420px;max-width:100vw;background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.3);animation:sbaAgentChatIn .2s ease}
@keyframes sbaAgentChatIn{from{transform:translateX(40px);opacity:.4}to{transform:translateX(0);opacity:1}}
.sba-agent-chat-panel .sba-chat-thread__head{background:linear-gradient(135deg,#076951,#0d8a64);color:#fff}
.sba-agent-chat-panel .sba-chat-thread__head h4{color:#fff;margin:0;font-size:15px}
.sba-agent-chat-panel .sba-chat-thread__head small{color:rgba(255,255,255,.85)}
.sba-agent-chat-panel .sba-chat-thread__head button{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:4px}
.sba-agent-chat-panel .sba-chat-thread__head button:hover{background:rgba(255,255,255,.3)}
.sba-agent-chat-panel .sba-chat-thread__body{flex:1;overflow-y:auto;padding:16px;background:#f7faf8;display:flex;flex-direction:column;gap:6px}
.sba-agent-chat-panel .sba-chat-thread__foot{border-top:1px solid #eef5f2;background:#fff;padding:12px}
.sba-agent-chat-panel .sba-chat-thread__foot__row{display:flex;align-items:flex-end;gap:6px}
.sba-agent-chat-panel textarea{flex:1;border:1px solid #c5dfd8;border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;resize:none;min-height:40px;max-height:120px;outline:none}
.sba-agent-chat-panel .sba-chat-thread__foot__btn{background:#076951;color:#fff;border:0;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px}
.sba-agent-chat-panel .sba-chat-thread__foot__btn.attach{background:#fff;color:#076951;border:1px solid #c5dfd8}
@media (max-width:480px){
	.sba-agent-chat-panel__inner{width:100%}
	.sba-portal__chatbtn span{display:none}
	.sba-portal__chatbtn{padding:7px 10px}
}

/* Tab badge */
.sba-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#e54d4d;color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;margin-left:4px;min-width:18px}

/* ===== v2.9.22 — Chat channel subtabs: unmistakable active vs inactive ===== */
.sba-portal__subtab[data-chat-channel]{
	background:transparent;
	border:1px solid var(--p-border, #2c3a35);
	color:var(--p-text-soft, #9fb8af);
	opacity:.75;
}
.sba-portal__subtab[data-chat-channel]:hover{opacity:1;border-color:var(--p-green-2, #0d8a64)}
.sba-portal__subtab[data-chat-channel].is-active{
	background:linear-gradient(135deg,var(--p-green, #076951),var(--p-green-3, #0d8a64));
	color:#fff;border-color:transparent;opacity:1;
	box-shadow:0 2px 10px rgba(7,105,81,.4);
}

/* ===== v2.9.23 — Chat toolbar (status tabs / search / refresh) ===== */
.sba-chat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 22px;margin-top:10px;flex-wrap:wrap}
.sba-chat-statustabs{display:inline-flex;background:var(--p-surface,#16211d);border:1px solid var(--p-border,#2c3a35);border-radius:999px;padding:3px}
.sba-chat-statustab{background:transparent;border:0;color:var(--p-text-soft,#9fb8af);padding:5px 16px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;transition:.15s}
.sba-chat-statustab.is-active{background:linear-gradient(135deg,var(--p-green,#076951),var(--p-green-3,#0d8a64));color:#fff}
.sba-chat-toolbar__right{display:flex;align-items:center;gap:8px}
.sba-chat-search{display:flex;align-items:center;gap:6px;background:var(--p-surface,#16211d);border:1px solid var(--p-border,#2c3a35);border-radius:999px;padding:5px 12px}
.sba-chat-search i{color:var(--p-text-soft,#9fb8af);font-size:15px}
.sba-chat-search input{background:transparent;border:0;outline:none;color:var(--p-text,#e7f0ec);font-size:13px;width:200px}
.sba-chat-search input::placeholder{color:var(--p-text-soft,#9fb8af)}
.sba-chat-refresh{background:var(--p-surface,#16211d);border:1px solid var(--p-border,#2c3a35);color:var(--p-text-soft,#9fb8af);width:34px;height:34px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:.15s}
.sba-chat-refresh:hover{color:var(--p-text,#e7f0ec);border-color:var(--p-green-2,#0d8a64)}
.sba-chat-refresh.is-spinning i{animation:sba-spin 1s linear infinite}

/* Message hover actions (reply / copy) */
.sba-chat-thread__body .sba-chat-msg{position:relative}
.sba-chat-msg__actions{position:absolute;top:-10px;display:none;gap:2px;background:#fff;border:1px solid #dceae5;border-radius:8px;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:2}
.sba-chat-thread__body .sba-chat-msg.mine .sba-chat-msg__actions{right:6px}
.sba-chat-thread__body .sba-chat-msg.theirs .sba-chat-msg__actions{left:6px}
.sba-chat-thread__body .sba-chat-msg:hover .sba-chat-msg__actions{display:flex}
.sba-chat-msg__act{background:transparent;border:0;color:#5a8a78;width:26px;height:26px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.sba-chat-msg__act:hover{background:#eef5f2;color:#076951}

/* Past-chat history images */
.sba-chat-hist-img{display:block;max-width:120px;max-height:120px;border-radius:6px;margin-top:4px}
.sba-chat-side__history .msg--sys{color:#9fb8af;font-style:italic;font-size:10px;text-align:center}

/* ===== v2.9.24 — Chat dashboard chrome ===== */
.sba-chat-dash{max-width:1500px;margin:0 auto;padding:0 16px}
.sba-chat-dash .sba-portal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid var(--p-border,#2c3a35);margin-bottom:6px}
.sba-chat-dash .sba-portal__brand{display:flex;align-items:center;gap:12px}
.sba-chat-dash .sba-portal__logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#076951,#0d8a64);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.sba-chat-dash .sba-portal__brand-name{font-weight:700;font-size:15px;color:var(--p-text,#e7f0ec)}
.sba-chat-dash .sba-portal__brand-sub{font-size:12px;color:var(--p-text-soft,#9fb8af)}
.sba-chat-dash .sba-portal__header-right{display:flex;align-items:center;gap:14px}
.sba-chat-dash .sba-portal__user-wrap{display:flex;align-items:center;gap:10px}
.sba-chat-dash .sba-portal__avatar{width:38px;height:38px;border-radius:50%;background:#0d8a64;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.sba-chat-dash .sba-portal__user-name{font-size:13px;font-weight:600;color:var(--p-text,#e7f0ec)}
.sba-chat-dash .sba-portal__user-email{font-size:11px;color:var(--p-text-soft,#9fb8af)}
.sba-chat-dash .sba-portal__logout{color:var(--p-text-soft,#9fb8af);font-size:20px;text-decoration:none}
.sba-chat-dash .sba-portal__logout:hover{color:#e54d4d}
.sba-chat-dash .sba-chat-toolbar{padding:0 4px}
.sba-chat-dash .sba-chat-layout{height:calc(100vh - 200px);min-height:480px}
.sba-chat-session__ref{font-size:10px;color:#5a8a78;font-family:monospace;letter-spacing:.02em}

/* Chat login page variant */
.sba-login-page--chat .sba-login-card__logo{background:linear-gradient(135deg,#076951,#0d8a64)}

/* Simple toast for the chat dashboard only (scoped so it doesn't override the
   richer agent/staff/finance portal toasts, which have their own position/style). */
.sba-chat-dash ~ .sba-toast-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100001;display:flex;flex-direction:column;gap:8px;align-items:center}
.sba-chat-dash ~ .sba-toast-container .sba-toast{background:#0a1f18;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.25)}

/* ==================================================================
 * v2.9.25 — Chat/agent portal polish
 * ================================================================== */

/* Agent portal: span the full viewport width (corner-to-corner top bar + divider). */
.sba-portal--agent{
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* Chat dashboard: full-screen like the staff portal (was max-width 1500 + centered). */
.sba-chat-dash{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:0;
}
.sba-chat-dash .sba-portal__header{padding-left:24px;padding-right:24px}
.sba-chat-dash .sba-chat-toolbar{padding-left:24px;padding-right:24px}
.sba-chat-dash .sba-chat-layout{padding-left:24px;padding-right:24px;height:calc(100vh - 190px);min-height:480px}
@media (max-width:768px){
	.sba-chat-dash .sba-portal__header,
	.sba-chat-dash .sba-chat-toolbar,
	.sba-chat-dash .sba-chat-layout{padding-left:12px;padding-right:12px}
}

/* Agent header "Chat" button — same size/shape as the bell + avatar (circle icon). */
.sba-portal__chatbtn{
	width:38px;height:38px;padding:0;border-radius:50%;
	justify-content:center;gap:0;margin-right:0;font-size:16px;
}
.sba-portal__chatbtn span{display:none}
.sba-portal__chatbtn-badge{position:absolute;top:-4px;right:-4px;border:2px solid var(--p-surface);min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;margin:0}

/* Notification panel: match the user-menu footprint and sit a little lower (desktop only;
   mobile keeps its fixed top from the media query above). */
@media (min-width:601px){
	.sba-notif-panel{width:300px;top:calc(100% + 14px)}
}

/* Agent full-screen chat panel — no left gap (cover the whole viewport). */
.sba-agent-chat-panel__inner{width:100vw;max-width:100vw}
@media (min-width:900px){
	/* On wide screens keep it a comfortable right-side sheet. */
	.sba-agent-chat-panel__inner{width:440px;max-width:100vw}
}

/* iOS: prevent auto-zoom on input focus by keeping font-size >= 16px on touch. */
@media (max-width:768px){
	.sba-chat-thread__foot textarea,
	.sba-chat-thread__foot input,
	.sba-agent-chat-panel textarea,
	.sba-chat-search input,
	.sba-login-input,
	.sba-chat-stage input,
	.sba-chat-stage textarea,
	.sba-chat-foot textarea,
	.sba-chat-foot input{font-size:16px !important}
}

/* Guard against horizontal scroll introduced by the 100vw breakout. */
body.sba-portal-body{overflow-x:hidden}

/* v2.9.26 — Booking status pills in chat side panel + agent intro + FAB open state */
.sba-chat-side__bk{align-items:center}
.sba-chat-bk-status{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:capitalize;background:#e6eeeb;color:#33413b}
.sba-chat-bk-status[data-st="confirmed"]{background:rgba(16,185,129,.18);color:#0a7a52}
.sba-chat-bk-status[data-st="completed"]{background:rgba(16,185,129,.18);color:#0a7a52}
.sba-chat-bk-status[data-st="pending"]{background:rgba(245,158,11,.20);color:#9a6700}
.sba-chat-bk-status[data-st="cancelled"],.sba-chat-bk-status[data-st="refunded"]{background:rgba(239,68,68,.16);color:#b42626}
.sba-chat-bk-status[data-st="assigned"],.sba-chat-bk-status[data-st="accepted"]{background:rgba(59,130,246,.18);color:#1d5fbf}

/* Agent chat intro screen */
.sba-chat-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;padding:30px 24px;color:#3a5a4d}
.sba-chat-intro__icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#076951,#0d8a64);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px}
.sba-chat-intro h4{margin:0 0 6px;font-size:17px;color:#0a1f18}
.sba-chat-intro p{margin:0 0 18px;font-size:13px;color:#5a8a78;max-width:280px;line-height:1.5}
.sba-chat-intro__btn{background:linear-gradient(135deg,#076951,#0d8a64);color:#fff;border:0;border-radius:10px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sba-chat-intro__btn:hover{filter:brightness(1.08)}

/* v2.9.27 — spin keyframe for the chat dashboard refresh (staff portal injects its own via JS) */
@keyframes sba-spin{to{transform:rotate(360deg)}}
.sba-chat-refresh.is-spinning i{animation:sba-spin 1s linear infinite}

/* ==================================================================
 * v2.9.27 — Agent portal: mobile fit + consistent gutters + alignment
 * ================================================================== */
/* Filters/subtabs live inside a padded pane — kill their own side padding so the
   Refresh button, date filters and subtab pills align with the cards/gutter. */
.sba-portal--agent .sba-pane > .sba-portal__filters,
.sba-portal--agent .sba-pane > .sba-portal__subtabs{padding-left:0;padding-right:0}

@media (max-width:600px){
	/* Top bar shrinks with the viewport (was staying desktop-sized). */
	.sba-portal--agent .sba-portal__topbar{padding:12px 14px}
	.sba-portal--agent .sba-portal__top-actions{gap:8px}
	.sba-portal--agent .sba-portal__online-toggle{padding:5px 9px 5px 6px;font-size:11px;gap:6px}
	.sba-portal--agent .sba-portal__brand-name{font-size:14px;line-height:1.15}
	.sba-portal--agent .sba-portal__brand-sub{font-size:11px}
	.sba-portal--agent .sba-portal__logo{width:34px;height:34px;font-size:16px}
	.sba-portal--agent .sba-portal__bell,
	.sba-portal--agent .sba-portal__chatbtn{width:34px;height:34px;font-size:15px}
	.sba-portal--agent .sba-portal__avatar,
	.sba-portal--agent .sba-portal__avatar-btn{width:34px;height:34px;font-size:13px}
	.sba-portal--agent .sba-portal__logout{width:30px;height:30px;font-size:18px}
	/* Match every block to one 14px gutter so the page is aligned end to end. */
	.sba-portal--agent .sba-portal__stats{padding:14px 14px 0;gap:8px}
	.sba-portal--agent .sba-pane{padding:14px 14px 84px}
	/* Past: stack the date filter neatly under the label. */
	.sba-portal--agent .sba-date-range{flex-wrap:wrap;gap:8px;width:100%}
	.sba-portal--agent .sba-date-range__label{flex:0 0 100%;margin-bottom:2px}
	.sba-portal--agent .sba-date-range input[type="date"]{flex:1 1 40%;min-width:0}
	.sba-portal--agent .sba-date-range__sep{flex:0 0 auto}
}
@media (max-width:380px){
	/* Reclaim space on very small phones — the switch itself shows the state. */
	.sba-portal--agent .sba-portal__online-toggle .lbl{display:none}
}