/*
 * TN Water Tech — Appointment Board · front-end stylesheet.
 * Brand palette is exposed as CSS variables on :root via inline-style.
 */

:root {
	--tnwt-ab-primary:        #0F4C81;
	--tnwt-ab-secondary:      #2E7BB8;
	--tnwt-ab-accent:         #7FB3D5;
	--tnwt-ab-pale:           #E8F1F8;
	--tnwt-ab-surface:        #FFFFFF;
	--tnwt-ab-page-bg:        #FAFCFE;
	--tnwt-ab-text:           #1A2733;
	--tnwt-ab-text-muted:     #5A6878;
	--tnwt-ab-available:      #FFD93D;
	--tnwt-ab-booked:         #4CAF50;
	--tnwt-ab-unavailable:    #E53935;
	--tnwt-ab-overbook:       #9E9E9E;
	--tnwt-ab-unassigned:     #616161;
	--tnwt-ab-drag_highlight: #7FB3D5;
}

.tnwt-ab-app, .tnwt-ab-app * {
	box-sizing: border-box;
}

.tnwt-ab-app {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.35;
	color: var(--tnwt-ab-text);
	background: var(--tnwt-ab-page-bg);
	border-radius: 8px;
	padding: 12px;
	box-shadow: 0 1px 3px rgba(15, 76, 129, 0.1);
	width: 100%;
	box-sizing: border-box;
}

.tnwt-ab-app.tnwt-ab-align-center { margin: 0 auto; }
.tnwt-ab-app.tnwt-ab-align-right  { margin-left: auto; }

/* Full-bleed: break out of the parent column to span the viewport.
   Useful inside narrow Elementor columns. Subtract the scrollbar gutter
   so we don't trigger a horizontal scroll on the body. */
.tnwt-ab-app.is-full-bleed {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	border-radius: 0;
}

/* On the public board, the tech identity is irrelevant to the
   appointment setter — only the row's color (=tech availability)
   matters. Dispatch tab keeps tech names visible. */
.tnwt-ab-app[data-context="front"] .tnwt-ab-cell-techname {
	display: none;
}

/* Header */

.tnwt-ab-app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--tnwt-ab-pale);
	flex-wrap: wrap;
}

.tnwt-ab-app-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tnwt-ab-app-logo {
	max-height: 48px;
	width: auto;
	display: block;
}

.tnwt-ab-app-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--tnwt-ab-primary);
	margin: 0;
}

.tnwt-ab-app-logo {
	max-height: 38px;
	width: auto;
	display: block;
}

