/**
 * CTL Inventory — front-end staff app shell.
 * Layers on top of ctli-admin.css (the shared .ctli component styles).
 */

.ctli-app {
	--navy: #0f2942;
	--navy2: #17385c;
	--teal: #1f9e8f;
	--bg: #f4f6f9;

	margin: 0 auto;
	max-width: 1240px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Topbar --------------------------------------------------------------- */

.ctli-app .ctli-topbar {
	background: var( --navy );
	color: #fff;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 22px;
	border-radius: 14px 14px 0 0;
}

.ctli-app .ctli-brand {
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ctli-app .ctli-dot {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var( --teal );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.ctli-app .ctli-brand small {
	display: block;
	font-weight: 500;
	color: #9fb4c9;
	font-size: 11px;
	margin-top: 1px;
}

.ctli-app .ctli-spacer {
	flex: 1;
}

.ctli-app .ctli-who {
	color: #c7d6e5;
	font-size: 13px;
}

/* Layout --------------------------------------------------------------- */

.ctli-app .ctli-layout {
	display: flex;
	background: var( --bg );
	border-radius: 0 0 14px 14px;
	min-height: 70vh;
}

.ctli-app .ctli-nav {
	width: 212px;
	background: #fff;
	border-right: 1px solid #e3e8ef;
	padding: 18px 12px;
	flex-shrink: 0;
	border-radius: 0 0 0 14px;
}

.ctli-app .ctli-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 12px;
	border-radius: 9px;
	color: #1c2733;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 2px;
	text-decoration: none;
	box-shadow: none;
}

.ctli-app .ctli-nav a:hover {
	background: #f1f4f8;
	color: #1c2733;
}

.ctli-app .ctli-nav a.active {
	background: var( --navy );
	color: #fff;
}

.ctli-app .ctli-ico {
	width: 18px;
	text-align: center;
}

.ctli-app .ctli-main {
	flex: 1;
	padding: 26px 30px;
	min-width: 0;
}

/* The shared views wrap themselves in .wrap for wp-admin; neutralise it here. */
.ctli-app .wrap {
	margin: 0;
	padding: 0;
	max-width: none;
}

.ctli-app h1 {
	font-size: 22px;
	margin: 0 0 3px;
	color: #1c2733;
}

/* Management tabs, borrowed from wp-admin's markup. */
.ctli-app .nav-tab-wrapper {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid #e3e8ef;
	margin: 0 0 18px;
	padding: 0;
}

.ctli-app .nav-tab {
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #66788c;
	text-decoration: none;
	border-radius: 9px 9px 0 0;
}

.ctli-app .nav-tab-active {
	background: #fff;
	color: #0f2942;
	border: 1px solid #e3e8ef;
	border-bottom-color: #fff;
	margin-bottom: -1px;
}

/* Login ---------------------------------------------------------------- */

.ctli-login {
	max-width: 460px;
	padding: 40px 0;
}

.ctli-login .ctli-card {
	padding: 28px;
}

.ctli-login h2 {
	margin-top: 0;
}

.ctli-login .login-username,
.ctli-login .login-password {
	margin-bottom: 14px;
}

.ctli-login label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #66788c;
	margin-bottom: 5px;
}

.ctli-login input[type='text'],
.ctli-login input[type='password'] {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #e3e8ef;
	border-radius: 9px;
	font-size: 15px;
	box-sizing: border-box;
}

.ctli-login .login-remember label {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 7px;
}

.ctli-login .login-submit input[type='submit'] {
	background: var( --teal );
	color: #fff;
	border: 0;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
}

@media ( max-width: 820px ) {
	.ctli-app .ctli-nav {
		width: 56px;
	}

	.ctli-app .ctli-txt {
		display: none;
	}

	.ctli-app .ctli-main {
		padding: 16px;
	}
}

/* ---------------------------------------------------------------------
 * Theme-override guards (added 1.1.4)
 *
 * Elementor's global styles set a light input colour and a tall line-height
 * that bleed into the app. Force readable form fields and a sane rhythm.
 * ------------------------------------------------------------------ */

.ctli-app,
.ctli-app .ctli-main {
	line-height: 1.45;
}

.ctli-app .ctli-sub {
	margin: 0 0 20px;
	line-height: 1.5;
}

.ctli-app .ctli-hint {
	line-height: 1.5;
}

/* Every field the staff app renders — text is dark on white, no matter what
   the active theme tries to impose. */
.ctli-app input[type='text'],
.ctli-app input[type='search'],
.ctli-app input[type='number'],
.ctli-app input[type='email'],
.ctli-app input[type='password'],
.ctli-app select,
.ctli-app textarea {
	color: #1c2733 !important;
	background-color: #fff !important;
	-webkit-text-fill-color: #1c2733;
	border: 1px solid #e3e8ef;
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	padding: 9px 11px;
	box-shadow: none;
}

.ctli-app input:focus,
.ctli-app select:focus,
.ctli-app textarea:focus {
	border-color: #1f9e8f !important;
	outline: none;
	box-shadow: 0 0 0 2px rgba( 31, 158, 143, 0.18 );
}

.ctli-app input::placeholder {
	color: #9aa8b6;
	-webkit-text-fill-color: #9aa8b6;
	opacity: 1;
}

/* Readable text selection inside the app (theme sets a dark selection). */
.ctli-app ::selection {
	background: #cdeae5;
	color: #0f2942;
}

/* The big scan field keeps its teal border and larger type. */
.ctli-app input.ctli-scanfield {
	border: 2px solid #1f9e8f !important;
	font-size: 16px;
}

/* Tables shouldn't inherit a stretched theme line-height. */
.ctli-app .ctli-table th,
.ctli-app .ctli-table td {
	line-height: 1.4;
}