.ca-dashboard, .ca-auth-screen {
	--ca-primary: #4f46e5;
	--ca-primary-dark: #4338ca;
	--ca-success: #16a34a;
	--ca-danger: #dc2626;
	--ca-bg: #f8f9fc;
	--ca-card: #ffffff;
	--ca-border: #e5e7eb;
	--ca-text: #1f2330;
	--ca-text-muted: #6b7280;
	--ca-radius: 10px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ca-text);
}

/* Belt-and-suspenders against horizontal overflow on small screens: every element
   inside the dashboard sizes itself including border+padding, so a stray fixed
   width or default browser input size can't push the layout wider than its
   container and force a sideways scrollbar on mobile. */
.ca-dashboard *, .ca-auth-screen * {
	box-sizing: border-box;
	max-width: 100%;
}

.ca-dashboard {
	max-width: 1100px;
	margin: 0 auto;
	background: var(--ca-bg);
	border-radius: 14px;
	overflow: hidden;
}

/* ---------- Split-screen login ---------- */
.ca-auth-screen {
	display: flex;
	min-height: 560px;
	max-width: 1000px;
	margin: 30px auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(16, 24, 40, 0.08);
	background: var(--ca-card);
}
.ca-auth-brand {
	flex: 1.1;
	background: linear-gradient(155deg, var(--ca-primary) 0%, #7c3aed 100%);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 48px;
}
.ca-auth-brand-inner h1 { font-size: 28px; margin: 14px 0 10px; font-weight: 800; }
.ca-auth-brand-inner p { font-size: 14.5px; opacity: 0.92; line-height: 1.6; margin-bottom: 20px; }
.ca-auth-logo { max-height: 38px; filter: brightness(0) invert(1); }
.ca-auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ca-auth-points li { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: 0.95; }
.ca-auth-points .dashicons { color: #c7d2fe; }

.ca-auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.ca-auth-card { width: 100%; max-width: 340px; }
.ca-auth-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.ca-auth-sub { color: var(--ca-text-muted); font-size: 13.5px; margin-bottom: 22px; }
.ca-auth-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ca-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.ca-auth-input-wrap { position: relative; margin-bottom: 16px; }
.ca-auth-input-wrap .dashicons { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ca-text-muted); font-size: 18px; width: 18px; height: 18px; }
.ca-auth-input-wrap input {
	width: 100%; box-sizing: border-box; padding: 11px 12px 11px 38px;
	border: 1px solid var(--ca-border); border-radius: 9px; font-size: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ca-auth-input-wrap input:focus { outline: none; border-color: var(--ca-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }
.ca-auth-btn { width: 100%; padding: 12px; font-size: 14.5px; margin-top: 4px; }
.ca-auth-footnote { font-size: 12.5px; color: var(--ca-text-muted); margin-top: 20px; text-align: center; }

@media (max-width: 760px) {
	.ca-auth-screen { flex-direction: column; margin: 0; border-radius: 0; min-height: 100vh; box-shadow: none; }
	.ca-auth-brand { padding: 32px 24px; flex: none; }
	.ca-auth-brand-inner p { margin-bottom: 14px; }
	.ca-auth-points { display: none; }
	.ca-auth-form-side { padding: 28px 24px; }
}

/* ---------- Modal system (Create/Edit Order, Ship Now, Edit Shipment) ---------- */
.ca-modal-overlay {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(17, 20, 30, 0.45);
	z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.ca-modal {
	background: var(--ca-card);
	border-radius: 14px;
	width: 100%;
	max-width: 640px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(16, 24, 40, 0.25);
	animation: ca-modal-in 0.15s ease;
}
@keyframes ca-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.ca-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ca-border); flex: none; }
.ca-modal-header h3 { margin: 0; font-size: 17px; font-weight: 800; }
.ca-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ca-text-muted); padding: 4px; }
.ca-modal-close:hover { color: var(--ca-text); }
.ca-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.ca-modal-body > label { display: block; font-size: 13px; font-weight: 600; color: var(--ca-text-muted); margin-bottom: 6px; }
.ca-modal-body > select, .ca-modal-body select#ca-warehouse-select {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ca-border);
	border-radius: 8px; font-size: 14px; background: #fff;
}
.ca-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ca-border); flex: none; }