.tnwt-ab-app-header__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tnwt-ab-name-pill,
.tnwt-ab-logout {
	border: 1px solid var(--tnwt-ab-accent);
	background: var(--tnwt-ab-surface);
	color: var(--tnwt-ab-primary);
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.tnwt-ab-name-pill .tnwt-ab-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tnwt-ab-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tnwt-ab-name-pill .tnwt-ab-avatar--clickable {
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tnwt-ab-name-pill .tnwt-ab-avatar--clickable:hover {
	transform: scale(1.08);
	box-shadow: 0 0 0 2px var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-name-pill .tnwt-ab-avatar.has-image::after {
	content: '📷';
	position: absolute;
	font-size: 9px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	width: 12px;
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(8px, 8px);
	opacity: 0;
	transition: opacity 0.15s;
}
.tnwt-ab-name-pill .tnwt-ab-avatar.has-image:hover::after { opacity: 1; }
.tnwt-ab-name-pill .tnwt-ab-avatar { position: relative; overflow: visible; }

/* E — Avatar color palette (8 stable colors). Derived from initials
   hash so the same setter always gets the same color. Overridden by
   background-image when the setter uploads a profile pic. */
.tnwt-ab-avatar--color-0 { background: #0F4C81; } /* primary blue */
.tnwt-ab-avatar--color-1 { background: #c52929; } /* red */
.tnwt-ab-avatar--color-2 { background: #2e7d32; } /* green */
.tnwt-ab-avatar--color-3 { background: #f57c00; } /* orange */
.tnwt-ab-avatar--color-4 { background: #7b1fa2; } /* purple */
.tnwt-ab-avatar--color-5 { background: #00838f; } /* teal */
.tnwt-ab-avatar--color-6 { background: #5d4037; } /* brown */
.tnwt-ab-avatar--color-7 { background: #c2185b; } /* pink */

.tnwt-ab-name-pill:hover,
.tnwt-ab-logout:hover {
	background: var(--tnwt-ab-pale);
}

.tnwt-ab-logout {
	border-color: #c3c4c7;
	color: var(--tnwt-ab-text-muted);
	padding: 5px 12px;
}

.tnwt-ab-logout:focus-visible,
.tnwt-ab-name-pill:focus-visible,
.tnwt-ab-week-nav__btn:focus-visible,
.tnwt-ab-gate-submit:focus-visible {
	outline: 3px solid var(--tnwt-ab-accent);
	outline-offset: 2px;
}

/* Auth gate */

.tnwt-ab-gate {
	display: flex;
	justify-content: center;
	padding: 60px 16px;
}

.tnwt-ab-gate-form {
	background: var(--tnwt-ab-surface);
	border: 1px solid var(--tnwt-ab-pale);
	border-radius: 10px;
	padding: 28px 28px 24px;
	box-shadow: 0 4px 12px rgba(15, 76, 129, 0.08);
	max-width: 420px;
	width: 100%;
	animation: tnwt-ab-fade-in 0.25s ease-out;
}

@keyframes tnwt-ab-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tnwt-ab-gate-form h2 {
	margin: 0 0 18px;
	color: var(--tnwt-ab-primary);
	font-size: 18px;
}

.tnwt-ab-gate-field {
	display: block;
	margin-bottom: 14px;
}

.tnwt-ab-gate-field span {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tnwt-ab-text-muted);
	margin-bottom: 4px;
}

.tnwt-ab-gate-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d0d3d8;
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
}

.tnwt-ab-gate-field input:focus {
	outline: 2px solid var(--tnwt-ab-accent);
	outline-offset: 1px;
	border-color: var(--tnwt-ab-secondary);
}

.tnwt-ab-gate-submit {
	width: 100%;
	padding: 11px 16px;
	background: var(--tnwt-ab-primary);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.tnwt-ab-gate-submit:hover {
	background: var(--tnwt-ab-secondary);
}

.tnwt-ab-gate-submit:disabled {
	opacity: 0.5;
	cursor: wait;
}

.tnwt-ab-gate-error {
	margin-top: 12px;
	color: var(--tnwt-ab-unavailable);
	font-size: 13px;
	min-height: 18px;
}

/* Loading + board placeholder */

.tnwt-ab-board-loading {
	padding: 48px 16px;
	text-align: center;
	color: var(--tnwt-ab-text-muted);
	font-style: italic;
}

/* Board structure (Pass 7+) */

.tnwt-ab-week-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.tnwt-ab-week-nav__label {
	font-size: 14px;
	color: var(--tnwt-ab-text-muted);
	margin-right: auto;
}

.tnwt-ab-week-nav__btn {
	background: var(--tnwt-ab-surface);
	border: 1px solid var(--tnwt-ab-accent);
	color: var(--tnwt-ab-primary);
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
}

.tnwt-ab-week-nav__btn:hover {
	background: var(--tnwt-ab-pale);
}

.tnwt-ab-quick-search {
	border: 1px solid var(--tnwt-ab-accent);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 13px;
	min-width: 180px;
	max-width: 260px;
	background: var(--tnwt-ab-surface);
	color: var(--tnwt-ab-text);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.tnwt-ab-quick-search:focus {
	outline: none;
	border-color: var(--tnwt-ab-primary);
	box-shadow: 0 0 0 3px rgba(127, 179, 213, 0.4);
}

.tnwt-ab-app.is-searching .tnwt-ab-cell.is-search-miss {
	opacity: 0.25;
	filter: grayscale(0.6);
}

.tnwt-ab-app.is-searching .tnwt-ab-cell.is-search-hit {
	outline: 3px solid #FFC107;
	outline-offset: -1px;
	z-index: 1;
}

.tnwt-ab-refresh-indicator {
	font-size: 12px;
	color: var(--tnwt-ab-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tnwt-ab-refresh-indicator::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tnwt-ab-booked, #4caf50);
	animation: tnwt-ab-blink 2.4s ease-in-out infinite;
}

@keyframes tnwt-ab-blink {
	0%, 100% { opacity: 0.4; transform: scale(0.9); }
	50%      { opacity: 1;   transform: scale(1.1); }
}

.tnwt-ab-zone-section {
	margin-bottom: 24px;
}

.tnwt-ab-zone-heading {
	background: var(--tnwt-ab-primary);
	color: #fff;
	padding: 10px 14px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 6px 6px 0 0;
}

.tnwt-ab-zone-grid {
	display: grid;
	grid-template-columns: 78px repeat(7, minmax(118px, 1fr));
	background: var(--tnwt-ab-surface);
	border: 1px solid var(--tnwt-ab-pale);
	border-top: 0;
	border-radius: 0 0 6px 6px;
	overflow-x: auto;
}

.tnwt-ab-day-header {
	background: var(--tnwt-ab-secondary);
	color: #fff;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.05em;
	position: sticky;
	top: 0;
	z-index: 2;
	transition: background-color 0.18s ease;
}

.tnwt-ab-day-header.is-today {
	background: #ffd93d;
	color: #3a2f00;
	box-shadow: inset 0 -3px 0 #d4a82a;
}

.tnwt-ab-day-header.is-today::before {
	content: "TODAY ";
	font-size: 9px;
	letter-spacing: 0.12em;
	opacity: 0.8;
	margin-right: 4px;
}

.tnwt-ab-slot-label {
	background: var(--tnwt-ab-pale);
	color: var(--tnwt-ab-primary);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #fff;
	border-right: 1px solid var(--tnwt-ab-pale);
	min-height: 60px;
}

.tnwt-ab-cell {
	padding: 4px 4px 14px;
	border-top: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
	min-height: 50px;
	/* Base font scaled by the per-setter A-/A+ control (board.js sets
	   --tnwt-ab-font-scale on <html>). All child text classes inherit
	   from this rule so a single scalar resizes the entire cell. */
	font-size: calc(11px * var(--tnwt-ab-font-scale, 1));
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	transition: filter 0.12s ease, transform 0.12s ease;
}

.tnwt-ab-cell:not(.tnwt-ab-cell-empty-spacer):hover {
	filter: brightness(0.96);
	cursor: pointer;
}

/* Empty available cell — soft "+ add" hint on hover. */
.tnwt-ab-cell.is-yellow:not(:has(.tnwt-ab-cell-time))::after {
	content: "+ add";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(58, 47, 0, 0.45);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.tnwt-ab-cell.is-yellow:not(:has(.tnwt-ab-cell-time)):hover::after {
	opacity: 1;
}

/* Initials badges. Last-editor lives in the bottom-RIGHT corner;
   creator lives in the bottom-LEFT. Same dimensions and treatment
   so they read as a pair. Hover the cell to see "Created by …" or
   "Modified by …" tooltips with the full name + timestamp. */
.tnwt-ab-cell-initials,
.tnwt-ab-cell-creator-initials {
	position: absolute;
	bottom: 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.6);
	background: rgba(255, 255, 255, 0.7);
	padding: 0 4px;
	border-radius: 3px;
	pointer-events: auto; /* allow tooltips */
}
.tnwt-ab-cell-initials         { right: 4px; }
.tnwt-ab-cell-creator-initials { left: 4px; }
/* Subtle ↪ prefix on the creator badge so the two initials don't get
   visually confused at a glance. */
.tnwt-ab-cell-creator-initials::before {
	content: '✎';
	margin-right: 2px;
	opacity: 0.6;
}

.tnwt-ab-cell.is-green .tnwt-ab-cell-initials,
.tnwt-ab-cell.is-green .tnwt-ab-cell-creator-initials,
.tnwt-ab-cell.is-red .tnwt-ab-cell-initials,
.tnwt-ab-cell.is-red .tnwt-ab-cell-creator-initials,
.tnwt-ab-cell.is-unassigned .tnwt-ab-cell-initials,
.tnwt-ab-cell.is-unassigned .tnwt-ab-cell-creator-initials {
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
}

/* Overbook keeps the white-bg / dark-text treatment even when occupied. */
.tnwt-ab-cell.is-overbook .tnwt-ab-cell-initials,
.tnwt-ab-cell.is-overbook .tnwt-ab-cell-creator-initials,
.tnwt-ab-cell.is-overbook.is-green .tnwt-ab-cell-initials,
.tnwt-ab-cell.is-overbook.is-green .tnwt-ab-cell-creator-initials {
	background: rgba(0, 0, 0, 0.08);
	color: rgba(0, 0, 0, 0.7);
}
.tnwt-ab-cell.is-overbook .tnwt-ab-note-badge,
.tnwt-ab-cell.is-overbook.is-green .tnwt-ab-note-badge {
	background: rgba(0, 0, 0, 0.08);
}

.tnwt-ab-cell.is-yellow      { background: var(--tnwt-ab-available); color: #3a2f00; border: 1px dashed rgba(58,47,0,0.25); }
.tnwt-ab-cell.is-green       { background: var(--tnwt-ab-booked);    color: #fff; }
.tnwt-ab-cell.is-red         { background: var(--tnwt-ab-unavailable); color: #fff; }
.tnwt-ab-cell.is-overbook,
.tnwt-ab-cell.is-overbook.is-green {
	background: #fff;
	color: #1a2733;
	border: 1px dashed var(--tnwt-ab-overbook);
}
.tnwt-ab-cell.is-unassigned  { background: var(--tnwt-ab-unassigned); color: #fff; }

.tnwt-ab-cell.is-overbook::before {
	content: "OVERBOOK";
	position: absolute;
	top: 4px;
	right: 6px;
	font-size: 9px;
	letter-spacing: 0.1em;
	color: var(--tnwt-ab-overbook);
	font-weight: 600;
	pointer-events: none;
}

.tnwt-ab-cell.is-unassigned::before {
	content: "UNASSIGNED — REASSIGN";
	position: absolute;
	top: 4px;
	right: 6px;
	font-size: 9px;
	letter-spacing: 0.05em;
	font-weight: 600;
	pointer-events: none;
	opacity: 0.85;
}

.tnwt-ab-cell.is-pulse {
	animation: tnwt-ab-pulse 3s ease-out;
}

/* PRIORITY (lead source flagged in admin) → inner border in
   --tnwt-ab-priority_border (default white).
   RESET / rescheduled → inner border in --tnwt-ab-reset_border
   (default purple).
   Both → outer priority + inner reset, stacked.
   Both colors are admin-configurable on Settings → Appointment Board
   → General → Brand colors → Status overlays. */
.tnwt-ab-cell.is-priority {
	box-shadow: inset 0 0 0 3px var(--tnwt-ab-priority_border, #ffffff);
}
.tnwt-ab-cell.is-reset {
	box-shadow: inset 0 0 0 3px var(--tnwt-ab-reset_border, #9c27b0);
}
.tnwt-ab-cell.is-priority.is-reset {
	box-shadow:
		inset 0 0 0 3px var(--tnwt-ab-priority_border, #ffffff),
		inset 0 0 0 7px var(--tnwt-ab-reset_border, #9c27b0);
}

/* CONFIRMED — a big checkmark overlay sits on top of the cell. Color
   is configurable; content remains legible via a subtle white text
   shadow on the mark and a soft green tint on the cell. */
.tnwt-ab-confirmed-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	line-height: 1;
	font-weight: 900;
	color: var(--tnwt-ab-confirmed_check, #4caf50);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 1px 0 rgba(0,0,0,0.18);
	pointer-events: none;
	z-index: 2;
	opacity: 0.92;
	transition: opacity 0.15s ease;
}
.tnwt-ab-cell.is-confirmed {
	background-image: linear-gradient(rgba(76,175,80,0.12), rgba(76,175,80,0.12));
}
.tnwt-ab-cell.is-confirmed:hover .tnwt-ab-confirmed-overlay {
	opacity: 0.55; /* dim the check on hover so the content underneath becomes easier to read */
}

@keyframes tnwt-ab-pulse {
	0%   { box-shadow: 0 0 0 0 var(--tnwt-ab-accent); }
	30%  { box-shadow: 0 0 0 6px rgba(127, 179, 213, 0.4); }
	100% { box-shadow: 0 0 0 0 rgba(127, 179, 213, 0); }
}

.tnwt-ab-cell.is-drag-target {
	box-shadow: 0 0 0 3px var(--tnwt-ab-drag_highlight);
}

.tnwt-ab-cell.is-locked-by-other {
	outline: 2px dashed var(--tnwt-ab-secondary);
	outline-offset: -3px;
}

.tnwt-ab-cell .tnwt-ab-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 11px;
	color: rgba(0,0,0,0.35);
	cursor: grab;
	user-select: none;
}

.tnwt-ab-cell input,
.tnwt-ab-cell select {
	font: inherit;
	color: inherit;
	background: rgba(255,255,255,0.85);
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 3px;
	padding: 2px 4px;
	width: 100%;
	min-width: 0;
}

.tnwt-ab-cell.is-yellow input,
.tnwt-ab-cell.is-yellow select {
	background: rgba(255,255,255,0.7);
}

.tnwt-ab-cell.is-green input,
.tnwt-ab-cell.is-green select,
.tnwt-ab-cell.is-red input,
.tnwt-ab-cell.is-red select,
.tnwt-ab-cell.is-unassigned input,
.tnwt-ab-cell.is-unassigned select {
	background: rgba(255,255,255,0.92);
	color: var(--tnwt-ab-text);
}

.tnwt-ab-cell-row {
	display: flex;
	gap: 4px;
	align-items: center;
}

/* All cell-text sizes use 1em (= the scaled base on .tnwt-ab-cell) so
   a single CSS variable change in board.js resizes the whole cell.
   Customer name is intentionally 1.15em so it reads as the focal
   element regardless of the user's chosen scale (Steve's request). */
.tnwt-ab-cell .tnwt-ab-cell-time {
	font-weight: 600;
	font-size: 1em;
}

.tnwt-ab-cell .tnwt-ab-cell-name {
	font-weight: 700;
	font-size: 1.15em;
	line-height: 1.15;
}

.tnwt-ab-cell .tnwt-ab-cell-phone {
	display: block;
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	font-size: 0.95em;
}
.tnwt-ab-cell .tnwt-ab-cell-phone:hover { text-decoration: underline; }

/* v1.9.2 — city/zip switched from <div> to <a> for the Google Maps
   link; anchors are inline by default, which caused phone + city +
   lead-source to collapse onto one line. Restore block flow. */
.tnwt-ab-cell .tnwt-ab-cell-city { display: block; font-size: 1em; }
.tnwt-ab-cell .tnwt-ab-cell-lead { display: block; font-size: 1em; }

/* v1.9.4 — On dispatch + same-day single-day views, the cell footer
   now has a tech-reassign dropdown that names the assigned tech. The
   tech name at the top of the cell becomes redundant for booked cells
   only; empty tech-row cells still need the label so dispatchers know
   which row is whose. We detect "booked + dispatch" via the presence
   of the .tnwt-ab-cell-quickreassign child element. */
.tnwt-ab-cell:has(.tnwt-ab-cell-quickreassign) .tnwt-ab-cell-techname {
	display: none;
}

.tnwt-ab-cell .tnwt-ab-note-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	cursor: help;
	background: rgba(255, 255, 255, 0.85);
	padding: 0 4px;
	border-radius: 3px;
}
.tnwt-ab-cell.is-green .tnwt-ab-note-badge,
.tnwt-ab-cell.is-red .tnwt-ab-note-badge,
.tnwt-ab-cell.is-unassigned .tnwt-ab-note-badge {
	background: rgba(0, 0, 0, 0.25);
}

.tnwt-ab-cell .tnwt-ab-cell-meta {
	display: flex;
	justify-content: space-between;
	font-size: 1em;
	opacity: 0.85;
}

.tnwt-ab-locked-tag {
	font-size: 10px;
	background: rgba(46, 123, 184, 0.85);
	color: #fff;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: auto;
}

/* Cell editor (Pass 8) */

.tnwt-ab-cell-editor {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 2px;
}

.tnwt-ab-cell-editor input,
.tnwt-ab-cell-editor select,
.tnwt-ab-cell-editor textarea {
	font-size: 11px;
	padding: 2px 4px;
	font-family: inherit;
}

.tnwt-ab-cell-editor textarea {
	resize: vertical;
	min-height: 28px;
}

.tnwt-ab-cell-editor input.has-error {
	outline: 2px solid var(--tnwt-ab-unavailable);
	background: #ffe7e7;
}

/* Reschedule banner — shown when the user marks an appointment for
   reschedule via the cell editor's "Reschedule" button. */
.tnwt-ab-reschedule-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	margin-bottom: 12px;
	border-radius: 8px;
	background: linear-gradient(180deg, #f3e8fb 0%, #faf3ff 100%);
	border: 1px solid #c69be8;
	color: #4a1b6a;
	font-size: 13px;
	animation: tnwt-ab-fade-in 0.2s ease-out;
}

.tnwt-ab-reschedule-banner__icon {
	font-size: 18px;
	line-height: 1;
}

.tnwt-ab-reschedule-banner__text {
	flex: 1;
}

.tnwt-ab-reschedule-banner__cancel {
	background: #fff;
	border: 1px solid #c69be8;
	color: #6a1b9a;
	padding: 5px 14px;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
}

.tnwt-ab-reschedule-banner__cancel:hover {
	background: #6a1b9a;
	color: #fff;
}

.tnwt-ab-cell.tnwt-ab-cell--reschedule-source {
	outline: 3px dashed #9c27b0;
	outline-offset: -2px;
	opacity: 0.65;
}

.tnwt-ab-cell.tnwt-ab-cell--paste-target {
	cursor: copy;
	transition: outline-color 0.15s, background-color 0.15s;
}
.tnwt-ab-cell.tnwt-ab-cell--paste-target:hover {
	outline: 3px solid #9c27b0;
	outline-offset: -2px;
}
.tnwt-ab-cell.tnwt-ab-cell--paste-target::before {
	content: "Click to drop here";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(106, 27, 154, 0.6);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
	text-transform: uppercase;
}
.tnwt-ab-cell.tnwt-ab-cell--paste-target:hover::before {
	opacity: 1;
}
.tnwt-ab-cell.is-overbook.tnwt-ab-cell--paste-target::before,
.tnwt-ab-cell.is-unassigned.tnwt-ab-cell--paste-target::before {
	/* Overbook/unassigned already have a ::before; suppress the paste hint. */
	display: none;
}

.tnwt-ab-cell.tnwt-ab-cell--pasting {
	opacity: 0.5;
	pointer-events: none;
}

.tnwt-ab-edit-reschedule {
	background: #6a1b9a !important;
	color: #fff !important;
	border-color: #6a1b9a !important;
}
.tnwt-ab-edit-reschedule:hover {
	background: #4a1264 !important;
	border-color: #4a1264 !important;
}

.tnwt-ab-edit-confirm {
	background: #fff !important;
	color: #2e7d32 !important;
	border-color: #2e7d32 !important;
	font-weight: 600;
}
.tnwt-ab-edit-confirm:hover {
	background: #e8f5e9 !important;
}
.tnwt-ab-edit-confirm.is-on {
	background: #2e7d32 !important;
	color: #fff !important;
	border-color: #2e7d32 !important;
}
.tnwt-ab-edit-confirm.is-on:hover {
	background: #1b5e20 !important;
	border-color: #1b5e20 !important;
}

.tnwt-ab-toast-stack {
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 360px;
}

.tnwt-ab-edit-reset {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #6a1b9a;
	background: rgba(255,255,255,0.85);
	padding: 3px 6px;
	border-radius: 3px;
	cursor: pointer;
}

.tnwt-ab-edit-reset input {
	margin: 0;
}

.tnwt-ab-edit-actions {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.tnwt-ab-edit-actions button {
	font-size: 11px;
	padding: 2px 6px;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 3px;
	background: var(--tnwt-ab-surface);
	color: var(--tnwt-ab-text);
	cursor: pointer;
}

.tnwt-ab-edit-actions .tnwt-ab-edit-save {
	background: var(--tnwt-ab-primary);
	color: #fff;
	border-color: var(--tnwt-ab-primary);
}

.tnwt-ab-edit-actions .tnwt-ab-edit-delete {
	color: var(--tnwt-ab-unavailable);
}

/* Drag-and-drop (Pass 9) */

.tnwt-ab-cell {
	touch-action: manipulation;
}

.tnwt-ab-cell.tnwt-ab-drag-source {
	opacity: 0.4;
	border: 2px dashed var(--tnwt-ab-secondary);
}

.tnwt-ab-cell.tnwt-ab-drag-ghost {
	border-radius: 6px;
}

/* Empty-cell affordance — a subtle "+" appears on hover so setters
   can see at a glance which cells are clickable. Excludes red
   (tech-unavailable) cells, the spacer placeholder, and any cell
   currently in edit mode. The pseudo-element is hidden until hover so
   the board stays clean at rest. */
.tnwt-ab-cell[data-appt-id=""]:not(.is-red):not(.tnwt-ab-cell-empty-spacer):not([data-editing="1"]) {
	position: relative;
}
.tnwt-ab-cell[data-appt-id=""]:not(.is-red):not(.tnwt-ab-cell-empty-spacer):not([data-editing="1"])::after {
	content: '+';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	font-weight: 600;
	color: rgba(15, 76, 129, 0.55);
	opacity: 0;
	transition: opacity 0.12s ease;
	pointer-events: none;
}
.tnwt-ab-cell[data-appt-id=""]:not(.is-red):not(.tnwt-ab-cell-empty-spacer):not([data-editing="1"]):hover::after,
.tnwt-ab-cell[data-appt-id=""]:not(.is-red):not(.tnwt-ab-cell-empty-spacer):not([data-editing="1"]):focus-visible::after {
	opacity: 1;
}

/* Toasts and pills */

.tnwt-ab-toast-stack {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 99999;
	max-width: 420px;
}

.tnwt-ab-toast {
	background: var(--tnwt-ab-surface);
	border: 1px solid var(--tnwt-ab-pale);
	border-left: 4px solid var(--tnwt-ab-secondary);
	padding: 10px 14px 10px 36px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(15,76,129,0.18);
	font-size: 13px;
	cursor: pointer;
	position: relative;
	animation: tnwt-ab-toast-in 0.22s ease-out;
}

@keyframes tnwt-ab-toast-in {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}

.tnwt-ab-toast::before {
	content: "i";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tnwt-ab-secondary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-family: Georgia, serif;
	font-style: italic;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tnwt-ab-toast.is-warning { border-left-color: #f0a500; background: #fff8e1; }
.tnwt-ab-toast.is-warning::before { content: "!"; background: #f0a500; font-style: normal; font-family: inherit; }

.tnwt-ab-toast.is-error   { border-left-color: var(--tnwt-ab-unavailable); }
.tnwt-ab-toast.is-error::before { content: "×"; background: var(--tnwt-ab-unavailable); font-size: 14px; font-family: inherit; font-style: normal; line-height: 1; }

.tnwt-ab-toast.is-success { border-left-color: var(--tnwt-ab-booked); }
.tnwt-ab-toast.is-success::before { content: "✓"; background: var(--tnwt-ab-booked); font-family: inherit; font-style: normal; font-size: 11px; }

/* F6 — Avoid collisions with the WP admin bar (top) and iOS Safari's
   bottom address bar / home indicator on mobile. */
.admin-bar .tnwt-ab-toast-stack { top: 52px; bottom: auto; }
@media (max-width: 600px) {
	.tnwt-ab-toast-stack {
		bottom: max(20px, env(safe-area-inset-bottom, 20px));
		right: 12px;
		left: 12px;
		max-width: none;
	}
	.admin-bar .tnwt-ab-toast-stack { top: 60px; bottom: auto; }
}

.tnwt-ab-undo-pill {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--tnwt-ab-primary);
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(15,76,129,0.3);
	font-size: 13px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tnwt-ab-undo-pill button {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
}

.tnwt-ab-undo-pill button:hover {
	background: rgba(255,255,255,0.15);
}

/* Availability widget (tech self-service) */

.tnwt-ab-avail-widget .tnwt-ab-avail-heading {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tnwt-ab-primary);
	margin: 18px 0 10px;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-matrix {
	border-collapse: separate;
	border-spacing: 4px;
	width: 100%;
	margin-bottom: 18px;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-matrix th,
.tnwt-ab-avail-widget .tnwt-ab-avail-matrix td {
	padding: 0;
	text-align: center;
	background: var(--tnwt-ab-surface);
}

.tnwt-ab-avail-widget .tnwt-ab-avail-matrix thead th {
	background: var(--tnwt-ab-primary);
	color: #fff;
	padding: 8px 6px;
	border-radius: 4px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-matrix tbody th {
	background: var(--tnwt-ab-pale);
	color: var(--tnwt-ab-primary);
	font-weight: 600;
	padding: 8px 10px;
	text-align: left;
	border-radius: 4px;
	min-width: 90px;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-cell {
	display: block;
	width: 100%;
	min-height: 52px;
	border: 1px solid #d0d3d8;
	background: var(--tnwt-ab-surface);
	cursor: pointer;
	font-size: 22px;
	font-weight: 700;
	border-radius: 6px;
	transition: background-color 0.12s ease, transform 0.06s ease;
	-webkit-tap-highlight-color: rgba(127, 179, 213, 0.3);
}
.tnwt-ab-avail-widget .tnwt-ab-avail-cell:active { transform: scale(0.96); }
.tnwt-ab-avail-widget .tnwt-ab-avail-cell.is-on {
	background: var(--tnwt-ab-available);
	color: #3a2f00;
	border-color: #d4a82a;
}
.tnwt-ab-avail-widget .tnwt-ab-avail-cell.is-off {
	color: #c3c4c7;
}

/* Specific-week grid (overrides), navigation row, and override marker dot. */

.tnwt-ab-avail-widget .tnwt-ab-avail-hint {
	font-size: 12px;
	color: var(--tnwt-ab-text-muted, #5a6878);
	margin: 8px 0 18px;
	line-height: 1.5;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-week-root {
	margin-bottom: 18px;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__btn {
	background: var(--tnwt-ab-surface, #fff);
	border: 1px solid var(--tnwt-ab-accent, #7FB3D5);
	color: var(--tnwt-ab-primary, #0F4C81);
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
	transition: background-color 0.12s ease;
}
.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__btn:hover {
	background: var(--tnwt-ab-pale, #E8F1F8);
}

.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tnwt-ab-primary, #0F4C81);
	margin-left: 8px;
	flex: 1;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-copy-select {
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid var(--tnwt-ab-accent, #7FB3D5);
	border-radius: 6px;
	background: var(--tnwt-ab-surface, #fff);
	color: var(--tnwt-ab-primary, #0F4C81);
	cursor: pointer;
}
.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__copy {
	background: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
	border: 1px solid var(--tnwt-ab-primary, #0F4C81);
	padding: 6px 14px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
}
.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__copy:hover {
	opacity: 0.92;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__reset {
	background: var(--tnwt-ab-surface, #fff);
	border: 1px solid #c3c4c7;
	color: #c52929;
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	font-size: 12px;
}
.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__reset:hover {
	background: #fff5f5;
	border-color: #f0a0a0;
}

/* Override-marker dot (small purple corner indicator on a week cell). */
.tnwt-ab-avail-widget .tnwt-ab-avail-cell.has-override {
	position: relative;
}
.tnwt-ab-avail-widget .tnwt-ab-avail-cell.has-override::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9c27b0;
	box-shadow: 0 0 0 2px var(--tnwt-ab-surface, #fff);
}

.tnwt-ab-avail-widget .tnwt-ab-avail-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9c27b0;
	vertical-align: middle;
	margin-right: 4px;
}

.tnwt-ab-avail-widget .tnwt-ab-avail-week-matrix tr.is-today th {
	background: var(--tnwt-ab-available, #FFD93D);
	color: #3a2f00;
}

.tnwt-ab-avail-widget .tnwt-ab-override-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.tnwt-ab-avail-widget .tnwt-ab-override-table th,
.tnwt-ab-avail-widget .tnwt-ab-override-table td {
	padding: 6px 6px;
	border-bottom: 1px solid var(--tnwt-ab-pale);
	text-align: left;
}

.tnwt-ab-avail-widget .tnwt-ab-override-slot-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
}
.tnwt-ab-avail-widget .tnwt-ab-override-slot-label input { margin: 0; }

.tnwt-ab-avail-widget .tnwt-ab-avail-overrides-self .button {
	margin-top: 8px;
	background: var(--tnwt-ab-primary);
	color: #fff;
	border: 0;
	padding: 8px 14px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

/* Mobile-specific availability widget tweaks. */
@media (max-width: 640px) {
	.tnwt-ab-avail-widget {
		padding: 10px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav {
		gap: 4px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__btn,
	.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__reset {
		font-size: 12px;
		padding: 8px 10px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-avail-weeknav__label {
		width: 100%;
		margin-left: 0;
		text-align: center;
		order: -1;
	}
	.tnwt-ab-avail-widget .tnwt-ab-app-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-avail-matrix {
		border-spacing: 3px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-avail-matrix tbody th {
		min-width: 70px;
		padding: 8px 6px;
		font-size: 12px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-avail-cell {
		min-height: 60px;
		font-size: 26px;
	}

	/* Override list: stack each row as a card instead of a table row. */
	.tnwt-ab-avail-widget .tnwt-ab-override-table,
	.tnwt-ab-avail-widget .tnwt-ab-override-table tbody,
	.tnwt-ab-avail-widget .tnwt-ab-override-table tr,
	.tnwt-ab-avail-widget .tnwt-ab-override-table td {
		display: block;
		width: 100%;
	}
	.tnwt-ab-avail-widget .tnwt-ab-override-table thead { display: none; }
	.tnwt-ab-avail-widget .tnwt-ab-override-table tr {
		background: var(--tnwt-ab-surface);
		border: 1px solid var(--tnwt-ab-pale);
		border-radius: 8px;
		padding: 10px;
		margin-bottom: 10px;
	}
	.tnwt-ab-avail-widget .tnwt-ab-override-table td {
		padding: 5px 0;
		border: 0;
	}
	.tnwt-ab-avail-widget .tnwt-ab-override-table td input[type="date"] {
		font-size: 16px;
		padding: 6px;
		width: 100%;
	}
	.tnwt-ab-avail-widget .tnwt-ab-override-table td input[type="text"] {
		font-size: 15px;
		padding: 8px;
		width: 100%;
	}
	.tnwt-ab-avail-widget .tnwt-ab-override-table td input[type="checkbox"] {
		width: 22px;
		height: 22px;
		margin-right: 8px;
		vertical-align: middle;
	}
	.tnwt-ab-avail-widget .tnwt-ab-override-table td .button {
		width: 100%;
		font-size: 13px;
		padding: 10px;
		background: var(--tnwt-ab-unavailable);
		color: #fff;
	}
}

/* Mobile (< 768px): zone tabs accordion, days scroll horizontally */

@media (max-width: 768px) {
	.tnwt-ab-zone-tabs {
		display: flex;
		gap: 8px;
		margin-bottom: 12px;
		flex-wrap: wrap;
	}
	.tnwt-ab-zone-tabs__btn {
		background: var(--tnwt-ab-surface);
		border: 1px solid var(--tnwt-ab-accent);
		color: var(--tnwt-ab-primary);
		padding: 6px 12px;
		border-radius: 6px;
		cursor: pointer;
		font-size: 13px;
		font-weight: 500;
	}
	.tnwt-ab-zone-tabs__btn.is-active {
		background: var(--tnwt-ab-primary);
		color: #fff;
		border-color: var(--tnwt-ab-primary);
	}
	.tnwt-ab-zone-section.is-mobile-hidden { display: none; }

	.tnwt-ab-zone-grid {
		grid-template-columns: 80px repeat(7, 200px);
		overflow-x: auto;
	}

	.tnwt-ab-app-header {
		gap: 8px;
	}
	.tnwt-ab-app-title { font-size: 18px; }
}

/* N4 — Today/this-week at-a-glance status strip. Sits above the
   zone sections so it's the first thing dispatchers + setters read.
   Chips are color-coded but kept subtle to avoid competing with the
   board grid. */
.tnwt-ab-stats-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin-bottom: 10px;
	background: #fff;
	border: 1px solid #e0e3e8;
	border-radius: 6px;
	font-size: 12px;
}
.tnwt-ab-stats-strip__label {
	font-weight: 700;
	color: var(--tnwt-ab-primary, #0F4C81);
	margin-right: 4px;
}
.tnwt-ab-stats-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #f4f6f8;
	color: var(--tnwt-ab-text, #1f1f1f);
	border: 1px solid transparent;
}
.tnwt-ab-stats-chip strong {
	font-size: 13px;
	font-weight: 700;
}
.tnwt-ab-stats-chip.is-booked     { background: #e8f1fa; }
.tnwt-ab-stats-chip.is-confirmed  { background: #e8f5e9; color: #1b5e20; }
.tnwt-ab-stats-chip.is-unassigned { background: #fff4e5; color: #7c4a03; }
.tnwt-ab-stats-chip.is-overbook   { background: #fde8d6; color: #6b3a00; }
.tnwt-ab-stats-chip.is-priority   { background: #f3e5f5; color: #4a148c; border-color: #ce93d8; }
.tnwt-ab-stats-chip.is-reset      { background: #f3e5f5; color: #6a1b9a; }
.tnwt-ab-stats-chip.is-tech-off   { background: #fbe9e7; color: #b71c1c; border-color: #ef9a9a; }

/* N-Dispatch-A — Always-visible tech reassign dropdown on cells
   shown in single-day mode (Next Day Dispatch + Same Day tabs). A
   tiny select at the bottom of the cell; change to reassign without
   opening the editor. Visually unobtrusive at rest but clearly
   actionable on hover. */
.tnwt-ab-cell-quickreassign {
	margin-top: 4px;
	padding-top: 3px;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
	font-size: 11px;
	display: flex;
	align-items: center;
}
.tnwt-ab-cell-quickreassign__select {
	flex: 1;
	font-size: 11px;
	padding: 1px 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	max-width: 100%;
}
.tnwt-ab-cell-quickreassign__select:hover,
.tnwt-ab-cell-quickreassign__select:focus-visible {
	background: #fff;
	border-color: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-cell-quickreassign.is-saving .tnwt-ab-cell-quickreassign__select {
	opacity: 0.6;
}

/* F7 — Search match counter. Sits inline with the search input; subtle
   until "No matches", at which point it lights up red so the setter
   immediately knows the filter is hiding everything. */
.tnwt-ab-search-count {
	font-size: 11px;
	color: var(--tnwt-ab-text-muted, #5a6878);
	white-space: nowrap;
}
.tnwt-ab-search-count.is-zero {
	color: var(--tnwt-ab-unavailable, #c52929);
	font-weight: 600;
}

/* Front-end confirmation modal (F4 + reused by N-Dispatch-A swap
   confirmations). Mirrors the admin modal style so the UX is the
   same regardless of which surface the dialog comes from. */
.tnwt-ab-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 76, 129, 0.45);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: tnwt-ab-modal-fade-in 0.12s ease;
}
.tnwt-ab-modal {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	max-width: 440px;
	width: 100%;
	padding: 20px 22px;
	color: var(--tnwt-ab-text, #1f1f1f);
}
.tnwt-ab-modal__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-modal__message {
	margin: 0 0 16px;
	line-height: 1.45;
	font-size: 14px;
}
.tnwt-ab-modal__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.tnwt-ab-modal__btn {
	padding: 6px 14px;
	border-radius: 4px;
	border: 1px solid #c3c4c7;
	background: #fff;
	color: var(--tnwt-ab-text, #1f1f1f);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.tnwt-ab-modal__btn:hover { background: #f5f5f5; }
.tnwt-ab-modal__btn--primary {
	background: var(--tnwt-ab-primary, #0F4C81);
	border-color: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
}
.tnwt-ab-modal__btn--primary:hover { background: #0b3a63; border-color: #0b3a63; }
.tnwt-ab-modal__btn--destructive {
	background: #c52929;
	border-color: #c52929;
	color: #fff;
}
.tnwt-ab-modal__btn--destructive:hover { background: #a31f1f; border-color: #a31f1f; }
@keyframes tnwt-ab-modal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Color legend button + popover (U5) ---------------------------------
   A small "?" in the week nav opens a popover explaining every cell
   color, border, and overlay. Helps new setters and dispatchers
   self-onboard without asking. */
.tnwt-ab-legend-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--tnwt-ab-secondary, #5a6878);
	background: transparent;
	color: var(--tnwt-ab-secondary, #5a6878);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.tnwt-ab-legend-btn:hover,
.tnwt-ab-legend-btn:focus-visible {
	background: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
	border-color: var(--tnwt-ab-primary, #0F4C81);
}

.tnwt-ab-legend-popover {
	position: absolute;
	z-index: 99998;
	min-width: 320px;
	max-width: 380px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 76, 129, 0.18);
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--tnwt-ab-text, #1f1f1f);
}
.tnwt-ab-legend-popover__title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-legend-popover__subtitle {
	margin: 14px 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tnwt-ab-secondary, #5a6878);
}
.tnwt-ab-legend-popover__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tnwt-ab-legend-popover__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.tnwt-ab-legend-popover__text {
	flex: 1;
}
.tnwt-ab-legend-popover__hint {
	margin: 12px 0 0;
	font-size: 11px;
	color: var(--tnwt-ab-text-muted, #5a6878);
	font-style: italic;
}
.tnwt-ab-legend-swatch {
	display: inline-block;
	flex: 0 0 28px;
	width: 28px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.15);
	margin-top: 1px;
}
.tnwt-ab-legend-swatch.is-yellow     { background: var(--tnwt-ab-available,    #fff7c4); }
.tnwt-ab-legend-swatch.is-green      { background: var(--tnwt-ab-booked,       #c8e6c9); }
.tnwt-ab-legend-swatch.is-red        { background: var(--tnwt-ab-unavailable,  #ffcdd2); }
.tnwt-ab-legend-swatch.is-overbook   { background: var(--tnwt-ab-overbook,     #ffe0b2); }
.tnwt-ab-legend-swatch.is-unassigned { background: var(--tnwt-ab-unassigned,   #e1f5fe); }
.tnwt-ab-legend-swatch.is-priority   {
	background: #fff;
	box-shadow: inset 0 0 0 3px var(--tnwt-ab-priority_border, #ffffff), inset 0 0 0 4px #888;
}
.tnwt-ab-legend-swatch.is-reset      {
	background: #fff;
	box-shadow: inset 0 0 0 3px var(--tnwt-ab-reset_border, #9c27b0);
}
.tnwt-ab-legend-swatch.is-confirmed-mini {
	background: #e8f5e9;
	position: relative;
}
.tnwt-ab-legend-swatch.is-confirmed-mini::after {
	content: '✓';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tnwt-ab-confirmed_check, #4caf50);
	font-weight: 900;
	font-size: 14px;
}
.tnwt-ab-legend-swatch.is-locked {
	background: #fff;
	outline: 2px dashed var(--tnwt-ab-secondary, #5a6878);
	outline-offset: -3px;
}
.tnwt-ab-legend-swatch.is-pulse-mini {
	background: #fff;
	box-shadow: 0 0 0 3px rgba(127, 179, 213, 0.55);
}

/* =====================================================================
   v1.9.0 — Comms bundle visuals
   Bell, chat drawer, recently-viewed, my-day pill, sound toggle,
   holiday gray-out. The JS that injects these lives in board-comms.js.
   ===================================================================== */

/* Header icon buttons (bell, chat, recently-viewed, sound). Shared
   base; per-purpose modifiers below. The wrapper holds the badge
   absolutely so it sits in the corner of the face. */
.tnwt-ab-comms-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
}
.tnwt-ab-comms-btn__face {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.85);
	color: var(--tnwt-ab-primary, #0F4C81);
	cursor: pointer;
	transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tnwt-ab-comms-btn__face:hover,
.tnwt-ab-comms-btn__face:focus-visible {
	background: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(15, 76, 129, 0.18);
	outline: none;
}
.tnwt-ab-comms-btn__face:active { transform: translateY(0); }
.tnwt-ab-comms-icon {
	font-size: 17px;
	line-height: 1;
	display: inline-block;
}
.tnwt-ab-comms-btn__face.is-muted { opacity: 0.45; }

/* v1.9.4 — Font scale control. A−  [%]  A+ inline in the header.
   Per-setter via localStorage; affects only appointment-cell text. */
.tnwt-ab-fontsize {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	padding: 2px 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	margin-left: 6px;
}
.tnwt-ab-fontsize__btn {
	width: 26px !important;
	height: 26px !important;
	font-size: 12px !important;
	font-weight: 700;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.tnwt-ab-fontsize__btn:hover { background: var(--tnwt-ab-pale, #e8f1f8) !important; }
.tnwt-ab-fontsize__readout {
	font-size: 10px;
	color: var(--tnwt-ab-text-muted, #5a6878);
	font-weight: 700;
	min-width: 30px;
	text-align: center;
	cursor: help;
	user-select: none;
}

/* Badge — number bubble on top-right of the icon. */
.tnwt-ab-comms-badge {
	position: absolute;
	top: -3px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #c52929;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
	pointer-events: none;
}
.tnwt-ab-comms-badge.is-hidden { display: none; }

/* Pulse animation while there are unread items. Goes on the WRAPPER
   so the badge + icon scale together. Subtle, professional — not a
   distraction. */
@keyframes tnwt-ab-pulse-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(197, 41, 41, 0.45);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(197, 41, 41, 0);
	}
}
.tnwt-ab-comms-btn.is-pulse .tnwt-ab-comms-btn__face {
	animation: tnwt-ab-pulse-glow 1.6s ease-in-out infinite;
}
/* Bell-specific: a soft wiggle to draw the eye when there's news. */
@keyframes tnwt-ab-bell-wiggle {
	0%, 80%, 100% { transform: rotate(0deg); }
	85%           { transform: rotate(-15deg); }
	90%           { transform: rotate( 12deg); }
	95%           { transform: rotate( -6deg); }
}
.tnwt-ab-bell.is-pulse .tnwt-ab-comms-icon {
	animation: tnwt-ab-bell-wiggle 3s ease-in-out infinite;
	transform-origin: 50% 10%;
	display: inline-block;
}

/* ---------- Bell panel (notifications dropdown) ---------- */
.tnwt-ab-bell-panel,
.tnwt-ab-recent-panel {
	position: absolute;
	min-width: 320px;
	max-width: 380px;
	max-height: 480px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(15, 76, 129, 0.22);
	z-index: 99996;
	overflow: hidden;
	color: var(--tnwt-ab-text, #1f1f1f);
	font-size: 13px;
}
.tnwt-ab-bell-panel__header,
.tnwt-ab-recent-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	background: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.tnwt-ab-bell-panel__toggle {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	border-radius: 999px;
	padding: 2px 9px;
	cursor: pointer;
}
.tnwt-ab-bell-panel__toggle:hover { background: rgba(255, 255, 255, 0.28); }
.tnwt-ab-bell-panel__list,
.tnwt-ab-recent-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
}
.tnwt-ab-bell-panel__item {
	position: relative;
	padding: 12px 14px 12px 18px;
	border-bottom: 1px solid #eef0f3;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tnwt-ab-bell-panel__item:last-child { border-bottom: 0; }
.tnwt-ab-bell-panel__item::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: #5a6878;
}
.tnwt-ab-bell-panel__item--info::before      { background: #1976d2; }
.tnwt-ab-bell-panel__item--warning::before   { background: #f0a500; }
.tnwt-ab-bell-panel__item--important::before { background: #c52929; }
.tnwt-ab-bell-panel__item--mention::before   { background: #7b1fa2; }
.tnwt-ab-bell-panel__kind {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #5a6878;
}
.tnwt-ab-bell-panel__item--info    .tnwt-ab-bell-panel__kind { color: #1976d2; }
.tnwt-ab-bell-panel__item--warning .tnwt-ab-bell-panel__kind { color: #8a5b00; }
.tnwt-ab-bell-panel__item--important .tnwt-ab-bell-panel__kind { color: #c52929; }
.tnwt-ab-bell-panel__item--mention .tnwt-ab-bell-panel__kind { color: #7b1fa2; }
.tnwt-ab-bell-panel__body {
	font-size: 13px;
	line-height: 1.4;
	word-wrap: break-word;
}
.tnwt-ab-bell-panel__body a { color: var(--tnwt-ab-primary, #0F4C81); }
.tnwt-ab-bell-panel__meta {
	font-size: 11px;
	color: #5a6878;
}
.tnwt-ab-bell-panel__action {
	align-self: flex-start;
	margin-top: 4px;
	background: #f1f3f6;
	border: 1px solid #d6d9de;
	color: var(--tnwt-ab-primary, #0F4C81);
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
	padding: 3px 10px;
	cursor: pointer;
}
.tnwt-ab-bell-panel__action:hover { background: var(--tnwt-ab-primary, #0F4C81); color: #fff; }
.tnwt-ab-bell-panel__empty {
	margin: 0;
	padding: 28px 16px;
	text-align: center;
	color: #5a6878;
	font-size: 13px;
}

/* ---------- Recently-viewed panel ---------- */
.tnwt-ab-recent-panel__empty {
	margin: 0;
	padding: 24px 14px;
	text-align: center;
	color: #5a6878;
	font-size: 12px;
	font-style: italic;
}
.tnwt-ab-recent-panel__item {
	border-bottom: 1px solid #eef0f3;
}
.tnwt-ab-recent-panel__item:last-child { border-bottom: 0; }
.tnwt-ab-recent-panel__btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 13px;
	color: var(--tnwt-ab-text, #1f1f1f);
}
.tnwt-ab-recent-panel__btn:hover { background: #f5f8fb; }
.tnwt-ab-recent-panel__sub { color: #5a6878; font-size: 12px; }
.tnwt-ab-recent-panel__time {
	margin-left: auto;
	color: #5a6878;
	font-size: 11px;
	white-space: nowrap;
}

/* ---------- Chat right-side drawer (was modal) ---------- */
.tnwt-ab-chat-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 76, 129, 0.18);
	z-index: 100001;
	animation: tnwt-ab-modal-fade-in 0.16s ease;
}
.tnwt-ab-chat-modal {
	position: fixed;
	top: 0;
	right: 0;
	/* v1.9.6 — leave 30px of clearance at the bottom so the drawer +
	   its Send button sit above the browser's horizontal scrollbar
	   (and iOS Safari's gesture bar). Using bottom+top instead of
	   height: 100vh makes this resilient to admin-bar offsets. */
	bottom: 30px;
	right: 0;
	width: 440px;
	max-width: 100vw;
	background: #fff;
	box-shadow: -8px 0 32px rgba(15, 76, 129, 0.22);
	display: flex;
	flex-direction: column;
	animation: tnwt-ab-drawer-slide-in 0.2s ease;
}
@keyframes tnwt-ab-drawer-slide-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
.admin-bar .tnwt-ab-chat-modal { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .tnwt-ab-chat-modal { top: 46px; }
}
.tnwt-ab-chat-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
}
.tnwt-ab-chat-modal__close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	border-radius: 4px;
}
.tnwt-ab-chat-modal__close:hover { background: rgba(255, 255, 255, 0.15); }
.tnwt-ab-chat-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	background: #f6f7f9;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tnwt-ab-chat-modal__footer {
	display: flex;
	gap: 8px;
	/* Generous bottom padding so the input + Send button clear any
	   browser scrollbars or iOS safe-area inset at the bottom of the
	   drawer. Was clipped behind the bottom scrollbar in v1.9.0. */
	padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #e5e8ed;
	background: #fff;
	flex-shrink: 0;
}
.tnwt-ab-chat-modal__input {
	flex: 1;
	resize: vertical;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	min-height: 38px;
	max-height: 200px;
}
.tnwt-ab-chat-modal__input:focus {
	outline: none;
	border-color: var(--tnwt-ab-primary, #0F4C81);
	box-shadow: 0 0 0 2px rgba(15, 76, 129, 0.2);
}
.tnwt-ab-chat-modal__send {
	align-self: flex-end;
	background: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.tnwt-ab-chat-modal__send:hover { background: #0b3a63; }
.tnwt-ab-chat-modal__send:disabled { opacity: 0.5; cursor: not-allowed; }

.tnwt-ab-chat-date-header {
	text-align: center;
	margin: 12px 0 6px;
	font-size: 11px;
	font-weight: 700;
	color: #5a6878;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: relative;
}
.tnwt-ab-chat-date-header::before,
.tnwt-ab-chat-date-header::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 30%;
	height: 1px;
	background: #d6d9de;
}
.tnwt-ab-chat-date-header::before { left: 0; }
.tnwt-ab-chat-date-header::after  { right: 0; }

.tnwt-ab-chat-msg {
	display: flex;
	gap: 8px;
	margin: 4px 0;
}
.tnwt-ab-chat-msg__avatar {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tnwt-ab-secondary, #5a6878);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.02em;
	background-size: cover;
	background-position: center;
}
.tnwt-ab-chat-msg__bubble {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid #e5e8ed;
	border-radius: 10px;
	padding: 8px 12px;
}
.tnwt-ab-chat-msg.is-mine .tnwt-ab-chat-msg__bubble {
	background: #e8f1fa;
	border-color: #c5dcef;
}
.tnwt-ab-chat-msg.is-admin .tnwt-ab-chat-msg__avatar {
	background: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-chat-msg__meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 11px;
	color: #5a6878;
	margin-bottom: 3px;
	flex-wrap: wrap;
}
.tnwt-ab-chat-msg__meta strong {
	color: var(--tnwt-ab-text, #1f1f1f);
	font-size: 12px;
}
.tnwt-ab-chat-msg__meta time { cursor: help; }
.tnwt-ab-chat-msg__adminbadge {
	background: var(--tnwt-ab-primary, #0F4C81);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 3px;
}
.tnwt-ab-chat-msg__edited {
	font-size: 10px;
	font-style: italic;
	color: #8a93a0;
}
.tnwt-ab-chat-msg__text {
	font-size: 13px;
	line-height: 1.45;
	word-wrap: break-word;
	color: var(--tnwt-ab-text, #1f1f1f);
}
.tnwt-ab-chat-msg__text a {
	color: var(--tnwt-ab-primary, #0F4C81);
	text-decoration: underline;
}
.tnwt-ab-chat-msg__text .tnwt-ab-mention {
	background: rgba(123, 31, 162, 0.15);
	color: #4a148c;
	font-weight: 600;
	padding: 0 3px;
	border-radius: 3px;
}
.tnwt-ab-chat-msg__text .tnwt-ab-mention--mine {
	background: rgba(255, 193, 7, 0.45);
	color: #5d4400;
}
.tnwt-ab-chat-msg.is-deleted .tnwt-ab-chat-msg__bubble {
	background: #f5f5f5;
	border-style: dashed;
}
.tnwt-ab-chat-msg__deleted { color: #8a93a0; font-size: 12px; }
.tnwt-ab-chat-msg__actions {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.tnwt-ab-chat-msg__edit,
.tnwt-ab-chat-msg__delete,
.tnwt-ab-chat-msg__save,
.tnwt-ab-chat-msg__cancel {
	font-size: 11px;
	background: transparent;
	border: 0;
	color: #5a6878;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 3px;
}
.tnwt-ab-chat-msg__edit:hover,
.tnwt-ab-chat-msg__save:hover { color: var(--tnwt-ab-primary, #0F4C81); background: #eef3f8; }
.tnwt-ab-chat-msg__delete:hover { color: #c52929; background: #fbe9e7; }
.tnwt-ab-chat-msg__editor {
	width: 100%;
	min-height: 40px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
}

/* ---------- My-day stats pill (setter only) ---------- */
.tnwt-ab-myday {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 12px;
	margin: 6px 0 10px;
	background: linear-gradient(90deg, #f4f9ff 0%, #fff 100%);
	border: 1px solid #d6e3f0;
	border-radius: 8px;
	font-size: 12px;
}
.tnwt-ab-myday__label {
	font-weight: 700;
	color: var(--tnwt-ab-primary, #0F4C81);
	margin-right: 2px;
}
.tnwt-ab-myday__chip {
	background: #fff;
	color: var(--tnwt-ab-text, #1f1f1f);
	border: 1px solid #d6e3f0;
	border-radius: 999px;
	padding: 2px 10px;
}

/* ---------- Holiday-marked cell ---------- */
.tnwt-ab-cell.is-holiday {
	background-image:
		repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 6px, transparent 6px 14px);
	position: relative;
}
.tnwt-ab-cell.is-holiday::after {
	content: 'CLOSED';
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(0, 0, 0, 0.55);
	background: rgba(255, 255, 255, 0.75);
	padding: 0 5px;
	border-radius: 3px;
	pointer-events: none;
}

/* G — city → Google Maps link. Inherits the existing city-text
   styling so it doesn't stand out as a "link" except on hover. */
.tnwt-ab-cell-city--maps {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.tnwt-ab-cell-city--maps:hover {
	text-decoration: underline;
	color: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-cell.is-green .tnwt-ab-cell-city--maps:hover,
.tnwt-ab-cell.is-red .tnwt-ab-cell-city--maps:hover {
	color: #fff;
}

/* =====================================================================
   I — Theme variants. Applied via data-tnwt-ab-theme on <html>.
   Default light theme uses the existing styles. Dark + contrast
   override surface, text, and panel colors via CSS variables.
   ===================================================================== */

/* Dark theme — easy on the eyes for evening shifts. */
html[data-tnwt-ab-theme="dark"] .tnwt-ab-app {
	color-scheme: dark;
}
html[data-tnwt-ab-theme="dark"] {
	--tnwt-ab-surface:   #1d2330;
	--tnwt-ab-text:      #e6e9ef;
	--tnwt-ab-text-muted: #95a0b2;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-app {
	background: #161b25;
	color: #e6e9ef;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-app-header { background: #1d2330; border-bottom: 1px solid #2b3245; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-zone-section { background: #1d2330; border-color: #2b3245; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-zone-heading { color: #e6e9ef; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-day-header { background: #242b3a; color: #b8c1d3; border-color: #2b3245; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-slot-label { background: #242b3a; color: #95a0b2; border-color: #2b3245; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-cell { border-color: #2b3245; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-cell.is-yellow {
	background: #3d3416; color: #f1e2a0; border-color: #5a4a1f;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-stats-strip { background: #1d2330; border-color: #2b3245; color: #e6e9ef; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-week-nav__btn,
html[data-tnwt-ab-theme="dark"] .tnwt-ab-zone-tabs__btn {
	background: #242b3a; color: #e6e9ef; border-color: #2b3245;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-quick-search {
	background: #242b3a; color: #e6e9ef; border-color: #2b3245;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-week-nav__label { color: #b8c1d3; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-refresh-indicator { color: #95a0b2; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-bell-panel,
html[data-tnwt-ab-theme="dark"] .tnwt-ab-recent-panel,
html[data-tnwt-ab-theme="dark"] .tnwt-ab-legend-popover,
html[data-tnwt-ab-theme="dark"] .tnwt-ab-modal {
	background: #242b3a; color: #e6e9ef; border-color: #2b3245;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-bell-panel__item { border-bottom-color: #2b3245; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-chat-modal { background: #161b25; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-chat-modal__body { background: #1d2330; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-chat-msg__bubble {
	background: #2b3245; border-color: #38415a; color: #e6e9ef;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-chat-msg.is-mine .tnwt-ab-chat-msg__bubble {
	background: #2c4566; border-color: #3a5b85;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-chat-msg__text { color: #e6e9ef; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-myday {
	background: linear-gradient(90deg, #1d2330 0%, #242b3a 100%);
	border-color: #2b3245;
}
html[data-tnwt-ab-theme="dark"] .tnwt-ab-myday__chip { background: #2b3245; border-color: #38415a; color: #e6e9ef; }
html[data-tnwt-ab-theme="dark"] .tnwt-ab-comms-btn__face { background: #242b3a; color: #e6e9ef; }

/* High-contrast theme — large, crisp, no decorative gradients. */
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-app {
	background: #000;
	color: #fff;
}
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-app-header { background: #000; border-bottom: 2px solid #fff; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-zone-section { background: #000; border: 2px solid #fff; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-zone-heading { color: #fff; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-day-header { background: #000; color: #fff; border: 2px solid #fff; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-slot-label { background: #000; color: #ffeb3b; border: 2px solid #ffeb3b; font-weight: 900; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-cell {
	border: 2px solid #fff; background: #000; color: #fff;
}
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-cell.is-yellow { background: #ffeb3b; color: #000; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-cell.is-green  { background: #00c853; color: #000; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-cell.is-red    { background: #d50000; color: #fff; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-cell.is-overbook { background: #ff9800; color: #000; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-cell.is-unassigned { background: #4fc3f7; color: #000; }
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-week-nav__btn,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-zone-tabs__btn,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-comms-btn__face {
	background: #000; color: #fff; border: 2px solid #fff;
}
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-quick-search {
	background: #000; color: #fff; border: 2px solid #fff;
}
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-stats-strip,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-bell-panel,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-recent-panel,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-modal,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-chat-modal,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-chat-modal__body {
	background: #000; color: #fff; border-color: #fff;
}
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-chat-msg__bubble {
	background: #000; border: 2px solid #fff; color: #fff;
}
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-chat-msg.is-mine .tnwt-ab-chat-msg__bubble {
	background: #ffeb3b; color: #000; border-color: #ffeb3b;
}

/* =====================================================================
   v1.9.0 — Team Balloon Pop Goal — progress bar + celebration overlay
   ===================================================================== */

.tnwt-ab-goal-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	margin: 0 0 10px;
	background: linear-gradient(90deg, #fff8e7 0%, #fff 100%);
	border: 1px solid #f0c97d;
	border-radius: 8px;
	font-size: 13px;
}
.tnwt-ab-goal-bar__icon {
	font-size: 20px;
	line-height: 1;
}
.tnwt-ab-goal-bar__label {
	flex-shrink: 0;
	color: var(--tnwt-ab-text, #1f1f1f);
}
.tnwt-ab-goal-bar__label strong { font-size: 13px; }
.tnwt-ab-goal-bar__sub {
	color: #5a6878;
	font-size: 12px;
	font-weight: 500;
}
.tnwt-ab-goal-bar__track {
	flex: 1;
	height: 12px;
	background: rgba(0,0,0,0.08);
	border-radius: 999px;
	overflow: hidden;
}
.tnwt-ab-goal-bar__fill {
	height: 100%;
	background: linear-gradient(90deg, #0F4C81 0%, #7FB3D5 50%, #f0a500 80%, #c52929 100%);
	background-size: 200% 100%;
	animation: tnwt-ab-goal-shimmer 4s linear infinite;
	transition: width 0.5s ease;
	box-shadow: 0 0 8px rgba(15, 76, 129, 0.3);
}
@keyframes tnwt-ab-goal-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* Balloon Pop celebration stage — full-screen overlay. */
.tnwt-ab-balloon-stage {
	position: fixed;
	inset: 0;
	z-index: 100100;
	pointer-events: none;
	overflow: hidden;
}
.tnwt-ab-balloon {
	position: absolute;
	bottom: -80px;
	width: 50px;
	height: 60px;
	border-radius: 50%;
	box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.12);
	animation: tnwt-ab-balloon-rise 4s linear forwards;
}
.tnwt-ab-balloon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 50px;
	background: rgba(0,0,0,0.4);
	transform: translateX(-50%);
}
@keyframes tnwt-ab-balloon-rise {
	0%   { transform: translateY(0)    rotate(-3deg); opacity: 1; }
	90%  { opacity: 1; }
	100% { transform: translateY(-110vh) rotate(8deg); opacity: 0; }
}
.tnwt-ab-confetti {
	position: absolute;
	top: -16px;
	width: 8px;
	height: 14px;
	border-radius: 2px;
	animation: tnwt-ab-confetti-fall 3s linear forwards;
}
@keyframes tnwt-ab-confetti-fall {
	0%   { transform: translateY(0) rotate(0); opacity: 1; }
	100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.tnwt-ab-balloon-banner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	background: #fff;
	padding: 24px 36px;
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
	text-align: center;
	animation: tnwt-ab-banner-pop 0.4s ease forwards 0.2s;
	border: 4px solid var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-balloon-banner h2 {
	margin: 8px 0;
	font-size: 28px;
	color: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-balloon-banner p {
	margin: 0;
	font-size: 14px;
	color: #5a6878;
}
.tnwt-ab-balloon-banner__icon {
	font-size: 48px;
}
.tnwt-ab-balloon-banner__name {
	font-size: 22px;
	color: var(--tnwt-ab-primary, #0F4C81);
	font-weight: 800;
	margin: 4px 0 2px;
}
.tnwt-ab-balloon-banner__sub {
	font-size: 12px !important;
	color: #5a6878 !important;
	font-style: italic;
}
@keyframes tnwt-ab-banner-pop {
	0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
	60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* =====================================================================
   v1.9.0 — Chat reactions + GIF search + system messages
   ===================================================================== */

.tnwt-ab-chat-msg__reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.tnwt-ab-chat-react,
.tnwt-ab-chat-react-add {
	background: #f4f6f9;
	border: 1px solid #d6dbe3;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11px;
	line-height: 16px;
	cursor: pointer;
	color: var(--tnwt-ab-text, #1f1f1f);
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.tnwt-ab-chat-react.is-mine {
	background: rgba(15, 76, 129, 0.12);
	border-color: var(--tnwt-ab-primary, #0F4C81);
	color: var(--tnwt-ab-primary, #0F4C81);
}
.tnwt-ab-chat-react:hover { background: #e3e8ef; }
.tnwt-ab-chat-react.is-mine:hover { background: rgba(15, 76, 129, 0.2); }
.tnwt-ab-chat-react-add {
	color: #5a6878;
	font-weight: 700;
	padding: 2px 7px;
	opacity: 0.4;
	transition: opacity 0.12s;
}
.tnwt-ab-chat-msg:hover .tnwt-ab-chat-react-add,
.tnwt-ab-chat-react-add:focus-visible { opacity: 1; }
.tnwt-ab-chat-react__count { font-weight: 700; }

.tnwt-ab-chat-react-palette {
	position: absolute;
	display: flex;
	gap: 4px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid #d6dbe3;
	border-radius: 24px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	z-index: 100002;
}
.tnwt-ab-chat-react-palette__btn {
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	transition: transform 0.1s;
}
.tnwt-ab-chat-react-palette__btn:hover {
	transform: scale(1.25);
	background: #f1f3f6;
}

/* Inline GIF rendered from a Tenor URL pasted in chat. */
.tnwt-ab-chat-gif {
	display: block;
	max-width: 100%;
	max-height: 200px;
	border-radius: 6px;
	margin: 4px 0;
	background: #f1f3f6;
}

/* GIF search panel (anchored above the chat input). */
.tnwt-ab-chat-gif-btn {
	background: var(--tnwt-ab-accent, #7FB3D5);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-end;
	height: 38px;
}
.tnwt-ab-chat-gif-btn:hover { background: var(--tnwt-ab-primary, #0F4C81); }
.tnwt-ab-chat-gif-panel {
	position: fixed;
	width: 400px;
	max-width: calc(100vw - 20px);
	max-height: 60vh;
	background: #fff;
	border: 1px solid #d6dbe3;
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
	padding: 10px;
	display: flex;
	flex-direction: column;
	z-index: 100003;
}
.tnwt-ab-chat-gif-panel__search {
	flex-shrink: 0;
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	margin-bottom: 8px;
}
.tnwt-ab-chat-gif-panel__grid {
	flex: 1;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
}
.tnwt-ab-chat-gif-panel__item {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	background: #f1f3f6;
	transition: transform 0.1s, box-shadow 0.1s;
}
.tnwt-ab-chat-gif-panel__item:hover {
	transform: scale(1.04);
	box-shadow: 0 4px 12px rgba(15, 76, 129, 0.25);
}
.tnwt-ab-chat-gif-panel__empty,
.tnwt-ab-chat-gif-panel__loading {
	grid-column: 1 / -1;
	text-align: center;
	color: #5a6878;
	font-size: 12px;
	padding: 24px 8px;
	margin: 0;
}
.tnwt-ab-chat-gif-panel__note {
	margin: 8px 0 0;
	font-size: 10px;
	color: #5a6878;
	text-align: center;
	font-style: italic;
}

/* System (activity-feed) chat messages — visually quieter so they
   don't shout over real conversation. */
.tnwt-ab-chat-msg.is-system .tnwt-ab-chat-msg__avatar {
	background: #5a6878;
	font-size: 14px;
}
.tnwt-ab-chat-msg.is-system .tnwt-ab-chat-msg__bubble {
	background: #f4f6f9;
	border-style: dashed;
	border-color: #c3c8d2;
}
.tnwt-ab-chat-msg.is-system .tnwt-ab-chat-msg__text {
	font-size: 12px;
	font-style: italic;
	color: #5a6878;
}

/* Logo plate — wrap the logo in a subtle white rounded box on
   dark/contrast themes so the transparent PNG always reads cleanly.
   Light theme leaves the logo untouched. */
html[data-tnwt-ab-theme="dark"] .tnwt-ab-app-logo,
html[data-tnwt-ab-theme="contrast"] .tnwt-ab-app-logo {
	background: #fff;
	padding: 4px;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}