/* Per-tooth try-in decisions.
 *
 * Only the bits Tailwind utilities cannot express cleanly live here: the FDI
 * grid, the bridge connector between adjacent teeth of one piece, and three
 * shorthand classes the panel repeats on every row. Everything else in
 * components/try_in_teeth.html stays as utilities, matching the rest of the app.
 *
 * The palette deliberately reuses the same four families as the status chips
 * elsewhere in the order page — amber = being prepared, blue = with the doctor,
 * green = approved, rose = going back — so the map needs no legend.
 */

/* ── shorthands ─────────────────────────────────────────────────────────── */
.ls-tit-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: 9999px;
	border-width: 1px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.ls-tit-tag {
	display: inline-flex;
	align-items: center;
	padding: 1px 5px;
	border-radius: 4px;
	border-width: 1px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ls-tit-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}
.ls-tit-btn:disabled { opacity: .55; cursor: not-allowed; }
.ls-tit-btn:focus-visible { outline: 2px solid #7a1726; outline-offset: 2px; }

.ls-tit-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	color: #7a1726;
	cursor: pointer;
	transition: opacity .18s ease;
}
.ls-tit-link:hover { opacity: .7; }
.ls-tit-link:focus-visible { outline: 2px solid #7a1726; outline-offset: 2px; border-radius: 4px; }

/* ── the FDI map ────────────────────────────────────────────────────────── */
.ls-tit-map {
	overflow-x: auto;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
	/* An FDI chart is always drawn with the patient's right on the viewer's left,
	   in every language. Without this, the Arabic RTL page mirrors the arches and
	   the map silently reports the wrong side of the mouth — and the bridge
	   connector, which is anchored `right`, points the wrong way. */
	direction: ltr;
}

.ls-tit-jaw {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #a3a3a3;
	margin: 2px 0;
}

.ls-tit-row {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: max-content;
}
/* The two arches are one block: a gap between the rows would break the
   connector on a bridge that crosses the midline vertically — it does not, but
   the halves must still read as one mouth. */
.ls-tit-row + .ls-tit-row { margin-top: 3px; }

.ls-tit-gap { display: inline-block; width: 10px; flex: 0 0 10px; }

.ls-tit-cell {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #d4d4d4;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: default;
	transition: transform .15s ease, box-shadow .15s ease;
}

/* Teeth that are part of this try-in. */
.ls-tit-cell.on { cursor: pointer; }
.ls-tit-cell.on:hover { transform: translateY(-1px); }
.ls-tit-cell.st-pending  { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.ls-tit-cell.st-sent     { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.ls-tit-cell.st-approved { background: #dcfce7; border-color: #86efac; color: #15803d; }
.ls-tit-cell.st-rejected { background: #ffe4e6; border-color: #fda4af; color: #be123c; }
/* Two pieces cover this tooth and disagree — neither colour would be true. */
.ls-tit-cell.st-mixed {
	background: repeating-linear-gradient(135deg, #dcfce7 0 4px, #ffe4e6 4px 8px);
	border-color: #cbd5e1;
	color: #475569;
}

.ls-tit-cell.sel {
	box-shadow: 0 0 0 2px #7a1726;
	transform: translateY(-1px);
}
.ls-tit-cell:focus-visible { outline: 2px solid #7a1726; outline-offset: 1px; }

/* Bridge connector: a bar bridging the 2px gap to the next cell, drawn only
   between two teeth that belong to the same piece. */
.ls-tit-cell.link-right::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -3px;
	width: 4px;
	height: 2px;
	transform: translateY(-50%);
	background: currentColor;
	opacity: .55;
}

.ls-tit-piece.sel { border-color: #7a1726; background: #fdf5f6; }

@media (prefers-reduced-motion: reduce) {
	.ls-tit-cell, .ls-tit-btn, .ls-tit-link { transition: none; }
	.ls-tit-cell.on:hover, .ls-tit-cell.sel { transform: none; }
}