@media (max-width: 760px) {
	.ca-modal-overlay { padding: 0; align-items: flex-end; }
	.ca-modal { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
}

/* ---------- Dashboard view ---------- */
.ca-dash-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.ca-card-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ca-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ca-big-number { font-size: 30px; font-weight: 800; color: var(--ca-text); }

.ca-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ca-bar-label { width: 70px; font-size: 12.5px; color: var(--ca-text-muted); flex: none; }
.ca-bar-track { flex: 1; height: 10px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.ca-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.ca-bar-booked { background: #f59e0b; }
.ca-bar-assigned { background: #16a34a; }
.ca-bar-cancelled { background: #dc2626; }
.ca-bar-count { width: 26px; text-align: right; font-size: 12.5px; font-weight: 700; flex: none; }

.ca-spark-row { display: flex; align-items: flex-end; gap: 6px; height: 90px; overflow-x: auto; padding-bottom: 4px; }
.ca-spark-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 22px; }
.ca-spark-bar { width: 14px; background: var(--ca-primary); border-radius: 4px 4px 0 0; opacity: 0.85; }
.ca-spark-label { font-size: 9.5px; color: var(--ca-text-muted); writing-mode: vertical-rl; transform: rotate(180deg); }

@media (max-width: 760px) {
	.ca-dash-grid { grid-template-columns: 1fr; }
}

.ca-dashboard-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var(--ca-card);
	border-bottom: 1px solid var(--ca-border);
}
.ca-logo { max-height: 36px; }
.ca-company-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ca-header-right { margin-left: auto; font-size: 13.5px; color: var(--ca-text-muted); display: flex; align-items: center; gap: 14px; }
.ca-user-pill { display: inline-flex; align-items: center; gap: 5px; background: #f3f4f8; padding: 5px 11px; border-radius: 999px; font-weight: 600; }
.ca-user-pill .dashicons { font-size: 15px; width: 15px; height: 15px; }
.ca-logout-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ca-primary); text-decoration: none; font-weight: 600; }
.ca-logout-link:hover { text-decoration: underline; }
.ca-logout-link .dashicons { font-size: 15px; width: 15px; height: 15px; }

.ca-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; background: var(--ca-bg); }
.ca-stat-card {
	background: var(--ca-card); border: 1px solid var(--ca-border); border-radius: var(--ca-radius);
	padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.ca-stat-card .dashicons { font-size: 22px; width: 22px; height: 22px; color: var(--ca-primary); background: #eef0fb; padding: 8px; border-radius: 8px; box-sizing: content-box; }
.ca-stat-value { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.ca-stat-label { display: block; font-size: 12px; color: var(--ca-text-muted); margin-top: 2px; }

.ca-bottom-nav { display: none; }

.ca-dashboard-body { display: flex; gap: 0; flex-wrap: wrap; }

.ca-side-menu {
	display: flex;
	flex-direction: column;
	min-width: 180px;
	padding: 16px 10px;
	background: var(--ca-card);
	border-right: 1px solid var(--ca-border);
}
.ca-side-menu a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--ca-text-muted);
	border-radius: 8px;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.15s ease, color 0.15s ease;
}
.ca-side-menu a .dashicons { font-size: 17px; width: 17px; height: 17px; }
.ca-side-menu a.active { background: var(--ca-primary); color: #fff; }
.ca-side-menu a:hover:not(.active) { background: #eef0fb; color: var(--ca-primary-dark); }

.ca-content { flex: 1; min-width: 280px; padding: 20px; }

.ca-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ca-section-title { margin-top: 28px; margin-bottom: 8px; font-size: 16px; color: var(--ca-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.ca-card {
	background: var(--ca-card);
	border: 1px solid var(--ca-border);
	border-radius: var(--ca-radius);
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
	margin-bottom: 16px;
}

.ca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 10px; }
.ca-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ca-text-muted); }
.ca-grid input, .ca-grid textarea, .ca-grid select {
	width: 100%;
	font-weight: 400; color: var(--ca-text);
	padding: 9px 11px; border: 1px solid var(--ca-border); border-radius: 8px;
	font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
	background: #fff;
}
.ca-grid input:focus, .ca-grid textarea:focus, .ca-grid select:focus {
	outline: none; border-color: var(--ca-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.ca-span-2 { grid-column: 1 / -1; }
.ca-readout { font-size: 13px; color: var(--ca-text-muted); align-self: center; }
.ca-hint { font-size: 12px; color: var(--ca-text-muted); }

.ca-form-actions { margin-top: 14px; display: flex; gap: 8px; }
.ca-msg { margin-top: 10px; font-size: 13px; font-weight: 600; }
.ca-msg-ok { color: var(--ca-success); }
.ca-msg-error { color: var(--ca-danger); }

.ca-table-wrap { overflow-x: auto; border-radius: var(--ca-radius); border: 1px solid var(--ca-border); }

.ca-bulk-bar { margin-bottom: 10px; }
.ca-select-all-label {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 600; color: var(--ca-text-muted);
	cursor: pointer;
}
.ca-table { width: 100%; border-collapse: collapse; background: var(--ca-card); font-size: 13.5px; }
.ca-table th, .ca-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ca-border); white-space: nowrap; }
.ca-table th { background: #fafbfd; color: var(--ca-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.ca-table tr:last-child td { border-bottom: none; }
.ca-table tr:hover td { background: #fafbff; }
.ca-empty { text-align: center; color: var(--ca-text-muted); padding: 24px !important; }

.ca-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: #eef0fb; color: var(--ca-primary-dark); }
.ca-status-booked { background: #fef3c7; color: #92400e; }
.ca-status-assigned { background: #dcfce7; color: #166534; }
.ca-status-cancelled { background: #fee2e2; color: #991b1b; }
.ca-status-other { background: #e5e7eb; color: #374151; }

.ca-btn {
	background: #eef0fb; color: var(--ca-primary-dark);
	border: none; padding: 9px 16px; border-radius: 8px; cursor: pointer;
	font-weight: 600; font-size: 13.5px; margin: 2px 4px 2px 0;
	transition: background 0.15s ease, transform 0.05s ease;
}
.ca-btn:hover { background: #e0e3f7; }
.ca-btn:active { transform: scale(0.98); }
.ca-btn-primary { background: var(--ca-primary); color: #fff; }
.ca-btn-primary:hover { background: var(--ca-primary-dark); }
.ca-btn-ghost { background: transparent; color: var(--ca-text-muted); border: 1px solid var(--ca-border); }
.ca-btn-ghost:hover { background: #f3f4f6; }
.ca-btn-danger { background: #fee2e2; color: var(--ca-danger); }
.ca-btn-danger:hover { background: #fecaca; }
.ca-btn-sm { padding: 6px 11px; font-size: 12.5px; }
.ca-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.ca-rate-block { padding: 10px 12px; border: 1px solid var(--ca-border); border-radius: 8px; margin-bottom: 8px; background: #fafbff; }
.ca-rate-error { color: var(--ca-danger); background: #fef2f2; border-color: #fecaca; }

/* ---------- Bulk-select Ship Now bar ---------- */
.ca-ship-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--ca-card);
	border: 1px solid var(--ca-border);
	border-radius: var(--ca-radius);
}
.ca-ship-bar #ca-selected-count { font-weight: 600; }
.ca-order-checkbox, #ca-select-all-orders {
	width: 18px; height: 18px; cursor: pointer; accent-color: var(--ca-primary);
}

@media (max-width: 760px) {
	/* The bulk-select checkbox column would normally render as its own stacked
	   "Select: [ ]" row like every other field once the table becomes cards -
	   that's fine, just sits at the top of each card. The ship bar itself is
	   pinned above the bottom tab bar so it's always reachable without scrolling
	   back up after ticking boxes further down a long list. */
	.ca-ship-bar {
		position: sticky;
		bottom: 70px;
		box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
		flex-wrap: wrap;
	}
	.ca-ship-bar #ca-ship-now-btn { flex: 1; min-width: 140px; }
}

@media (max-width: 760px) {
	.ca-dashboard { border-radius: 0; }
	.ca-dashboard-body { flex-direction: column; }
	.ca-side-menu { display: none; }
	.ca-content { padding: 14px; padding-bottom: 84px; }
	.ca-stats-strip { grid-template-columns: repeat(2, 1fr); padding: 12px; }
	.ca-grid { grid-template-columns: 1fr; }
	.ca-page-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.ca-header-right { gap: 8px; }
	.ca-user-pill-name { display: none; }
	.ca-logout-label { display: none; }

	/* Table -> stacked card transformation. This is what stops the horizontal
	   overflow on small screens - rows become cards with label:value pairs
	   instead of a wide table that has to be scrolled sideways. */
	.ca-table-wrap { overflow-x: visible; border: none; }
	.ca-table { display: block; }
	.ca-table thead { display: none; }
	.ca-table tbody { display: block; }
	.ca-table tr {
		display: block;
		background: var(--ca-card);
		border: 1px solid var(--ca-border);
		border-radius: var(--ca-radius);
		padding: 4px 14px;
		margin-bottom: 10px;
		box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
	}
	.ca-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		white-space: normal;
		text-align: right;
		padding: 9px 0;
		border-bottom: 1px solid #f1f2f5;
	}
	.ca-table tr:last-child, .ca-table td:last-child { border-bottom: none; }
	.ca-table td:before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--ca-text-muted);
		text-align: left;
		flex: none;
	}
	.ca-table .ca-empty { display: block; text-align: center; padding: 16px 0 !important; }
	.ca-table .ca-empty:before { content: none; }

	.ca-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		background: var(--ca-card);
		border-top: 1px solid var(--ca-border);
		box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
		z-index: 999;
	}
	.ca-bottom-nav a {
		flex: 1;
		display: flex; flex-direction: column; align-items: center; gap: 2px;
		padding: 9px 4px 8px;
		text-decoration: none;
		color: var(--ca-text-muted);
		font-size: 10.5px; font-weight: 600;
	}
	.ca-bottom-nav a .dashicons { font-size: 19px; width: 19px; height: 19px; }
	.ca-bottom-nav a.active { color: var(--ca-primary); }
}