/**
 * CTL Inventory — internal screens.
 * Visual language taken from Inventory-Prototype-v4.html.
 */

.ctli {
	--navy: #0f2942;
	--navy2: #17385c;
	--teal: #1f9e8f;
	--teal-d: #178074;
	--card: #fff;
	--line: #e3e8ef;
	--ink: #1c2733;
	--muted: #66788c;
	--good: #1f9e8f;
	--good-bg: #e6f6f3;
	--print: #c6551f;
	--print-bg: #fbeee6;
	--print-line: #f0d9c8;
	--danger: #b3261e;
	--shadow: 0 1px 3px rgba( 16, 40, 66, 0.08 ), 0 4px 16px rgba( 16, 40, 66, 0.06 );

	color: var( --ink );
	max-width: 1120px;
}

.ctli h1 {
	font-size: 22px;
	margin: 0 0 3px;
	padding: 0;
}

.ctli .ctli-sub {
	color: var( --muted );
	font-size: 14px;
	margin: 0 0 20px;
}

.ctli .ctli-back {
	color: var( --muted );
	font-size: 13px;
	text-decoration: none;
	display: inline-block;
	margin: 6px 0 10px;
}

/* Cards ------------------------------------------------------------- */

.ctli .ctli-card {
	background: var( --card );
	border: 1px solid var( --line );
	border-radius: 14px;
	box-shadow: var( --shadow );
	padding: 20px;
	margin-bottom: 18px;
}

.ctli .ctli-card h2 {
	font-size: 15px;
	margin: 0 0 14px;
	padding: 0;
}

.ctli .ctli-card h3 {
	font-size: 14px;
	margin: 18px 0 8px;
}

.ctli .ctli-cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.ctli .ctli-cardhead h2 {
	margin: 0;
}

.ctli .ctli-toprint {
	background: var( --print-bg );
	border-color: var( --print-line );
}

.ctli .ctli-dangerzone {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Stats -------------------------------------------------------------- */

.ctli .ctli-banner {
	display: flex;
	gap: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.ctli .ctli-stat {
	flex: 1;
	min-width: 150px;
	border-radius: 13px;
	padding: 16px 18px;
	border: 1px solid var( --line );
	background: #fff;
	box-shadow: var( --shadow );
}

.ctli .ctli-stat .lab {
	font-size: 12px;
	color: var( --muted );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.ctli .ctli-stat .big {
	font-size: 26px;
	font-weight: 800;
	margin-top: 4px;
}

.ctli .ctli-stat.ready {
	background: var( --good-bg );
	border-color: #bfe6de;
}

.ctli .ctli-stat.ready .big {
	color: #12796c;
}

.ctli .ctli-stat.print {
	background: var( --print-bg );
	border-color: var( --print-line );
}

.ctli .ctli-stat.print .big,
.ctli .ctli-stat.warn .big {
	color: var( --print );
}

/* Buttons ------------------------------------------------------------ */

.ctli .ctli-btn {
	background: var( --teal );
	color: #fff;
	border: 0;
	padding: 11px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
}

.ctli .ctli-btn:hover {
	background: var( --teal-d );
	color: #fff;
}

.ctli .ctli-btn.sm {
	padding: 7px 13px;
	font-size: 13px;
}

.ctli .ctli-btn.grey {
	background: #eef1f5;
	color: var( --ink );
}

.ctli .ctli-btn.grey:hover {
	background: #e3e8ef;
	color: var( --ink );
}

.ctli .ctli-btn.navy {
	background: var( --navy );
}

.ctli .ctli-btn.navy:hover {
	background: var( --navy2 );
}

.ctli .ctli-btn.danger {
	background: #fbe9e7;
	color: var( --danger );
}

.ctli .ctli-btn.danger:hover {
	background: #f6d8d5;
	color: var( --danger );
}

.ctli .ctli-btn:disabled {
	background: #cdd6e0;
	color: #fff;
	cursor: not-allowed;
}

/* Tables ------------------------------------------------------------- */

.ctli .ctli-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ctli .ctli-table th {
	text-align: left;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var( --muted );
	padding: 8px 10px;
	border-bottom: 1px solid var( --line );
}

.ctli .ctli-table td {
	padding: 11px 10px;
	border-bottom: 1px solid #eef1f5;
	vertical-align: middle;
}

.ctli .ctli-table tr:last-child td {
	border-bottom: 0;
}

.ctli .ctli-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.ctli .ctli-table .num.pos {
	color: var( --good );
}

.ctli .ctli-table .num.neg {
	color: var( --print );
}

.ctli .ctli-table .code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var( --muted );
}

.ctli .ctli-table .desc {
	font-weight: 600;
}

.ctli .ctli-inactive {
	opacity: 0.55;
}

.ctli .ctli-note-cell {
	color: var( --muted );
	font-size: 12.5px;
}

.ctli .ctli-muted {
	color: var( --muted );
}

.ctli .ctli-rowactions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	align-items: center;
}

.ctli .ctli-rowactions form {
	margin: 0;
}

.ctli .ctli-flash {
	animation: ctli-flash 1.4s ease-out;
}

@keyframes ctli-flash {
	from {
		background: var( --good-bg );
	}
	to {
		background: transparent;
	}
}

/* Pills -------------------------------------------------------------- */

.ctli .ctli-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 700;
}

