/* Dual case tracks — the try-in / production switcher on the order page.
 *
 * Written as plain CSS rather than Tailwind utilities because the two tab
 * chips are the one place in the order header where BOTH percentages have to
 * stay readable at once: the chip is a control, a label and a progress bar in
 * the same box, and expressing that in utilities made the markup unreadable.
 *
 * Palette follows the app: production is the primary navy (#173F5A),
 * try-in is violet — the colour the Try-In tab and badges already use, so a
 * reader who has learned "violet = try-in" anywhere else is not re-taught.
 */

.ot-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

/* A case whose approved try-in lines have spawned their own jobs shows a third
 * chip. The template adds this class rather than the CSS counting children, so
 * the layout can be reasoned about from the markup alone. */
.ot-tabs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ...and a case that was try-in from the start, with nothing approved yet,
 * shows one: there is no production work to put a chip on. */
.ot-tabs-1 { grid-template-columns: minmax(0, 1fr); }
/* Four chips: a try-in case that also came back for a remake. */
.ot-tabs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ot-tab {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid #e5e5e5;
	border-radius: 0.875rem;
	background: #fff;
	text-align: start;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.ot-tab:hover { border-color: #d4d4d4; background: #fafafa; }

.ot-tab:focus-visible {
	outline: 2px solid #173F5A;
	outline-offset: 2px;
}

/* The selected track is marked by a tinted surface AND a heavier border, not
 * by colour alone — the same card is read on greyscale phone screenshots in
 * the lab. */
.ot-tab.is-active { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05); }
.ot-tab-tryin.is-active { border-color: #a78bfa; background: #faf7ff; }
.ot-tab-prod.is-active  { border-color: #7FB3CC; background: #EEF5F9; }
/* Emerald = approved, everywhere in the app; the approved-try-in track keeps
 * that association. */
.ot-tab-final.is-active { border-color: #6ee7b7; background: #f2fdf8; }
/* Rose = remake, the colour of the Remake button that opened it. */
.ot-tab-remake.is-active { border-color: #fda4af; background: #fff5f6; }

.ot-tab-head {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
}

.ot-tab-icon { font-size: 10px; color: #a3a3a3; flex-shrink: 0; }
.ot-tab-tryin.is-active .ot-tab-icon { color: #7c3aed; }
.ot-tab-prod.is-active  .ot-tab-icon { color: #173F5A; }
.ot-tab-final.is-active .ot-tab-icon { color: #047857; }
.ot-tab-remake.is-active .ot-tab-icon { color: #be123c; }

.ot-tab-name {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #404040;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ot-tab-units {
	font-size: 10px;
	font-weight: 600;
	color: #a3a3a3;
	white-space: nowrap;
}

/* Pushed to the far end so the two chips' percentages line up with each other
 * and can be compared without reading the labels. */
.ot-tab-pct {
	margin-inline-start: auto;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #171717;
	white-space: nowrap;
}

.ot-tab-state {
	font-size: 10.5px;
	font-weight: 600;
	color: #737373;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1.2;
}

.ot-tab-iter { color: #a3a3a3; font-weight: 500; }

.ot-bar {
	height: 5px;
	border-radius: 999px;
	background: #ededed;
	overflow: hidden;
}

.ot-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.ot-bar-tryin { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.ot-bar-prod  { background: linear-gradient(90deg, #173F5A, #4C8FAE); }
.ot-bar-final { background: linear-gradient(90deg, #059669, #34d399); }
.ot-bar-remake { background: linear-gradient(90deg, #e11d48, #fb7185); }

/* A zero-width bar is invisible, which reads as "no bar" rather than "0%".
 * A hairline stub says the track exists and has not moved. */
.ot-bar-fill[style*="width: 0%"] {
	width: 3px !important;
	background: #d4d4d4;
}

.ot-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	border: 1px solid;
	font-size: 10.5px;
	font-weight: 600;
	white-space: nowrap;
}

.ot-chip strong { font-weight: 800; font-variant-numeric: tabular-nums; }

.ot-chip-neutral { background: #fafafa; color: #737373; border-color: #e5e5e5; }
.ot-chip-amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ot-chip-sky     { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.ot-chip-rose    { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.ot-chip-violet  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ot-chip-emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.ot-connector { transition: width .7s cubic-bezier(.4, 0, .2, 1); }

/* ── Track scoping ────────────────────────────────────────────────────────
 * The open chip decides which half of the case the Overview describes. Hidden
 * with display:none rather than opacity so the hidden half is not read out by
 * a screen reader, not tabbed into, and not caught by Ctrl-F — the reader asked
 * for one track and gets exactly it.
 */
.ot-out-of-scope { display: none !important; }

/* A tooth that belongs to the other track. Hiding it would break the arch, so
 * it drops back to the same look as a tooth with no job at all — which is what
 * it is, for the track being read. */
.ot-tooth.ot-dim {
	border-color: #e5e5e5 !important;
	background: rgba(250, 250, 250, .3) !important;
	opacity: .4;
	box-shadow: none !important;
}
.ot-tooth.ot-dim .ot-tooth-num { color: #a3a3a3 !important; }

/* ── Back / Next ──────────────────────────────────────────────────────────
 * One control pair, used under both timelines, so moving the try-in half and
 * moving the production half are visibly the same gesture.
 */
.ot-steps {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 0.875rem;
	border-top: 1px solid #f0f0f0;
	flex-wrap: wrap;
}

.ot-step {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #e5e5e5;
	border-radius: 0.625rem;
	background: #fff;
	color: #404040;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ot-step:hover:not(:disabled) { background: #fafafa; border-color: #d4d4d4; }
.ot-step:focus-visible { outline: 2px solid #173F5A; outline-offset: 2px; }

/* A disabled step is not a dead end to be discovered by clicking — every one
 * of them carries a title saying whose move it is. */
.ot-step:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* The forward move is the common one and is tinted with its own track's
 * colour, so the two panels stay tellable apart at a glance. */
.ot-step-primary { margin-inline-start: auto; }
.ot-step-primary.ot-step-production:not(:disabled) {
	background: #173F5A; border-color: #173F5A; color: #fff;
}
.ot-step-primary.ot-step-production:not(:disabled):hover { background: #122F44; border-color: #122F44; }
.ot-step-primary.ot-step-try_in:not(:disabled) {
	background: #7c3aed; border-color: #7c3aed; color: #fff;
}
.ot-step-primary.ot-step-try_in:not(:disabled):hover { background: #6d28d9; border-color: #6d28d9; }
.ot-step-primary.ot-step-final:not(:disabled) {
	background: #059669; border-color: #059669; color: #fff;
}
.ot-step-primary.ot-step-final:not(:disabled):hover { background: #047857; border-color: #047857; }
.ot-step-primary.ot-step-remake:not(:disabled) {
	background: #e11d48; border-color: #e11d48; color: #fff;
}
.ot-step-primary.ot-step-remake:not(:disabled):hover { background: #be123c; border-color: #be123c; }

/* One final-restoration line = one card. The Back/Next pair inside it reuses
 * .ot-steps but sits tighter, because a case can carry several lines. */
.ot-final-line {
	border: 1px solid #e5e5e5;
	border-radius: 0.875rem;
	background: #fff;
	padding: 0.875rem 1rem;
}
.ot-final-line + .ot-final-line { margin-top: 0.75rem; }
.ot-final-line .ot-steps { margin-top: 0.875rem; padding-top: 0.75rem; }

.ot-step-sub {
	font-weight: 600;
	opacity: .85;
	margin-inline-start: 0.3rem;
}

.ot-step-hint {
	font-size: 11px;
	font-weight: 600;
	color: #a3a3a3;
	flex: 1 1 auto;
	min-width: 0;
}

/* Forward is not "left" in Arabic. The arrows are the only glyphs here that
 * carry direction, so they are the only ones flipped. */
[dir="rtl"] .ot-step-arrow { transform: scaleX(-1); }

@media (max-width: 420px) {
	.ot-steps { gap: 0.375rem; }
	.ot-step-hint { flex-basis: 100%; order: 3; }
}

@media (max-width: 640px) {
	.ot-tabs-3,
	.ot-tabs-4 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
	.ot-tabs { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ot-bar-fill,
	.ot-connector,
	.ot-tab { transition: none; }
}