.ctli .ctli-pill.stock,
.ctli .ctli-pill.ok,
.ctli .ctli-pill.ready {
	background: var( --good-bg );
	color: var( --good );
}

.ctli .ctli-pill.print,
.ctli .ctli-pill.low {
	background: var( --print-bg );
	color: var( --print );
}

.ctli .ctli-pill.open {
	background: #fdf2e0;
	color: #a9711a;
}

.ctli .ctli-pill.shipped {
	background: #e9edf2;
	color: #5a6b7d;
}

/* Forms and scanning ------------------------------------------------- */

.ctli .ctli-scanrow {
	display: flex;
	gap: 10px;
	align-items: center;
}

.ctli .ctli-scanfield {
	flex: 1;
	font-size: 16px;
	padding: 11px 14px;
	border: 2px solid var( --teal );
	border-radius: 10px;
	outline: none;
	font-family: inherit;
}

.ctli .ctli-qtybig {
	width: 92px;
	font-size: 16px;
	padding: 11px 10px;
	border: 2px solid var( --line );
	border-radius: 10px;
	text-align: center;
	font-family: inherit;
}

.ctli .ctli-qty {
	width: 76px;
	padding: 8px;
	border: 1px solid var( --line );
	border-radius: 8px;
	text-align: center;
	font-family: inherit;
}

.ctli .ctli-note {
	width: 120px;
	padding: 8px;
	border: 1px solid var( --line );
	border-radius: 8px;
	font-family: inherit;
}

.ctli .ctli-adjust {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin: 0;
}

.ctli .ctli-search {
	width: 100%;
	font-size: 14px;
	padding: 10px 14px;
	border: 1px solid var( --line );
	border-radius: 10px;
	outline: none;
	margin-bottom: 14px;
}

.ctli .ctli-formgrid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 14px;
	margin-bottom: 16px;
}

.ctli .ctli-formgrid label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var( --muted );
}

.ctli .ctli-formgrid input[type='text'],
.ctli .ctli-formgrid input[type='number'],
.ctli .ctli-formgrid input[type='file'],
.ctli .ctli-formgrid select {
	font-family: inherit;
	font-size: 14px;
	padding: 9px 11px;
	border: 1px solid var( --line );
	border-radius: 9px;
	color: var( --ink );
	font-weight: 400;
	width: 100%;
	box-sizing: border-box;
}

.ctli .ctli-check {
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
}

.ctli .ctli-unknown {
	margin-top: 18px;
	padding: 16px;
	border: 1px dashed var( --print-line );
	background: var( --print-bg );
	border-radius: 12px;
}

.ctli .ctli-unknown h3 {
	margin-top: 0;
	color: var( --print );
}

/* Messages ----------------------------------------------------------- */

.ctli .ctli-msg {
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	margin: 14px 0;
	font-weight: 500;
}

.ctli .ctli-msg.success {
	background: var( --good-bg );
	color: var( --good );
}

.ctli .ctli-msg.error {
	background: var( --print-bg );
	color: var( --print );
}

.ctli .ctli-big-msg {
	font-size: 15px;
	font-weight: 600;
}

.ctli .ctli-hint {
	font-size: 12.5px;
	color: var( --muted );
	margin-top: 10px;
}

.ctli .ctli-empty {
	color: var( --muted );
	font-size: 14px;
	padding: 14px 0;
	text-align: center;
}

.ctli .ctli-pre {
	background: #f6f8fa;
	border: 1px solid var( --line );
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 12.5px;
	overflow-x: auto;
}

.ctli .ctli-note-panel {
	margin-top: 20px;
	border-top: 1px solid var( --line );
	padding-top: 14px;
}

/* Chips and pallet --------------------------------------------------- */

.ctli .ctli-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ctli .ctli-chip {
	background: #eef4f3;
	border: 1px solid #cfe6e1;
	color: var( --teal-d );
	border-radius: 20px;
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 600;
}

.ctli .ctli-chip.print {
	background: #fff;
	border-color: var( --print-line );
	color: var( --print );
}

.ctli .ctli-pallet {
	margin-top: 8px;
}

.ctli .ctli-palletline {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid #eef1f5;
}

.ctli .ctli-palletline:last-child {
	border-bottom: 0;
}

.ctli .ctli-palletline .d {
	flex: 1;
}

.ctli .ctli-palletline.done .desc {
	color: var( --good );
}

.ctli .ctli-prog {
	height: 7px;
	background: #eef1f5;
	border-radius: 5px;
	overflow: hidden;
	width: 120px;
}

.ctli .ctli-prog i {
	display: block;
	height: 100%;
	background: var( --teal );
	transition: width 0.25s ease;
}

.ctli .ctli-scancount {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 15px;
	min-width: 64px;
	text-align: right;
}

.ctli .ctli-tick {
	width: 18px;
	color: var( --good );
	font-weight: 700;
}

.ctli .ctli-tabs {
	margin-bottom: 18px;
}

@media ( max-width: 782px ) {
	.ctli .ctli-scanrow {
		flex-wrap: wrap;
	}

	.ctli .ctli-scanfield {
		flex-basis: 100%;
	}

	.ctli .ctli-adjust {
		flex-wrap: wrap;
	}
}


/* ---------------------------------------------------------------------
 * Inventory adjust-row polish (added 2026-07-21)
 * De-cramps the STOCK IN / ADJUST cluster: one clean line, unit dropdown
 * wide enough to show its text, action column given breathing room.
 * ------------------------------------------------------------------ */
.ctli .ctli-table th:last-child,
.ctli .ctli-table td:last-child { width: 1%; white-space: nowrap; padding-top: 14px; padding-bottom: 14px; }
.ctli .ctli-adjust { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; justify-content: flex-end; margin: 0; }
.ctli .ctli-adjust .ctli-qty { width: 58px; padding: 9px 6px; text-align: center; font-size: 14px; }
.ctli .ctli-adjust select { width: 104px; min-width: 104px; height: 38px; padding: 8px 30px 8px 11px; border: 1px solid var( --line ); border-radius: 8px; font-family: inherit; font-size: 14px; background-color: #fff; color: var( --ink ); }
.ctli .ctli-adjust .ctli-note { width: 120px; padding: 9px 11px; font-size: 14px; }
.ctli .ctli-adjust .ctli-btn.sm { padding: 9px 18px; height: 38px; }