/**
 * Argo Core — Component Library
 * Reusable, token-driven component styles consumed by PHP-rendered markup
 * (\ArgoCore\UI\Components) and enhanced by JS behaviours (argo-ui.js).
 */

/* ============================================================ STATUS BADGE */
.argo-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.2rem 0.6rem;
	font-size: var(--argo-text-xs);
	font-weight: 600;
	line-height: 1.4;
	border-radius: var(--argo-radius-full);
	border: 1px solid transparent;
	white-space: nowrap;
}
.argo-badge .argo-badge-dot {
	height: 0.4rem; width: 0.4rem; border-radius: 9999px; background: currentColor;
}
.argo-badge--success { color: var(--argo-success); background: var(--argo-success-bg); border-color: var(--argo-success-bd); }
.argo-badge--warning { color: var(--argo-warning); background: var(--argo-warning-bg); border-color: var(--argo-warning-bd); }
.argo-badge--danger  { color: var(--argo-danger);  background: var(--argo-danger-bg);  border-color: var(--argo-danger-bd); }
.argo-badge--info    { color: var(--argo-info);    background: var(--argo-info-bg);    border-color: var(--argo-info-bd); }
.argo-badge--neutral { color: var(--argo-neutral); background: var(--argo-neutral-bg); border-color: var(--argo-neutral-bd); }
.argo-badge--brand   { color: var(--argo-brand);   background: var(--argo-brand-light);border-color: var(--argo-brand-200); }
.argo-badge--purple  { color: var(--argo-purple);  background: var(--argo-purple-bg);  border-color: var(--argo-purple-bd); }

/* ==================================================================== CARD */
.argo-card {
	background: var(--argo-surface);
	border: 1px solid var(--argo-border);
	border-radius: var(--argo-radius-lg);
	box-shadow: var(--argo-shadow-sm);
}
.argo-card--hover { transition: box-shadow var(--argo-dur) var(--argo-ease), transform var(--argo-dur) var(--argo-ease); }
.argo-card--hover:hover { box-shadow: var(--argo-shadow); transform: translateY(-2px); }
.argo-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--argo-border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.argo-card-title { font-size: var(--argo-text-base); font-weight: 600; color: var(--argo-ink-900); }
.argo-card-body { padding: 1.25rem; }

/* ============================================================== STAT CARD */
.argo-stat {
	position: relative;
	background: var(--argo-surface);
	border: 1px solid var(--argo-border);
	border-radius: var(--argo-radius-lg);
	padding: 1.35rem 1.4rem;
	box-shadow: var(--argo-shadow-sm);
	transition: box-shadow var(--argo-dur) var(--argo-ease), transform var(--argo-dur) var(--argo-ease), border-color var(--argo-dur) var(--argo-ease);
}
.argo-stat:hover { box-shadow: var(--argo-shadow); transform: translateY(-3px); border-color: var(--argo-border-strong); }
.argo-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.argo-stat-label { font-size: var(--argo-text-sm); color: var(--argo-ink-500); font-weight: 500; }
.argo-stat-icon {
	height: 2.6rem; width: 2.6rem; border-radius: 0.85rem;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	transition: transform var(--argo-dur) var(--argo-ease);
}
.argo-stat:hover .argo-stat-icon { transform: scale(1.08) rotate(-3deg); }
.argo-stat-value { font-size: 2rem; font-weight: 800; color: var(--argo-ink-900); line-height: 1.05; margin-top: 0.9rem; letter-spacing: -0.02em; }
.argo-stat-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.argo-stat-trend { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--argo-text-xs); font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.argo-stat-trend--up { color: var(--argo-success); background: var(--argo-success-bg); }
.argo-stat-trend--down { color: var(--argo-danger); background: var(--argo-danger-bg); }
.argo-stat-arrow { height: 0.85rem; width: 0.85rem; }
.argo-stat-trend-caption { font-size: var(--argo-text-xs); color: var(--argo-ink-400); }

/* ================================================================ BUTTONS */
.argo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.6rem 1.1rem; border-radius: var(--argo-radius);
	font-size: var(--argo-text-sm); font-weight: 600; cursor: pointer;
	border: 1px solid transparent; transition: background var(--argo-dur-fast), border-color var(--argo-dur-fast), transform 0.05s; white-space: nowrap;
}
.argo-btn:active { transform: translateY(1px); }
.argo-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.argo-btn--primary { background: var(--argo-brand); color: #fff; }
.argo-btn--primary:hover { background: var(--argo-brand-dark); }
.argo-btn--secondary { background: var(--argo-surface); color: var(--argo-ink-700); border-color: var(--argo-border-strong); }
.argo-btn--secondary:hover { background: var(--argo-surface-2); }
.argo-btn--ghost { background: transparent; color: var(--argo-ink-500); }
.argo-btn--ghost:hover { background: var(--argo-surface-2); color: var(--argo-ink-900); }
.argo-btn--danger { background: var(--argo-danger); color: #fff; }
.argo-btn--danger:hover { filter: brightness(0.94); }
.argo-btn--sm { padding: 0.4rem 0.75rem; font-size: var(--argo-text-xs); }
.argo-btn--icon { padding: 0.5rem; }

/* ================================================================ DROPDOWN */
.argo-dropdown-menu {
	background: var(--argo-surface);
	border: 1px solid var(--argo-border);
	border-radius: var(--argo-radius-lg);
	box-shadow: var(--argo-shadow-lg);
	overflow: hidden;
	transform-origin: top right;
	animation: argo-pop var(--argo-dur) var(--argo-ease);
}
@keyframes argo-pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Mobile: dropdowns anchored to the top-bar (notifications, profile)
   shift to a fixed, viewport-centered position so a 320px wide panel
   doesn't get pushed off the left edge of a 390-360px screen. We target
   only the dropdown menus inside the top-bar container — content-area
   dropdowns are usually narrower and inline so they don't need this. */
@media (max-width: 640px) {
	.argo-topbar .argo-dropdown-menu,
	[data-argo-topbar] .argo-dropdown-menu {
		position: fixed !important;
		top: 60px !important;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
		transform-origin: top center;
	}
}

/* ================================================================== TABS */
.argo-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--argo-surface-2); border-radius: var(--argo-radius); }
.argo-tabbtn { padding: 0.45rem 0.9rem; border-radius: var(--argo-radius-sm); font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-500); background: transparent; border: none; cursor: pointer; transition: all var(--argo-dur-fast); }
.argo-tabbtn--active { background: var(--argo-surface); color: var(--argo-brand); box-shadow: var(--argo-shadow-xs); }

/* ================================================================ TABLE */
.argo-table-wrap { background: var(--argo-surface); border: 1px solid var(--argo-border); border-radius: var(--argo-radius-lg); box-shadow: var(--argo-shadow-sm); overflow: hidden; }
.argo-table-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--argo-border); flex-wrap: wrap; }
.argo-table-search { position: relative; flex: 1; min-width: 12rem; }
.argo-table-search input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem; border: 1px solid var(--argo-border); border-radius: var(--argo-radius); background: var(--argo-surface-2); font-size: var(--argo-text-sm); outline: none; }
.argo-table-search input:focus { background: #fff; border-color: var(--argo-brand); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
.argo-table-search svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); height: 1rem; width: 1rem; color: var(--argo-ink-400); }
.argo-table-scroll { overflow-x: auto; }
.argo-table { width: 100%; border-collapse: collapse; font-size: var(--argo-text-sm); }
.argo-table thead th { text-align: left; padding: 0.7rem 1rem; font-size: var(--argo-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--argo-ink-400); background: var(--argo-surface-2); border-bottom: 1px solid var(--argo-border); white-space: nowrap; }
.argo-table thead th.is-sortable { cursor: pointer; user-select: none; }
.argo-table thead th.is-sortable:hover { color: var(--argo-ink-700); }
.argo-table tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--argo-border); color: var(--argo-ink-700); vertical-align: middle; white-space: nowrap; }
.argo-table tbody td.wrap { white-space: normal; }
.argo-table tbody tr { transition: background var(--argo-dur-fast); }
.argo-table tbody tr:hover { background: var(--argo-surface-2); }
.argo-table tbody tr:last-child td { border-bottom: none; }
.argo-table-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-top: 1px solid var(--argo-border); font-size: var(--argo-text-sm); color: var(--argo-ink-500); flex-wrap: wrap; gap: 0.5rem; }
.argo-pagination { display: inline-flex; gap: 0.25rem; }
.argo-pagination button { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: var(--argo-radius-sm); border: 1px solid var(--argo-border); background: var(--argo-surface); color: var(--argo-ink-700); font-size: var(--argo-text-sm); cursor: pointer; }
.argo-pagination button:hover:not(:disabled) { background: var(--argo-surface-2); }
.argo-pagination button.is-active { background: var(--argo-brand); color: #fff; border-color: var(--argo-brand); }
.argo-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Responsive table -> stacked cards below md */
@media (max-width: 767px) {
	.argo-table--responsive thead { display: none; }
	.argo-table--responsive tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; border: none; text-align: right; }
	.argo-table--responsive tbody td::before { content: attr(data-label); font-weight: 600; color: var(--argo-ink-400); text-transform: uppercase; font-size: var(--argo-text-xs); text-align: left; }
	.argo-table--responsive tbody tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--argo-border); }
}

/* ============================================================ EMPTY/LOADING */
.argo-empty { text-align: center; padding: 3rem 1.5rem; color: var(--argo-ink-400); }
.argo-empty-icon { height: 3rem; width: 3rem; margin: 0 auto 0.75rem; color: var(--argo-ink-300); }
.argo-empty-title { font-size: var(--argo-text-base); font-weight: 600; color: var(--argo-ink-700); }
.argo-empty-text { font-size: var(--argo-text-sm); margin-top: 0.25rem; }

.argo-skeleton { background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%); background-size: 400% 100%; animation: argo-shimmer 1.4s ease infinite; border-radius: var(--argo-radius-sm); }
@keyframes argo-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.argo-spinner { height: 2.5rem; width: 2.5rem; border-radius: 9999px; border: 3px solid var(--argo-brand-light); border-top-color: var(--argo-brand); animation: argo-spin 0.7s linear infinite; }
.argo-spinner--sm { height: 1.1rem; width: 1.1rem; border-width: 2px; }
@keyframes argo-spin { to { transform: rotate(360deg); } }

/* ================================================================ MODAL */
.argo-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); z-index: var(--argo-z-modal); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: argo-fade var(--argo-dur) var(--argo-ease); }
.argo-modal { background: var(--argo-surface); border-radius: var(--argo-radius-xl); box-shadow: var(--argo-shadow-lg); width: 100%; max-width: 32rem; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: argo-modal-in var(--argo-dur-slow) var(--argo-ease); }
.argo-modal-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--argo-border); display: flex; align-items: center; justify-content: space-between; }
.argo-modal-title { font-size: var(--argo-text-lg); font-weight: 700; color: var(--argo-ink-900); }
.argo-modal-body { padding: 1.5rem; overflow-y: auto; }
.argo-modal-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--argo-border); display: flex; justify-content: flex-end; gap: 0.5rem; }
@keyframes argo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes argo-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ================================================================ TOAST */
.argo-toast-region { position: fixed; top: 1rem; right: 1rem; z-index: var(--argo-z-toast); display: flex; flex-direction: column; gap: 0.5rem; max-width: calc(100vw - 2rem); }
.argo-toast { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 16rem; max-width: 22rem; padding: 0.75rem 0.9rem; background: var(--argo-surface); border: 1px solid var(--argo-border); border-left-width: 3px; border-radius: var(--argo-radius); box-shadow: var(--argo-shadow-lg); animation: argo-toast-in var(--argo-dur-slow) var(--argo-ease); }
.argo-toast--success { border-left-color: var(--argo-success); }
.argo-toast--error   { border-left-color: var(--argo-danger); }
.argo-toast--info    { border-left-color: var(--argo-info); }
.argo-toast--warning { border-left-color: var(--argo-warning); }
.argo-toast.is-leaving { animation: argo-toast-out var(--argo-dur) var(--argo-ease) forwards; }
.argo-toast-title { font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-900); }
.argo-toast-msg { font-size: var(--argo-text-xs); color: var(--argo-ink-500); margin-top: 0.1rem; }
@keyframes argo-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes argo-toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ================================================================ ALERT */
.argo-alert { padding: 0.75rem 1rem; border-radius: var(--argo-radius); font-size: var(--argo-text-sm); line-height: 1.45; border: 1px solid transparent; }
.argo-alert.is-error   { background: var(--argo-danger-bg);  color: #b91c1c; border-color: var(--argo-danger-bd); }
.argo-alert.is-success { background: var(--argo-success-bg); color: #15803d; border-color: var(--argo-success-bd); }
.argo-alert.is-info    { background: var(--argo-brand-light);color: var(--argo-brand-dark); border-color: var(--argo-brand-200); }
.argo-alert.is-warning { background: var(--argo-warning-bg); color: #b45309; border-color: var(--argo-warning-bd); }

/* ============================================================ FILE / UPLOAD */
.argo-dropzone { border: 2px dashed var(--argo-border-strong); border-radius: var(--argo-radius-lg); padding: 2rem 1.5rem; text-align: center; background: var(--argo-surface-2); transition: border-color var(--argo-dur), background var(--argo-dur); cursor: pointer; }
.argo-dropzone:hover, .argo-dropzone.is-dragging { border-color: var(--argo-brand); background: var(--argo-brand-light); }
.argo-dropzone-icon { height: 2.5rem; width: 2.5rem; margin: 0 auto 0.5rem; color: var(--argo-brand); }
.argo-dropzone input[type="file"][data-argo-dropzone-input] { display: none !important; }
.argo-file-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--argo-border); border-radius: var(--argo-radius); background: var(--argo-surface); }
.argo-file-thumb { height: 2.5rem; width: 2.5rem; border-radius: var(--argo-radius-sm); background: var(--argo-brand-light); color: var(--argo-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--argo-text-xs); font-weight: 700; text-transform: uppercase; }
.argo-file-name { font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-900); }
.argo-file-meta { font-size: var(--argo-text-xs); color: var(--argo-ink-400); }
.argo-progress { height: 0.375rem; border-radius: 9999px; background: var(--argo-border); overflow: hidden; }
.argo-progress-bar { height: 100%; background: var(--argo-brand); border-radius: 9999px; transition: width var(--argo-dur) var(--argo-ease); }

/* ============================================================== TIMELINE */
.argo-timeline { position: relative; padding-left: 1.5rem; }
.argo-timeline::before { content: ''; position: absolute; left: 0.32rem; top: 0.3rem; bottom: 0.3rem; width: 2px; background: var(--argo-border); }
.argo-timeline-item { position: relative; padding-bottom: 1.25rem; }
.argo-timeline-item:last-child { padding-bottom: 0; }
.argo-timeline-dot { position: absolute; left: -1.5rem; top: 0.15rem; height: 0.7rem; width: 0.7rem; border-radius: 9999px; background: var(--argo-brand); box-shadow: 0 0 0 3px var(--argo-brand-light); }
.argo-timeline-dot--muted { background: var(--argo-ink-300); box-shadow: 0 0 0 3px var(--argo-surface-2); }
.argo-timeline-title { font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-900); }
.argo-timeline-meta { font-size: var(--argo-text-xs); color: var(--argo-ink-400); margin-top: 0.1rem; }

/* ============================================================ NOTIFICATIONS */
.argo-notif { display: flex; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--argo-border); transition: background var(--argo-dur-fast); }
.argo-notif:hover { background: var(--argo-surface-2); }
.argo-notif.is-unread { background: var(--argo-brand-light); }
.argo-notif.is-unread:hover { background: var(--argo-brand-100); }
.argo-notif-ico { flex-shrink: 0; height: 2rem; width: 2rem; border-radius: var(--argo-radius-sm); display: flex; align-items: center; justify-content: center; }
.argo-notif-title { font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-900); }
.argo-notif-msg { font-size: var(--argo-text-xs); color: var(--argo-ink-500); margin-top: 0.125rem; }
.argo-notif-time { font-size: 0.7rem; color: var(--argo-ink-400); margin-top: 0.25rem; }
.argo-notif-priority { width: 0.3rem; border-radius: 9999px; flex-shrink: 0; }
.argo-notif-priority--high { background: var(--argo-danger); }

/* ============================================================= UTILITIES */
.argo-scroll-area { scrollbar-width: thin; scrollbar-color: var(--argo-ink-300) transparent; }
.argo-scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
.argo-scroll-area::-webkit-scrollbar-thumb { background: var(--argo-ink-300); border-radius: 9999px; }
[data-argo-tooltip] { position: relative; }
.argo-fade-in { animation: argo-fade var(--argo-dur-slow) var(--argo-ease); }
.argo-stagger > * { opacity: 0; animation: argo-rise var(--argo-dur-slow) var(--argo-ease) forwards; }
.argo-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.argo-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.argo-stagger > *:nth-child(3) { animation-delay: 0.10s; }
.argo-stagger > *:nth-child(4) { animation-delay: 0.14s; }
.argo-stagger > *:nth-child(5) { animation-delay: 0.18s; }
.argo-stagger > *:nth-child(6) { animation-delay: 0.22s; }
@keyframes argo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Interactive charts (Module: branding refresh) ------------------- */
.argo-chart .argo-bar {
	transform-box: fill-box;
	transform-origin: bottom;
	animation: argoBarGrow 0.7s var(--argo-ease) both;
}
@keyframes argoBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.argo-chart .argo-trend {
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: argoTrendDraw 1.1s var(--argo-ease) 0.3s forwards;
}
@keyframes argoTrendDraw { to { stroke-dashoffset: 0; } }
.argo-donut { animation: argoDonutIn 0.8s var(--argo-ease) both; }
@keyframes argoDonutIn { from { transform: rotate(-90deg) scale(0.9); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.argo-chart .argo-bar, .argo-chart .argo-trend, .argo-donut { animation: none; stroke-dashoffset: 0; }
}

/* Accordion ------------------------------------------------------------- */
.argo-accordion { display: flex; flex-direction: column; gap: 0.6rem; }
.argo-acc-item {
	border: 1px solid var(--argo-border);
	border-radius: var(--argo-radius-lg);
	background: var(--argo-surface);
	overflow: hidden;
	transition: border-color var(--argo-dur) var(--argo-ease), box-shadow var(--argo-dur) var(--argo-ease);
}
.argo-acc-item.is-open { border-color: var(--argo-brand-300); box-shadow: var(--argo-shadow-sm); }
.argo-acc-head {
	width: 100%; display: flex; align-items: center; gap: 0.7rem;
	padding: 0.95rem 1.1rem; background: none; border: none; cursor: pointer;
	font-size: var(--argo-text-base); font-weight: 600; color: var(--argo-ink-900); text-align: left;
}
.argo-acc-head:hover { background: var(--argo-surface-2); }
.argo-acc-icon { display: inline-flex; color: var(--argo-brand); flex-shrink: 0; }
.argo-acc-title { flex: 1; }
.argo-acc-meta { font-size: var(--argo-text-xs); font-weight: 500; color: var(--argo-ink-400); }
.argo-acc-chevron { height: 1.1rem; width: 1.1rem; color: var(--argo-ink-400); transition: transform var(--argo-dur) var(--argo-ease); flex-shrink: 0; }
.argo-acc-item.is-open .argo-acc-chevron { transform: rotate(180deg); }
.argo-acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.32s var(--argo-ease); }
.argo-acc-item.is-open .argo-acc-panel { max-height: 1200px; }
.argo-acc-panel-inner { padding: 0.25rem 1.1rem 1.1rem; color: var(--argo-ink-600); font-size: var(--argo-text-sm); line-height: 1.6; }

/* Card menu button (•••) ----------------------------------------------- */
.argo-card-menu {
	height: 2rem; width: 2rem; border-radius: 0.6rem; border: 1px solid var(--argo-border);
	background: var(--argo-surface); color: var(--argo-ink-400); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--argo-dur) var(--argo-ease), color var(--argo-dur) var(--argo-ease);
}
.argo-card-menu:hover { background: var(--argo-surface-2); color: var(--argo-ink-700); }

/* Segmented control (chart toggles) ------------------------------------ */
.argo-segment { display: inline-flex; background: var(--argo-surface-2); border: 1px solid var(--argo-border); border-radius: 0.7rem; padding: 0.2rem; gap: 0.15rem; }
.argo-segment-btn {
	border: none; background: none; cursor: pointer; padding: 0.35rem 0.75rem; border-radius: 0.5rem;
	font-size: var(--argo-text-xs); font-weight: 600; color: var(--argo-ink-400);
	transition: background var(--argo-dur) var(--argo-ease), color var(--argo-dur) var(--argo-ease);
}
.argo-segment-btn.is-active { background: var(--argo-surface); color: var(--argo-brand); box-shadow: var(--argo-shadow-sm); }

/* Dashboard header (SwiftMove-style) ------------------------------------ */
.argo-dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.argo-dash-bell {
	position: relative; height: 2.85rem; width: 2.85rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--argo-surface); border: 1px solid var(--argo-border); color: var(--argo-ink-500);
	box-shadow: var(--argo-shadow-sm); transition: box-shadow var(--argo-dur) var(--argo-ease), transform var(--argo-dur) var(--argo-ease);
}
.argo-dash-bell:hover { box-shadow: var(--argo-shadow); transform: translateY(-1px); color: var(--argo-brand); }
.argo-dash-bell-dot { position: absolute; top: 0.6rem; right: 0.7rem; height: 0.55rem; width: 0.55rem; border-radius: 50%; background: var(--argo-accent); border: 2px solid var(--argo-surface); }
.argo-dash-profile {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.85rem 0.4rem 0.4rem;
	background: var(--argo-surface); border: 1px solid var(--argo-border); border-radius: 999px;
	box-shadow: var(--argo-shadow-sm); transition: box-shadow var(--argo-dur) var(--argo-ease), transform var(--argo-dur) var(--argo-ease);
}
.argo-dash-profile:hover { box-shadow: var(--argo-shadow); transform: translateY(-1px); }
.argo-dash-avatar { height: 2.1rem; width: 2.1rem; border-radius: 50%; background: var(--argo-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.argo-dash-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.argo-dash-search {
	flex: 1; min-width: 240px; max-width: 640px; display: flex; align-items: center; gap: 0.65rem;
	background: var(--argo-surface); border: 1px solid var(--argo-border); border-radius: 999px;
	padding: 0.7rem 1.25rem; color: var(--argo-ink-400); box-shadow: var(--argo-shadow-sm);
	transition: box-shadow var(--argo-dur) var(--argo-ease), border-color var(--argo-dur) var(--argo-ease);
}
.argo-dash-search:focus-within { border-color: var(--argo-brand-300); box-shadow: 0 0 0 3px rgba(25,22,109,0.10); }
.argo-dash-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.9rem; color: var(--argo-ink-900); }
.argo-dash-timeframe-btn {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; cursor: pointer;
	background: var(--argo-surface); border: 1px solid var(--argo-border); border-radius: 999px;
	color: var(--argo-brand); box-shadow: var(--argo-shadow-sm);
	transition: box-shadow var(--argo-dur) var(--argo-ease);
}
.argo-dash-timeframe-btn:hover { box-shadow: var(--argo-shadow); }
.argo-dash-add { border-radius: 999px !important; display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 1.1rem !important; padding-right: 1.4rem !important; }

/* Expandable row table (Recent Shipments) ------------------------------- */
.argo-rowtable { display: flex; flex-direction: column; }
.argo-rowtable-head, .argo-rowtable-row {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1.1fr 1fr 1.1fr 1fr 2rem;
	align-items: center; gap: 0.75rem;
}
.argo-rowtable-head {
	padding: 0 0.5rem 0.75rem; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.03em; color: var(--argo-ink-400); border-bottom: 1px solid var(--argo-border);
}
.argo-rowtable-item { border-bottom: 1px solid var(--argo-border); }
.argo-rowtable-item:last-child { border-bottom: none; }
.argo-rowtable-row {
	width: 100%; background: none; border: none; cursor: pointer; text-align: left;
	padding: 0.95rem 0.5rem; font-size: 0.875rem; color: var(--argo-ink-700);
	transition: background var(--argo-dur) var(--argo-ease); border-radius: 0.6rem;
	line-height: 1.4;
}
/* Every cell in the head + row is a direct <span> child of the grid.
 * Force consistent vertical alignment (center) + truncate long text so
 * one wide value (e.g. a long company name) doesn't push neighboring
 * columns out of their gridtrack and create the "untidy" look. The
 * status badge cell is allowed to size itself because the badge has
 * its own padding + radius and shouldn't be ellipsized. */
.argo-rowtable-head > span,
.argo-rowtable-row > span {
	min-width: 0;
	align-self: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.argo-rowtable-row > span:nth-child(6) { /* status badge column */
	overflow: visible;
}
.argo-rowtable-row:hover { background: var(--argo-surface-2); }
.argo-rowtable-chevron { height: 1.1rem; width: 1.1rem; color: var(--argo-ink-400); transition: transform var(--argo-dur) var(--argo-ease); }
.argo-rowtable-item.is-open .argo-rowtable-chevron { transform: rotate(180deg); }
.argo-rowtable-item.is-open .argo-rowtable-row { background: var(--argo-surface-2); }
.argo-rowtable-panel { max-height: 0; overflow: hidden; transition: max-height 0.32s var(--argo-ease); }
.argo-rowtable-item.is-open .argo-rowtable-panel { max-height: 800px; }
.argo-rowtable-panel-inner { padding: 0.5rem 1rem 1.25rem; }
.argo-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.5rem; }
.argo-detail-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--argo-ink-400); margin-bottom: 0.2rem; }
.argo-detail-v { display: block; font-size: 0.9rem; font-weight: 600; color: var(--argo-ink-900); }
.argo-chip-btn {
	display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; border-radius: 999px;
	font-size: 0.8rem; font-weight: 600; text-decoration: none;
	background: var(--argo-surface); border: 1px solid var(--argo-border); color: var(--argo-brand);
	transition: background var(--argo-dur) var(--argo-ease), border-color var(--argo-dur) var(--argo-ease);
}
.argo-chip-btn:hover { background: var(--argo-brand-light); border-color: var(--argo-brand-300); }
@media (max-width: 900px) {
	.argo-rowtable-head { display: none; }
	.argo-rowtable-row { grid-template-columns: 1fr 1fr 2rem; grid-auto-rows: min-content; row-gap: 0.35rem; }
	.argo-rowtable-row > span:nth-child(3), .argo-rowtable-row > span:nth-child(4), .argo-rowtable-row > span:nth-child(5) { display: none; }
}

/* Document vault (tabbed, profile-tied) --------------------------------- */
.argo-vault-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--argo-border); margin-bottom: 1.25rem; }
.argo-vault-tab {
	display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.95rem;
	background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
	font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-400);
	transition: color var(--argo-dur) var(--argo-ease), border-color var(--argo-dur) var(--argo-ease);
}
.argo-vault-tab:hover { color: var(--argo-ink-700); }
.argo-vault-tab.is-active { color: var(--argo-brand); border-bottom-color: var(--argo-brand); }
.argo-vault-tab-check {
	height: 1.1rem; width: 1.1rem; border-radius: 50%; border: 1.5px solid var(--argo-border-strong);
	display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.argo-vault-tab-check.is-done { background: var(--argo-success); border-color: var(--argo-success); }
.argo-vault-panel { display: none; }
.argo-vault-panel.is-active { display: block; animation: argoFadeIn 0.25s var(--argo-ease); }

.argo-doc-row {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	padding: 0.7rem 0.9rem; border: 1px solid var(--argo-border); border-radius: var(--argo-radius);
	background: var(--argo-surface);
}
.argo-doc-row-main { display: flex; flex-direction: column; min-width: 0; }
.argo-doc-row-name { font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.argo-doc-row-meta { font-size: var(--argo-text-xs); color: var(--argo-ink-400); }
.argo-doc-row-dl { font-size: var(--argo-text-sm); font-weight: 600; color: var(--argo-brand); text-decoration: none; flex-shrink: 0; }
.argo-doc-row-dl:hover { text-decoration: underline; }

/* ---- Create-shipment wizard ---------------------------------------- */
.argo-wiz-progress { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.argo-wiz-step { display:flex; align-items:center; gap:0.5rem; }
.argo-wiz-dot { height:1.9rem; width:1.9rem; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; background:var(--argo-surface-2); color:var(--argo-ink-400); transition:all var(--argo-dur,.2s) var(--argo-ease,ease); }
.argo-wiz-label { font-size:0.82rem; color:var(--argo-ink-400); font-weight:600; }
.argo-wiz-line { flex:0 0 1.5rem; height:2px; background:var(--argo-border); }
.argo-wiz-step.is-active .argo-wiz-dot { background:var(--argo-brand); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--argo-brand) 18%, transparent); }
.argo-wiz-step.is-active .argo-wiz-label { color:var(--argo-ink-900); }
.argo-wiz-step.is-done .argo-wiz-dot { background:var(--argo-teal,#09d8a1); color:#fff; }
@media (max-width:640px){ .argo-wiz-label { display:none; } }

.argo-freight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }
@media (min-width:768px){ .argo-freight-grid { grid-template-columns:repeat(4,1fr); } }
.argo-freight-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; padding:1.6rem 1rem; border:2px solid var(--argo-border); border-radius:1rem; background:var(--argo-surface,#fff); cursor:pointer; transition:all .18s var(--argo-ease,ease); text-align:center; }
.argo-freight-card:hover:not(.is-disabled){ border-color:color-mix(in srgb,var(--argo-brand) 45%,var(--argo-border)); transform:translateY(-2px); box-shadow:var(--argo-shadow,0 6px 18px rgba(16,24,64,.08)); }
.argo-freight-card .argo-freight-ico { color:var(--argo-ink-700); transition:color .18s; }
.argo-freight-card .argo-freight-name { font-weight:700; font-size:0.95rem; color:var(--argo-ink-900); }
.argo-freight-card.is-active { border-color:var(--argo-brand); background:var(--argo-brand); }
.argo-freight-card.is-active .argo-freight-ico, .argo-freight-card.is-active .argo-freight-name { color:#fff; }
.argo-freight-card.is-disabled { opacity:.55; cursor:not-allowed; }
.argo-freight-soon { position:absolute; top:0.5rem; right:0.5rem; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--argo-ink-400); background:var(--argo-surface-2); padding:0.1rem 0.4rem; border-radius:999px; }

.argo-chip-row { display:flex; flex-wrap:wrap; gap:0.6rem; }
.argo-chip { padding:0.6rem 1.2rem; border:2px solid var(--argo-border); border-radius:0.7rem; background:var(--argo-surface,#fff); font-weight:600; font-size:0.88rem; color:var(--argo-ink-700); cursor:pointer; transition:all .15s var(--argo-ease,ease); }
.argo-chip:hover { border-color:color-mix(in srgb,var(--argo-brand) 40%,var(--argo-border)); }
.argo-chip.is-active { border-color:var(--argo-brand); color:var(--argo-brand); background:color-mix(in srgb,var(--argo-brand) 8%,#fff); }
.argo-hint { font-weight:400; font-size:0.78rem; color:var(--argo-ink-400); }
.argo-req { color:var(--argo-danger,#ef4444); }

/* ---- Merged currency + value field --------------------------------- */
.argo-money-group { display:flex; align-items:stretch; border:1px solid var(--argo-border); border-radius:0.7rem; overflow:hidden; background:var(--argo-surface,#fff); transition:border-color .15s; }
.argo-money-group:focus-within { border-color:var(--argo-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--argo-brand) 14%,transparent); }
.argo-money-cur { border:0; background:var(--argo-surface-2,#f1f5f9); padding:0.6rem 0.6rem; font-weight:600; font-size:0.88rem; color:var(--argo-ink-700); border-right:1px solid var(--argo-border); cursor:pointer; max-width:7.5rem; }
.argo-money-cur:focus { outline:none; }
.argo-money-val { border:0; flex:1; padding:0.6rem 0.85rem; font-size:0.95rem; background:transparent; min-width:0; }
.argo-money-val:focus { outline:none; }

/* Package count + unit composite. The count MUST stay visible: previously the
   unit <select> was flex:0 0 auto (non-shrinking) while the count had
   min-width:0, so in a narrow 2-column cell the select held its intrinsic
   width and the number box collapsed to ~0. Now the count keeps a firm
   min-width, the unit is allowed to shrink, and the group wraps (unit drops
   below the count) rather than crushing either one. */
.argo-pkg-group { display:flex; flex-wrap:wrap; align-items:stretch; gap:0.5rem; }
.argo-pkg-count { flex:2 1 5rem; min-width:4.5rem; }
.argo-pkg-unit  { flex:1 1 7rem; min-width:6rem; max-width:11rem; cursor:pointer; }

/* ---- Shipment Summary hero (blue) ---------------------------------- */
.argo-ship-hero { background:var(--argo-brand,#19166d); border-radius:1.25rem; padding:1.75rem 1.9rem; color:#fff; box-shadow:var(--argo-shadow,0 10px 30px rgba(16,24,64,.18)); }
.argo-ship-hero-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.6rem; }
.argo-ship-hero-title { font-size:1.2rem; font-weight:700; letter-spacing:-0.01em; }
.argo-ship-hero-edit { display:inline-flex; align-items:center; gap:0.35rem; background:none; border:0; color:#fff; font-size:0.8rem; font-weight:500; cursor:pointer; padding:0; }
.argo-ship-hero-edit svg { color:var(--argo-accent,#fe5303); }
.argo-ship-hero-edit:hover { opacity:.85; }
.argo-ship-hero-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:1.5rem; }
@media (max-width:680px){ .argo-ship-hero-grid { grid-template-columns:1fr; gap:1.5rem; } }

.argo-ship-route { display:flex; flex-direction:column; gap:1.15rem; position:relative; }
.argo-ship-stop { display:flex; gap:0.85rem; align-items:flex-start; position:relative; }
.argo-ship-stop-body { padding-top:0.05rem; }
.argo-ship-stop .argo-ship-dot { flex:0 0 auto; width:1.4rem; height:1.4rem; border-radius:999px; position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; }
.argo-ship-dot.is-origin { background:color-mix(in srgb,var(--argo-sky,#03a2fe) 35%,var(--argo-brand,#19166d)); }
.argo-ship-dot.is-origin::after { content:""; width:0.6rem; height:0.6rem; border-radius:999px; background:var(--argo-sky,#03a2fe); }
.argo-ship-pin { flex:0 0 auto; width:1.4rem; height:1.4rem; display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:1; line-height:0; }
.argo-ship-stop:first-child::after { content:""; position:absolute; left:0.65rem; top:1.5rem; bottom:-1.2rem; border-left:2px dotted rgba(255,255,255,.45); }
.argo-ship-stop-name { font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; line-height:1.2; }
.argo-ship-stop-sub { font-size:0.85rem; color:rgba(255,255,255,.72); margin-top:0.25rem; line-height:1.35; }
.argo-ship-status-line { display:flex; align-items:center; gap:0.55rem; margin-top:0.15rem; font-size:0.92rem; color:#fff; flex-wrap:wrap; }
.argo-ship-status-charges { color:rgba(255,255,255,0.82); font-size:0.85rem; }
.argo-ship-status-charges strong { color:#fff; }
.argo-ship-status-charges-list { margin-top:0.25rem; font-size:0.78rem; color:rgba(255,255,255,0.62); padding-left:1.5rem; }
.argo-ship-status-ico { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:1.4rem; height:1.4rem; border-radius:999px; border:1.5px solid var(--argo-accent,#fe5303); color:var(--argo-accent,#fe5303); }

.argo-ship-refs { display:flex; flex-direction:column; gap:1.05rem; }
.argo-ship-ref-block { display:flex; flex-direction:column; gap:0; }
.argo-ship-ref-k { font-size:0.85rem; font-weight:400; color:rgba(255,255,255,.7); line-height:1.4; }
.argo-ship-ref-v { font-size:0.9rem; font-weight:400; color:rgba(255,255,255,.92); line-height:1.4; }
.argo-ship-ref-big { font-size:2.35rem; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin-top:0.05rem; }
.argo-ship-ref-count { font-size:1.05rem; font-weight:400; color:rgba(255,255,255,.92); }
.argo-ship-ref-count-n { color:var(--argo-accent,#fe5303); font-weight:700; }
@media (max-width:680px){ .argo-ship-ref-big { font-size:2rem; } }

/* Tracker: solid done, dashed todo, container marker */
.argo-ship-track2 { position:relative; height:30px; margin-top:1.9rem; }
.argo-ship-track2-line { position:absolute; top:50%; transform:translateY(-50%); height:0; }
.argo-ship-track2-line.is-done { left:0; border-top:2px solid rgba(255,255,255,.9); }
.argo-ship-track2-line.is-todo { border-top:2px dashed rgba(255,255,255,.55); }
.argo-ship-track2-end { position:absolute; top:50%; transform:translateY(-50%); width:0.8rem; height:0.8rem; border-radius:999px; background:var(--argo-sky,#03a2fe); z-index:2; }
.argo-ship-track2-end.is-start { left:0; }
.argo-ship-track2-end.is-finish { right:0; }
.argo-ship-track2-marker { position:absolute; top:50%; transform:translate(-50%,-50%); z-index:3; line-height:0; }
.argo-ship-track2.is-cancelled .argo-ship-track2-line.is-done { border-top-color:rgba(255,255,255,.3); }

/* --- Argo Invoices --- */
.argo-invoice-table { border-collapse: collapse; }
.argo-invoice-table th { font-weight: 600; color: var(--argo-ink-500); font-size: .8rem; white-space: nowrap; }
/* Prevent the per-character wrapping that happens when the table is
   forced into a viewport narrower than its natural content (e.g. the
   customer Argo Invoices page on mobile). The parent .argo-table-scroll
   handles horizontal scrolling instead. Multi-line content like long
   supplier or notes columns can opt back into wrapping via .wrap. */
.argo-invoice-table td { white-space: nowrap; }
.argo-invoice-table td.wrap { white-space: normal; }
.argo-invoice-table tbody tr:last-child { border-bottom: none !important; }
.argo-invoice-table tbody tr:hover { background: var(--argo-surface-2); }
.argo-li-row .argo-input { padding-top: .4rem; padding-bottom: .4rem; }

/* ---------------------------------------------------------------------
 * Argo Invoice accordion cards (mobile-only view of the customer list).
 *
 * Native <details>/<summary> for free a11y + keyboard support. The
 * summary always shows the "pay or not pay" decision info (invoice
 * number, status badge, balance, chevron); the expanded body shows the
 * supporting context (customer, BL, dates). The Pay button sits in a
 * sibling action footer outside <details>, so one-tap pay never
 * requires expanding the accordion.
 * ------------------------------------------------------------------- */
.argo-inv-card {
	background: #fff;
	border: 1px solid var(--argo-border);
	border-radius: 12px;
	overflow: hidden;
}
.argo-inv-card-details { border: 0; }
.argo-inv-card-summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 16px 12px;
	position: relative;
	user-select: none;
	-webkit-tap-highlight-color: rgba(25, 22, 109, 0.06);
}
.argo-inv-card-summary::-webkit-details-marker { display: none; }
.argo-inv-card-summary::marker { content: ''; }
.argo-inv-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-right: 24px; /* leave room for chevron */
}
/* Multi-select checkbox sits left of the invoice number on mobile.
   The wrapping <label> + onclick=stopPropagation stops the tap from
   bubbling up to <summary> and toggling the accordion. Sized large
   enough to be a comfortable tap target on iPhone-class screens. */
.argo-inv-card-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 2px;
	cursor: pointer;
	padding: 2px;
}
.argo-inv-card-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--argo-brand, #19166d);
	cursor: pointer;
	margin: 0;
}
.argo-inv-card-num {
	font-weight: 700;
	font-size: .95rem;
	color: var(--argo-ink-900);
	letter-spacing: -0.01em;
}
.argo-inv-card-balance {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--argo-ink-900);
	margin-top: 6px;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.argo-inv-card-chevron {
	position: absolute;
	right: 14px;
	top: 16px;
	color: var(--argo-ink-400);
	transition: transform 0.18s ease, color 0.18s ease;
	display: inline-flex;
}
.argo-inv-card-details[open] .argo-inv-card-chevron {
	transform: rotate(180deg);
	color: var(--argo-brand);
}
.argo-inv-card-meta {
	margin: 0;
	padding: 12px 16px 14px;
	border-top: 1px solid var(--argo-border);
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 8px 12px;
	font-size: .85rem;
}
.argo-inv-card-meta dt {
	color: var(--argo-ink-500);
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	align-self: center;
}
.argo-inv-card-meta dd {
	margin: 0;
	color: var(--argo-ink-900);
	font-weight: 500;
	word-break: break-word;
}
.argo-inv-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid var(--argo-border);
	background: var(--argo-surface-2, #f8fafc);
}
.argo-inv-card-link {
	color: var(--argo-brand);
	font-weight: 700;
	font-size: .85rem;
	text-decoration: none;
	padding: 8px 4px;
}
.argo-inv-card-link--teal { color: var(--argo-teal, #0d9488); }
.argo-inv-card-pay {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--argo-accent, #fe5303);
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	padding: 10px 22px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	min-height: 40px; /* easier tap target */
	transition: background 0.15s ease;
}
.argo-inv-card-pay svg { display: inline-block; flex-shrink: 0; }
.argo-inv-card-pay:hover { background: var(--argo-accent-dark, #e04802); }
.argo-inv-card-pay:active { transform: translateY(1px); }
.argo-inv-card-pay:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Notification center (Comms) --- */
.argo-chip { font-size:.8rem; font-weight:600; color:var(--argo-ink-500); background:var(--argo-surface-2); border:1px solid transparent; border-radius:999px; padding:.35rem .8rem; cursor:pointer; transition:all var(--argo-dur); }
.argo-chip:hover { color:var(--argo-ink-800); }
.argo-chip.is-active { background:var(--argo-brand); color:#fff; }
.argo-notif-item { display:flex; align-items:flex-start; gap:.75rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--argo-border); position:relative; }
.argo-notif-item:last-child { border-bottom:none; }
.argo-notif-item.is-unread { background:var(--argo-brand-light); }
.argo-notif-item-title { font-size:.9rem; font-weight:600; color:var(--argo-ink-900); }
.argo-notif-item-msg { font-size:.83rem; color:var(--argo-ink-500); margin-top:.15rem; }
.argo-notif-item-meta { font-size:.72rem; color:var(--argo-ink-400); margin-top:.3rem; text-transform:capitalize; }
.argo-notif-cat-ico { flex-shrink:0; width:1.9rem; height:1.9rem; display:flex; align-items:center; justify-content:center; border-radius:.6rem; background:var(--argo-surface-2); font-size:1rem; }
.argo-notif-prio { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px; }
.argo-notif-prio--warning { background:var(--argo-warning); }
.argo-notif-prio--danger { background:var(--argo-danger); }
.argo-notif-item-acts { display:flex; flex-direction:column; gap:.25rem; flex-shrink:0; }
.argo-notif-act { font-size:.72rem; font-weight:600; color:var(--argo-brand); background:none; border:none; cursor:pointer; padding:.1rem .2rem; text-align:right; }
.argo-notif-act:hover { text-decoration:underline; }

/* --- Reports & Analytics --- */
.argo-stat-brand { color:var(--argo-brand); }
.argo-stat-success { color:var(--argo-success); }
.argo-stat-warning { color:var(--argo-warning); }
.argo-stat-info { color:var(--argo-info); }
.argo-stat-danger { color:var(--argo-danger); }
.argo-stat-purple { color:var(--argo-purple); }
.argo-stat-neutral { color:var(--argo-ink-700); }
.argo-report-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.argo-report-table th { text-align:left; font-weight:600; color:var(--argo-ink-500); padding:.6rem .75rem; border-bottom:1px solid var(--argo-border); white-space:nowrap; }
.argo-report-table td { padding:.6rem .75rem; border-bottom:1px solid var(--argo-border); color:var(--argo-ink-800); }
.argo-report-table tbody tr:hover { background:var(--argo-surface-2); }
.argo-printonly { display:none; }
@media print {
	.argo-noprint, .argo-sidebar, .argo-topbar { display:none !important; }
	.argo-printonly { display:block !important; }
	.argo-card { box-shadow:none !important; border:1px solid #e5e7eb !important; break-inside:avoid; }
	body, .argo-shell, .argo-main { background:#fff !important; }
	.argo-report-table { font-size:11px; }
}

/* --- Shipment list sort + stat-card links --- */
.argo-sort { cursor:pointer; user-select:none; }
.argo-sort:hover { color:var(--argo-brand); }
.argo-sort-ind { font-size:.7em; color:var(--argo-brand); }
.argo-stat-link { display:block; text-decoration:none; transition:transform var(--argo-dur); }
.argo-stat-link:hover { transform:translateY(-2px); }

/* Anchor offset so #vault deep-links aren't hidden under sticky UI */
.argo-anchor-offset { scroll-margin-top: 90px; }

/* --- Per-shipment "next action" banner --- */
.argo-na { display:flex; align-items:flex-start; gap:0.85rem; padding:1rem 1.15rem; border-radius:14px; margin-bottom:1rem; border:1px solid transparent; }
.argo-na-ico { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.argo-na-body { flex:1 1 auto; min-width:0; }
.argo-na-title { font-weight:700; font-size:1rem; color:var(--argo-ink-900); }
.argo-na-detail { font-size:0.9rem; color:var(--argo-ink-600); margin-top:0.15rem; line-height:1.5; }
.argo-na-cta { flex:0 0 auto; align-self:center; background:var(--argo-brand); color:#fff; text-decoration:none; font-weight:600; font-size:0.85rem; padding:0.5rem 1rem; border-radius:9px; white-space:nowrap; transition:opacity var(--argo-dur); }
.argo-na-cta:hover { opacity:0.9; }
.argo-na-close { flex:0 0 auto; align-self:flex-start; background:none; border:none; font-size:1.35rem; line-height:1; color:var(--argo-ink-400); cursor:pointer; padding:0 0 0 0.25rem; margin-left:0.25rem; }
.argo-na-close:hover { color:var(--argo-ink-700); }
.argo-na--warning { background:var(--argo-warning-bg); border-color:color-mix(in srgb, var(--argo-warning) 25%, transparent); }
.argo-na--warning .argo-na-ico { background:var(--argo-warning); color:#fff; }
.argo-na--warning .argo-na-cta { background:var(--argo-warning); }
.argo-na--info { background:var(--argo-info-bg); border-color:color-mix(in srgb, var(--argo-info) 22%, transparent); }
.argo-na--info .argo-na-ico { background:var(--argo-info); color:#fff; }
.argo-na--success { background:var(--argo-success-bg); border-color:color-mix(in srgb, var(--argo-success) 22%, transparent); }
.argo-na--success .argo-na-ico { background:var(--argo-success); color:#fff; }
.argo-na--purple { background:var(--argo-purple-bg); border-color:color-mix(in srgb, var(--argo-purple) 22%, transparent); }
.argo-na--purple .argo-na-ico { background:var(--argo-purple); color:#fff; }
.argo-na--neutral { background:var(--argo-surface-2); border-color:var(--argo-border); }
.argo-na--neutral .argo-na-ico { background:var(--argo-ink-400); color:#fff; }
@media (max-width:640px){ .argo-na { flex-wrap:wrap; } .argo-na-cta { width:100%; text-align:center; margin-top:0.5rem; } }

/* --- First-login welcome modal --- */
.argo-welcome-overlay { position:fixed; inset:0; background:rgba(15,13,46,0.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:9999; padding:1rem; animation:argoFadeIn .2s ease; }
.argo-welcome-overlay.is-closing { opacity:0; transition:opacity .2s ease; }
.argo-welcome-modal { position:relative; background:#fff; border-radius:20px; max-width:440px; width:100%; padding:2rem 1.75rem 1.5rem; box-shadow:0 24px 60px rgba(15,13,46,0.35); }
.argo-welcome-close { position:absolute; top:0.85rem; right:1rem; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--argo-ink-400); cursor:pointer; }
.argo-welcome-close:hover { color:var(--argo-ink-700); }
.argo-welcome-progress { display:flex; gap:0.4rem; justify-content:center; margin-bottom:1.25rem; }
.argo-welcome-progress span { width:28px; height:4px; border-radius:2px; background:var(--argo-border); transition:background var(--argo-dur); }
.argo-welcome-progress span.is-active { background:var(--argo-brand); }
.argo-welcome-step { display:none; text-align:center; }
.argo-welcome-step.is-active { display:block; animation:argoFadeIn .25s ease; }
.argo-welcome-img { display:block; width:100%; margin:0 0 1.25rem; max-width:none; border-radius:14px; aspect-ratio:440 / 180; object-fit:cover; box-shadow:0 6px 18px rgba(25,22,109,0.18); }
.argo-welcome-ico { width:60px; height:60px; border-radius:16px; background:var(--argo-brand-light); color:var(--argo-brand); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.argo-welcome-title { font-size:1.25rem; font-weight:700; color:var(--argo-ink-900); margin:0 0 0.6rem; }
.argo-welcome-text { font-size:0.92rem; color:var(--argo-ink-600); line-height:1.6; margin:0 0 1rem; }
.argo-welcome-link { display:inline-block; font-weight:600; font-size:0.88rem; color:var(--argo-brand); text-decoration:none; }
.argo-welcome-link:hover { text-decoration:underline; }
.argo-welcome-actions { display:flex; align-items:center; justify-content:space-between; margin-top:1.5rem; padding-top:1.15rem; border-top:1px solid var(--argo-border); }
@keyframes argoFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* =============================================================================
 * MOBILE FIXES (v1.59.0 — contained, additive only)
 *
 * Strict rule: every rule in this block must be inside a @media query AND must
 * not touch any selector defined above (verified via grep before editing). The
 * desktop cascade is therefore provably unchanged.
 *
 * Six specific issues addressed (see Argo update doc 2026-05-30):
 *   1. Charges mobile list — every charge stacks 8 rows; needs collapsed-by-
 *      default state showing BL + Reference + Status, expand for the rest.
 *   2. Reports filter date inputs render as empty boxes on Safari — Safari
 *      ignores `placeholder` on <input type="date">.
 *   3. Shipment Summary card and other cards on detail page extend past the
 *      right edge of the viewport (horizontal scroll).
 *   4. Documents & Cargo units cards have the same overflow.
 *   5. Dashboard Recent Shipments — status badge cut off mid-word because the
 *      rowtable mobile rule hides cols 3-5 but the visible Status (col 6) is
 *      pushed off-screen by the chevron column.
 *   6. Safari shrinks <select class="argo-input"> because no -webkit-appearance
 *      reset is applied.
 *
 * Browser-prefix-scoped (not media-scoped) — issue 6:
 * =========================================================================== */

/* (6) Form select — soft-rounded pill with chevron, matching the broader
 *     Argo input aesthetic. Native `<select>` (not a JS replacement) so
 *     mobile keeps the OS picker wheel (iOS) / system dropdown (Android)
 *     and a11y/keyboard nav stay intact. The opened menu uses browser
 *     defaults; only the closed-state trigger is restyled here.
 *
 *     Safari shrinking is the historical reason for the appearance reset —
 *     without it, selects render at half-height on iOS/macOS. The custom
 *     SVG chevron is positioned via background-position so the click
 *     target remains the entire input.
 *
 *     Tokens: chevron stroke uses --argo-ink-500 so it tracks the design
 *     system; hover/focus states match text input behavior so adjacent
 *     selects + text inputs feel like siblings. */
select.argo-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
	background-size: 1.05rem 1.05rem;
	padding-right: 2.65rem;
	min-height: 2.95rem;
	line-height: 1.25;
	cursor: pointer;

	/* Hover: subtle border shift so the dropdown signals interactivity
	 * before the user clicks. Text inputs don't get this (they'd look
	 * like errors); selects do because the chevron telegraphs a menu. */
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
select.argo-input:hover:not(:disabled):not(:focus) {
	border-color: var(--argo-ink-300, #cbd5e1);
}
select.argo-input:disabled {
	background-color: var(--argo-surface-2);
	color: var(--argo-ink-400);
	cursor: not-allowed;
	opacity: 0.75;
}
/* Empty value styling — when no option is selected yet, the text is
 * rendered at the lighter placeholder color to match how text inputs
 * treat empty fields. Pages opt in via `data-argo-empty` attribute or
 * by leaving the first option as value="" (the common pattern in our
 * existing templates: `<option value="">—</option>`). */
select.argo-input:invalid,
select.argo-input[data-argo-empty="1"] {
	color: var(--argo-ink-400);
}

/* =============================================================================
 * Shipments control panel (v1.65.0 redesign)
 * Flat white card, no nested grey boxes. Search is the visual anchor; status
 * renders as a horizontal chip strip; customer + cargo type are compact
 * selects sitting beside the chips on desktop, behind a "More filters"
 * toggle on mobile.
 * The brief is the modern-SaaS look (Linear, Stripe, Ramp, Flexport): clear
 * hierarchy, single-layer background, no inset grey-on-grey.
 * ========================================================================== */
.argo-ship-controls {
	background: #fff;
	border: 1px solid var(--argo-border, #e5e7eb);
	border-radius: 1rem;
	padding: 1.25rem;
	margin-bottom: 1.5rem;  /* clear gap before the shipment rowtable below */
	box-shadow: 0 1px 2px rgba(15, 13, 66, 0.04);
}

/* Search field — full width, search icon inside, ~48px tall. */
.argo-ship-controls-search {
	position: relative;
	margin-bottom: 0.85rem;
}
.argo-ship-controls-search-icon {
	position: absolute;
	left: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--argo-ink-400, #9ca3af);
	pointer-events: none;
}
.argo-ship-controls-search-input {
	width: 100%;
	height: 3rem;
	padding: 0 1rem 0 2.6rem;
	border: 1px solid var(--argo-border, #e5e7eb);
	border-radius: 0.625rem;
	background: #fff;
	font-size: 0.95rem;
	color: var(--argo-ink-900);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.argo-ship-controls-search-input::placeholder { color: var(--argo-ink-400, #9ca3af); }
.argo-ship-controls-search-input:focus {
	border-color: var(--argo-brand);
	box-shadow: 0 0 0 3px rgba(25, 22, 109, 0.14);
}

/* Status chip strip — single horizontal row. Scrolls on overflow rather
 * than wrapping so the strip stays visually clean at any width. */
.argo-ship-chips {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0.15rem;  /* clearance for chip shadow inside scroll area */
}
.argo-ship-chips::-webkit-scrollbar { display: none; }
.argo-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 2.15rem;
	padding: 0 0.85rem;
	border: 1px solid var(--argo-border-strong, #d1d5db);
	border-radius: 9999px;
	background: #fff;
	color: var(--argo-ink-700, #374151);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
	white-space: nowrap;
}
.argo-chip:hover {
	background: var(--argo-surface-2, #f5f5fa);
	color: var(--argo-ink-900);
}
.argo-chip.is-active {
	background: var(--argo-brand, #19166d);
	border-color: var(--argo-brand, #19166d);
	color: #fff;
}

/* The "More filters" row — customer + cargo type compact selects.
 * Sits beside the chips on desktop in a 2-column layout; collapses behind
 * a toggle on mobile (rules in the @media block). */
.argo-ship-controls-more {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid #eef0f3;
}
.argo-ship-controls-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}
.argo-ship-controls-field { min-width: 0; }
.argo-ship-controls-foot {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

/* Mobile toggle button — hidden on desktop, revealed in the @media block.
 * Sits at the bottom of the controls panel when the More filters block is
 * collapsed; turns into an "Hide filters" affordance when expanded. */
.argo-ship-controls-more-toggle {
	display: none;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.85rem;
	padding: 0.55rem 0.85rem;
	background: transparent;
	border: 1px solid var(--argo-border, #e5e7eb);
	border-radius: 0.55rem;
	color: var(--argo-ink-700);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}
.argo-ship-controls-more-toggle[aria-expanded="true"] {
	background: var(--argo-brand-light, #ececf6);
	color: var(--argo-brand);
	border-color: var(--argo-brand);
}

/* Activity timeline "view all" toggle — created by JS for timelines with >3
 * items so users on mobile can opt-in to the full list. Hidden on desktop
 * because all items are already visible there; the mobile @media block
 * unhides it. */
.argo-timeline-toggle {
	display: none;
}

/* Mobile-scoped fixes — issues 1-5: */
@media (max-width: 767px) {

	/* (3, 4) Prevent any child element from causing page-level horizontal
	 * scroll. The portal's main element is `<main class="p-4 sm:p-6 lg:p-8">`
	 * inside a `min-w-0` flex column. On a phone, if any descendant has
	 * intrinsic width > viewport (a long unwrapping span, a hard-set width on
	 * a child container, an unbounded SVG), it pushes the whole page sideways.
	 * Defensive clamp: hide horizontal overflow at the page root and force
	 * cards to respect their container width. Desktop is untouched because
	 * this rule is inside the media query. */
	body, html { overflow-x: hidden; max-width: 100vw; }
	.argo-app { max-width: 100vw; overflow-x: hidden; }
	.argo-card { max-width: 100%; overflow: hidden; }
	.argo-card-body { max-width: 100%; overflow-wrap: anywhere; }

	/* (5) Dashboard / Shipments list rowtable — 2-line mobile layout.
	 * Brief: BL number is the most important field; status must never push it
	 * off-screen. Solution — on mobile, the row becomes a 2-row grid:
	 *   Row 1: Reference (col 1) + BL (col 3) on one line, full-width to the
	 *          chevron.
	 *   Row 2: Status badge (col 6) below, with the chevron sitting in the
	 *          right column spanning both rows.
	 * Columns 2 (Client), 4 (Arrival), 5 (Port) are hidden on mobile because
	 * they fit poorly and are available on tap-to-expand.
	 *
	 * The grid uses 3 columns (Reference auto-sized, BL fluid, chevron fixed)
	 * and 2 rows. Status takes the full width of the first two columns on row
	 * 2 by spanning. The chevron spans both rows on the right. */
	.argo-rowtable-row {
		grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) 1.25rem !important;
		grid-template-rows: auto auto !important;
		gap: 0.35rem 0.6rem !important;
		padding: 0.85rem 0.5rem 0.85rem 0.85rem !important;
		font-size: 0.82rem !important;
		align-items: center !important;
	}
	.argo-rowtable-row > span:nth-child(1) {
		grid-row: 1; grid-column: 1;
		white-space: nowrap;
	}
	.argo-rowtable-row > span:nth-child(2),
	.argo-rowtable-row > span:nth-child(4),
	.argo-rowtable-row > span:nth-child(5) { display: none !important; }
	.argo-rowtable-row > span:nth-child(3) {
		grid-row: 1; grid-column: 2;
		display: block;
		font-size: 0.78rem;
		color: var(--argo-ink-500);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.argo-rowtable-row > span:nth-child(6) {
		grid-row: 2; grid-column: 1 / span 2;
		display: flex;
		justify-content: flex-start;
	}
	.argo-rowtable-row > span:nth-child(6) .argo-badge {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		line-height: 1.2;
		font-size: 0.7rem;
		padding: 0.22rem 0.6rem;
	}
	.argo-rowtable-row > span:nth-child(7) {
		grid-row: 1 / span 2; grid-column: 3;
		align-self: center;
	}

	/* Shipments control panel on mobile — flatten the card a touch
	 * (slightly less padding) and reveal the More filters toggle. The
	 * customer + cargo type selects collapse to a stack until the toggle
	 * is tapped. The control panel still sits as a single white card
	 * with no nested grey backgrounds. */
	.argo-ship-controls {
		padding: 1rem;
		margin-bottom: 1rem;
		border-radius: 0.85rem;
	}
	/* Stack the two select fields on mobile rather than 2-col grid. */
	.argo-ship-controls-row { grid-template-columns: 1fr; }
	/* Show the toggle on mobile, hide the More filters section by default. */
	.argo-ship-controls-more-toggle { display: inline-flex; }
	.argo-ship-controls-more { display: none; }
	.argo-ship-controls-more.is-open { display: block; }

	/* (1) Charges mobile — collapse the verbose 8-row layout into a tappable
	 * summary card showing only BL/AWB, Reference, and Status. Tap to reveal
	 * Client/Charge/Category/Amount/Balance.
	 *
	 * Implementation uses CSS only via the existing argo-table--responsive
	 * structure: each `<tr>` becomes a card; we hide most `<td>`s by default
	 * and reveal them when an `is-expanded` class lands on the row. JS hookup
	 * lives in argo-app.js (added separately).
	 *
	 * The data-label values come from the column labels set in PHP: "BL / AWB",
	 * "Reference", "Status" stay visible; "Client", "Charge", "Category",
	 * "Amount", "Balance" are hidden until expanded. */
	.argo-table--responsive tbody tr {
		position: relative;
		cursor: pointer;
		padding-right: 2rem;  /* room for chevron */
	}
	.argo-table--responsive tbody tr::after {
		content: "";
		position: absolute;
		right: 0.75rem;
		top: 0.9rem;
		width: 0.65rem;
		height: 0.65rem;
		border-right: 2px solid var(--argo-ink-400);
		border-bottom: 2px solid var(--argo-ink-400);
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}
	.argo-table--responsive tbody tr.is-expanded::after {
		transform: rotate(-135deg);
		top: 1.05rem;
	}
	/* Collapsed defaults: hide every td except the ones we want as summary.
	 * The visible cells are picked by data-label so we don't need to change
	 * column order in PHP. */
	.argo-table--responsive tbody td { display: none; }
	.argo-table--responsive tbody td[data-label="BL / AWB"],
	.argo-table--responsive tbody td[data-label="Reference"],
	.argo-table--responsive tbody td[data-label="Shipment"],
	.argo-table--responsive tbody td[data-label="Invoice #"],
	.argo-table--responsive tbody td[data-label="Status"] { display: flex; }
	.argo-table--responsive tbody tr.is-expanded td { display: flex; }

	/* (2) Safari hides placeholder text on empty <input type="date">. Layer a
	 * faux placeholder via ::before on the input when its value is empty.
	 * Safari supports the :empty pseudo on inputs since iOS 14; the
	 * `value=""` attribute is what triggers it pre-interaction. We use the
	 * data-* pattern + a wrapping label is already in place. */
	input[type="date"].argo-input::-webkit-date-and-time-value {
		text-align: left;
		min-height: 1.25rem;
	}
	input[type="date"].argo-input:not(:focus):invalid::-webkit-datetime-edit {
		color: var(--argo-ink-400);
	}
	/* Show a clearer hint when the date input has no value yet. */
	input[type="date"].argo-input {
		min-height: 2.85rem;
		padding-right: 0.75rem;
	}

	/* =========================================================================
	 * SHIPMENT DETAIL — Stage B mobile overhaul
	 * Strategy: keep the hero card (.argo-ship-hero) fully visible as the page
	 * identity. Collapse every secondary card (.argo-card) into an accordion:
	 * the card-head is tappable, a chevron rotates, the body hides until the
	 * card receives .is-expanded. The hero is not an .argo-card so it stays
	 * open. JS wiring lives in argo-app.js (bindShipmentDetailAccordions).
	 * ========================================================================= */

	/* Scope these rules to the shipment detail page only via the
	 * .argo-shipment-detail-grid class on its outer grid wrapper. The
	 * dashboard also uses .grid.lg\:grid-cols-3 for its layout, so the
	 * earlier selector was over-matching and collapsing dashboard cards
	 * too (breaking Recent Shipments / Activity / Quick Help inner
	 * widgets). The detail-page-only class fixes that. */
	.argo-shipment-detail-grid .argo-card .argo-card-head,
	.argo-shipment-detail-grid [data-argo-reimb] .argo-card-head,
	.argo-shipment-detail-grid [data-argo-charges-panel] .argo-card-head,
	.argo-shipment-detail-grid [data-argo-broker-invoices] .argo-card-head,
	.argo-shipment-detail-grid [data-argo-documents-panel] .argo-card-head {
		cursor: pointer;
		position: relative;
		padding-right: 2.5rem;  /* room for chevron */
		user-select: none;
	}
	.argo-shipment-detail-grid .argo-card .argo-card-head::after,
	.argo-shipment-detail-grid [data-argo-reimb] .argo-card-head::after,
	.argo-shipment-detail-grid [data-argo-charges-panel] .argo-card-head::after,
	.argo-shipment-detail-grid [data-argo-broker-invoices] .argo-card-head::after,
	.argo-shipment-detail-grid [data-argo-documents-panel] .argo-card-head::after {
		content: "";
		position: absolute;
		right: 1rem;
		top: 50%;
		width: 0.55rem;
		height: 0.55rem;
		margin-top: -0.4rem;
		border-right: 2px solid var(--argo-ink-400);
		border-bottom: 2px solid var(--argo-ink-400);
		transform: rotate(45deg);
		transition: transform 0.18s ease;
	}
	.argo-shipment-detail-grid .argo-card.is-expanded .argo-card-head::after,
	.argo-shipment-detail-grid .argo-card.is-expanded > .argo-card-head::after {
		transform: rotate(-135deg);
		margin-top: -0.1rem;
	}
	/* Collapsed body — only on cards NOT marked is-expanded.
	 * Note: the hero (.argo-ship-hero) is not an .argo-card so it stays open. */
	.argo-shipment-detail-grid .argo-card:not(.is-expanded) > .argo-card-body {
		display: none;
	}

	/* Documents shipment-panel doesn't use .argo-card-head/body — it just uses
	 * .argo-card with section h3s inside. Skip the auto-collapse for that
	 * specific card (it has its own document-list structure). Same caveat for
	 * any card without a card-head: leave it open by default since we can't
	 * give it an accordion affordance. */
	.argo-shipment-detail-grid .argo-card:not(:has(> .argo-card-head)) > .argo-card-body {
		display: block;
	}

	/* Activity & status history — show first 3 events, hide rest behind a
	 * "View all activity" toggle. The timeline doesn't have a card-head we
	 * can collapse against, so we instead trim the visible items. JS adds
	 * the toggle button. */
	.argo-shipment-detail-grid .argo-card .argo-timeline > .argo-timeline-item:nth-child(n+4) {
		display: none;
	}
	.argo-shipment-detail-grid .argo-card .argo-timeline.is-expanded > .argo-timeline-item:nth-child(n+4) {
		display: flex;
	}
	.argo-timeline-toggle {
		display: block;
		width: 100%;
		margin-top: 0.85rem;
		padding: 0.6rem 0.75rem;
		background: var(--argo-surface-2, #f5f5fa);
		border: 1px solid var(--argo-border);
		border-radius: 0.55rem;
		font-size: 0.82rem;
		font-weight: 600;
		color: var(--argo-brand);
		cursor: pointer;
		text-align: center;
	}

	/* Bottom action bar — the existing flex container with status-action
	 * buttons (Mark Release / Put on hold / Delete / etc) gets pinned to
	 * the bottom of the viewport on mobile. */
	[data-argo-shipment-detail] {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 40;
		background: #fff;
		border-top: 1px solid var(--argo-border);
		padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
		display: flex !important;
		flex-wrap: nowrap;
		gap: 0.5rem;
		overflow-x: auto;
		box-shadow: 0 -2px 8px rgba(15, 13, 66, 0.06);
	}
	[data-argo-shipment-detail] .argo-btn {
		flex-shrink: 0;
		font-size: 0.85rem;
	}
	[data-argo-shipment-detail] .argo-btn--primary {
		flex: 1;
	}
	/* Make room above the pinned action bar so the last card isn't hidden. */
	body:has([data-argo-shipment-detail]) main {
		padding-bottom: 5rem;
	}

	/* Documents dropzone on mobile — the original drag-drop visual makes no
	 * sense on touch, but the underlying <input type="file"> click handler
	 * (in argo-ui.js initDropzones) is what actually triggers the file
	 * picker. Don't hide the dropzone — RESTYLE it as a compact, tappable
	 * "Choose file" affordance. The dropzone div itself receives the click
	 * (zone.click → input.click); hiding it broke upload entirely. */
	.argo-dropzone {
		padding: 1rem 0.85rem;
		min-height: auto;
	}
	.argo-dropzone .argo-dropzone-icon {
		display: none;  /* large upload icon takes too much room on phone */
	}
	.argo-dropzone .argo-dropzone-icon + p {
		font-size: 0.9rem;
	}

	/* Hero card mobile sizing — BL number is 2.35rem on desktop which is
	 * too wide for 390px viewports. Tighten padding and font sizes so the
	 * hero content fits comfortably with no clipping. The hero itself
	 * gets explicit max-width:100% and box-sizing so its computed width
	 * never exceeds the parent. */
	.argo-ship-hero {
		padding: 1.25rem 1.1rem;
		max-width: 100%;
		box-sizing: border-box;
	}
	.argo-ship-hero-top { margin-bottom: 1rem; }
	.argo-ship-hero-title { font-size: 1.05rem; }
	.argo-ship-ref-big { font-size: 1.6rem; }
	/* Long unbroken phrases (consignee names, vendor strings) must wrap
	 * aggressively or they push the card wider than the viewport. */
	.argo-ship-stop-name,
	.argo-ship-stop-sub,
	.argo-ship-ref-v,
	.argo-ship-ref-k { overflow-wrap: anywhere; word-break: break-word; }
	.argo-ship-stop-name { font-size: 1.02rem; }
	.argo-ship-stop-sub { font-size: 0.78rem; }
	.argo-ship-track2 { margin-top: 1.2rem; }

	/* Charges sub-cards (Wharfage / Duty rows) — each is its own bordered
	 * box inside the parent Charges card. Their content has icon + meta +
	 * money + status, which packs poorly on a phone. Allow wrapping. */
	[data-argo-charges-panel] .argo-card-body > div {
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Uploaded document file names — names like
	 * NOA_CMACGM_Notice_of_Arrival_CMA_CGM_BL.pdf bleed past the card
	 * boundary because they have no spaces to wrap at. Force wrapping. */
	.argo-card .argo-file-name,
	.argo-card a[href*=".pdf"],
	.argo-card .argo-doc-name {
		overflow-wrap: anywhere;
		word-break: break-word;
		font-size: 0.85rem;
	}

	/* =========================================================================
	 * MOBILE RESPONSIVENESS — full refactor (v1.63.0)
	 *
	 * Acceptance criteria (per brief 2026-05-30):
	 *   1. No horizontal scrolling at 320px+
	 *   2. No card clipped on the right
	 *   3. All long text wraps inside its card
	 *   4. Buttons and badges wrap, never overflow
	 *   5. Mobile layout feels intentional, not squeezed
	 *
	 * Strategy: every fix below targets a SPECIFIC element that was causing
	 * overflow. The overflow-x:hidden on body is kept as a safety net only;
	 * the actual elements causing overflow are constrained at their source.
	 *
	 * The widest offending elements identified by Playwright bisect at 320-414px:
	 *   - .argo-dropzone (intrinsic width from "Drag & drop files here..."
	 *     text + 2rem horizontal padding + 40px icon)
	 *   - .argo-card with inline grid-column:1/-1 inheriting natural width
	 *     from dropzone child
	 *   - long file names like NOA_CMACGM_Notice_of_Arrival_*.pdf
	 *   - charge sub-cards (.rounded-xl.border) inheriting natural width
	 * ========================================================================= */

	/* (1) Universal box-sizing & width constraints — at the root of mobile.
	 * Every element gets box-sizing:border-box so padding doesn't compound
	 * width. Every block element is allowed to shrink. */
	main, [data-argo-app], .argo-shell, .argo-main {
		max-width: 100%;
		box-sizing: border-box;
	}
	.argo-card,
	.argo-card-body,
	.argo-card-head,
	.argo-shipment-detail-grid > *,
	.argo-shipment-detail-grid > * > * {
		max-width: 100%;
		box-sizing: border-box;
		min-width: 0;
	}

	/* (2) Cards on mobile: tighter padding, no inline grid-column escape.
	 * The inline `style="grid-column:1/-1"` on Documents/Charges/Reimburse
	 * shipment-panel cards was designed for a 3-column desktop grid. On
	 * mobile the grid has no columns, so 1/-1 resolves to "fill any natural
	 * width" — letting children drag the card wide. Force it back to auto. */
	.argo-shipment-detail-grid .argo-card,
	.argo-shipment-detail-grid [style*="grid-column"] {
		grid-column: auto !important;
		width: 100%;
		max-width: 100%;
	}
	.argo-shipment-detail-grid .argo-card-body { padding: 0.85rem; }
	.argo-shipment-detail-grid .argo-card-head { padding: 0.85rem; }

	/* (3) Long text in cards must wrap. Targets the actual offenders:
	 * file names, document titles, BL/container numbers, charge labels,
	 * activity rows. */
	.argo-shipment-detail-grid .argo-card-body,
	.argo-shipment-detail-grid .argo-card-body * {
		min-width: 0;
	}
	.argo-shipment-detail-grid .argo-doc-row-name,
	.argo-shipment-detail-grid .argo-file-name {
		white-space: normal !important;     /* override the desktop nowrap */
		overflow-wrap: anywhere;
		word-break: break-word;
		text-overflow: clip;
		font-size: 0.85rem;
	}
	.argo-shipment-detail-grid .argo-doc-row {
		gap: 0.5rem;
		padding: 0.6rem 0.7rem;
		align-items: flex-start;
	}
	.argo-shipment-detail-grid .argo-doc-row-main { flex: 1 1 0%; min-width: 0; }

	/* Badges should wrap (not nowrap) on mobile everywhere — applies to the
	 * header H1 + badge rows on every detail page too, not just inside the
	 * detail-grid cards. */
	.argo-badge {
		white-space: normal;
		line-height: 1.2;
		max-width: 100%;
		word-break: keep-all;
	}

	/* (4) Flex/grid responsiveness — flex children must shrink. The charges
	 * row uses `.p-3.flex.items-start.gap-3.flex-wrap` already, but its
	 * children .min-w-0.flex-1 + .text-right need to wrap to a new line
	 * when there's not enough room. Cap the right column to 100% so it
	 * naturally falls to the next line via flex-wrap. */
	.argo-shipment-detail-grid .argo-card-body .text-right { max-width: 100%; }
	.argo-shipment-detail-grid .flex.flex-wrap,
	.argo-shipment-detail-grid [class*="flex-wrap"] { row-gap: 0.35rem; }
	/* Badges should always wrap rather than overflow. */
	.argo-shipment-detail-grid .argo-badge {
		white-space: normal;
		line-height: 1.2;
		max-width: 100%;
	}

	/* (5) Document upload dropzone — make it fit the card on mobile.
	 * The .argo-dropzone has padding: 2rem 1.5rem at desktop. Combined
	 * with the 40px upload icon and "Drag & drop files here, or click to
	 * browse" text it computes to ~440px intrinsic width — wider than a
	 * phone viewport, which then drags the parent card wider with it.
	 * Force width:100%, tighter padding, hide the giant icon, hide the
	 * desktop hint copy and inject mobile copy. The hidden file input
	 * inside the dropzone stays clickable so taps still trigger the
	 * native file picker. */
	.argo-dropzone {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 1.1rem 0.85rem;
		min-height: auto;
	}
	.argo-dropzone-icon { display: none; }
	/* Hide the desktop drag-drop language, replace with mobile copy via
	 * a ::before on the dropzone container. The original <p> still
	 * renders but is set to visibility:hidden + zero height. */
	.argo-dropzone > p:first-of-type {
		font-size: 0;
		line-height: 0;
		margin: 0;
	}
	.argo-dropzone > p:first-of-type::before {
		content: "Tap to upload documents";
		display: block;
		font-size: 0.92rem;
		line-height: 1.35;
		font-weight: 600;
		color: var(--argo-ink-700);
	}
	.argo-dropzone > p:nth-of-type(2) { font-size: 0.72rem; line-height: 1.35; }

	/* (6) Container spacing — main element uses Tailwind p-4 by default
	 * which is 1rem. Keep that, but make sure no nested element uses 100vw. */
	.argo-shipment-detail-grid { padding: 0; gap: 0.75rem; }
	.argo-shipment-detail-grid .space-y-4 > * + * { margin-top: 0.75rem; }
	.argo-shipment-detail-grid > * { margin-bottom: 0; }

	/* (7) Each problematic component, addressed.
	 *  - Shipment Summary card (.argo-ship-hero): handled by hero rules above
	 *  - Cargo units card: see generic .argo-card rule
	 *  - Document upload: dropzone rules above
	 *  - Uploaded documents list: .argo-doc-row rules above
	 *  - Charges sub-cards: rounded-xl border children
	 *  - Broker reimbursement/invoice: covered by generic .argo-card rule
	 *  - Activity timeline: items already stack; just ensure no nowrap. */

	/* Charge sub-card containers — the inner .rounded-xl.border rows. */
	.argo-shipment-detail-grid [data-argo-charges-panel] .rounded-xl,
	.argo-shipment-detail-grid [data-argo-charges-panel] [data-charge-row] {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.argo-shipment-detail-grid [data-argo-charges-panel] [data-charge-row] > .p-3 {
		padding: 0.6rem 0.7rem;
		gap: 0.6rem;
	}
	.argo-shipment-detail-grid [data-argo-charges-panel] .argo-file-thumb {
		width: 2rem; height: 2rem; flex-shrink: 0;
	}

	/* Activity timeline rows — no inline-block widths, names can wrap. */
	.argo-shipment-detail-grid .argo-timeline-item {
		min-width: 0;
		max-width: 100%;
	}
	.argo-shipment-detail-grid .argo-timeline-title,
	.argo-shipment-detail-grid .argo-timeline-meta {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* (8) Acceptance: form controls inside cards fit. Selects and inputs
	 * already have width:100% via .argo-input, but make sure forms inside
	 * cards don't impose their own widths. */
	.argo-shipment-detail-grid form,
	.argo-shipment-detail-grid .argo-input,
	.argo-shipment-detail-grid select,
	.argo-shipment-detail-grid button.argo-btn {
		max-width: 100%;
		box-sizing: border-box;
	}
	.argo-shipment-detail-grid .argo-btn--primary[style*="width:100%"],
	.argo-shipment-detail-grid .argo-btn[style*="width:100%"] { width: 100% !important; }
}


/* =============================================================================
 * LOADING OVERLAY (v1.62.0)
 * Shown when the user navigates between pages so they have feedback that an
 * action is in flight. Pure CSS; JS in argo-app.js adds .is-visible on
 * link clicks / form submits and removes it on pageshow.
 * ========================================================================== */
.argo-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 13, 66, 0.18);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}
.argo-loading-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.argo-loading-spinner {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	border: 3px solid rgba(255, 255, 255, 0.5);
	border-top-color: var(--argo-accent, #fe5303);
	background: rgba(255, 255, 255, 0.95);
	animation: argo-spin 0.85s linear infinite;
	box-shadow: 0 8px 24px rgba(15, 13, 66, 0.18);
}
@keyframes argo-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.argo-loading-spinner { animation: none; }
}

/* =============================================================================
 * CUSTOMER DASHBOARD (v1.66.0 — Stage 1)
 * Action-first control panel for the importer. Used only by role
 * argo_customer; staff/ops/admin/broker continue to render the legacy
 * chart-driven dashboard via the existing argo-dash-* + argo-stat-card
 * styles, which are unaffected.
 *
 * Tokens: navy #19166d (brand), orange #fe5303 (accent), blue #226ebd.
 * ========================================================================== */

/* Welcome line — single line, low-key. */
.argo-cust-welcome {
	margin-top: 0.5rem;
	margin-bottom: 1.75rem;
}
.argo-cust-welcome-h {
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--argo-ink-900);
	margin: 0;
	line-height: 1.15;
}
.argo-cust-welcome-sub {
	font-size: 0.92rem;
	color: var(--argo-ink-500);
	margin: 0.3rem 0 0;
}

/* Three stat tiles. Wider gap below the row so the page reads as
 * distinct sections, PayPal-style. */
.argo-cust-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.85rem;
	margin-bottom: 2rem;
}
.argo-cust-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.6rem;
	min-height: 7.5rem;
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 0.85rem;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.18s ease;
	position: relative;
}
a.argo-cust-tile:hover { border-color: var(--argo-ink-400, #9ca3af); }
.argo-cust-tile-n {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--argo-ink-900);
	line-height: 1.05;
}
.argo-cust-tile-money {
	font-size: 2.4rem;
}
.argo-cust-tile-l {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--argo-ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: auto;
}
.argo-cust-tile.is-alert .argo-cust-tile-n { color: var(--argo-accent, #fe5303); }

/* Hero variant — navy filled, white text, large icon top-right.
 * Used for the dominant tile (Active Shipments) so the page has a clear
 * visual anchor at the top, matching the mockup's left-most tile. */
.argo-cust-tile-hero {
	background: var(--argo-brand, #19166d);
	border-color: var(--argo-brand, #19166d);
	color: #fff;
}
.argo-cust-tile-hero:hover { border-color: var(--argo-brand, #19166d); }
.argo-cust-tile-hero .argo-cust-tile-n { color: #fff; }
.argo-cust-tile-hero .argo-cust-tile-l { color: rgba(255, 255, 255, 0.72); }
.argo-cust-tile-icon {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 0;
}

/* Two-column grid (desktop) / stacked (mobile). More vertical breathing room
 * between sections — PayPal-style generous whitespace. */
.argo-cust-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: 1.75rem;
	align-items: flex-start;
}
.argo-cust-main { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.argo-cust-rail { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }

/* Card chrome — hairline border, NO shadow, NO head divider line. The card
 * is visually quiet so the content reads as the foreground, not the chrome. */
.argo-cust-card {
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 0.85rem;
	overflow: hidden;
}
.argo-cust-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.15rem 1.25rem 0.5rem;
}
.argo-cust-card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--argo-ink-900);
	margin: 0;
	letter-spacing: -0.005em;
}
.argo-cust-card-link {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--argo-brand);
	text-decoration: none;
}
.argo-cust-card-link:hover { text-decoration: underline; }
.argo-cust-card-body { padding: 0.75rem 1.25rem 1.25rem; }
.argo-cust-muted { font-size: 0.88rem; color: var(--argo-ink-500); margin: 0; }

/* Empty state for "Needs your attention" — reassuring, not loud. */
.argo-cust-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	padding: 1.25rem 0.5rem;
}
.argo-cust-empty-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: #ecfdf5;
	color: #059669;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.25rem;
}
.argo-cust-empty-l { font-weight: 600; color: var(--argo-ink-900); margin: 0; }
.argo-cust-empty-s { font-size: 0.86rem; color: var(--argo-ink-500); margin: 0; }

/* Attention list. */
.argo-cust-attn { list-style: none; padding: 0; margin: 0; }
.argo-cust-attn-item + .argo-cust-attn-item { border-top: 1px solid #eef0f3; }
.argo-cust-attn-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0;
	color: inherit;
	text-decoration: none;
}
.argo-cust-attn-dot {
	flex-shrink: 0;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background: var(--argo-ink-300, #9ca3af);
}
.argo-cust-attn-warning .argo-cust-attn-dot { background: var(--argo-accent, #fe5303); }
.argo-cust-attn-danger .argo-cust-attn-dot { background: #dc2626; }
.argo-cust-attn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.argo-cust-attn-label { font-size: 0.9rem; font-weight: 600; color: var(--argo-ink-900); }
.argo-cust-attn-meta { font-size: 0.78rem; color: var(--argo-ink-500); }
.argo-cust-attn-chev { flex-shrink: 0; color: var(--argo-ink-400); }
.argo-cust-attn-link:hover .argo-cust-attn-chev { color: var(--argo-brand); }

/* Right rail feed list. */
/* Latest updates feed — flat row list (PayPal Recent activity style).
 * Each item is a row with a thin separator below it; no card wrapping
 * each item, no big visual dots. Title on the left, optional time/meta
 * on the right in muted text. */
.argo-cust-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.argo-cust-feed-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.85rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid #eef0f3;
}
.argo-cust-feed-item:last-child { border-bottom: none; }
.argo-cust-feed-dot { display: none; }
.argo-cust-feed-body {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.85rem;
}
.argo-cust-feed-l { font-size: 0.88rem; color: var(--argo-ink-900); overflow-wrap: anywhere; line-height: 1.35; }
.argo-cust-feed-m { font-size: 0.75rem; color: var(--argo-ink-400); white-space: nowrap; flex-shrink: 0; align-self: baseline; }

/* Mobile: collapse two-column grid, restack tiles to single column. */
@media (max-width: 900px) {
	.argo-cust-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
 * CUSTOMER DASHBOARD — Active Shipment Card (v1.69.0 redesign)
 * Inspired by argooo_90.png — slim wide row with origin/destination on the
 * left, BL + status in the middle, container count + View Details on the
 * right, and a horizontal progress line at the bottom.
 *
 * Default state: white background, black/grey text, subtle border.
 * Desktop hover: transforms to Argo navy with white text (the argooo_90 look).
 * Mobile: stays white; touch has no hover, so the navy variant is reserved
 * for desktop interaction. Layout stacks vertically on narrow viewports.
 * ========================================================================== */

.argo-cust-ship-stack { display: flex; flex-direction: column; gap: 0.75rem; }

.argo-cust-ship {
	display: block;
	padding: 1.1rem 1.25rem 0.9rem;
	border: 1px solid var(--argo-border, #e5e7eb);
	border-radius: 0.85rem;
	background: #fff;
	color: var(--argo-ink-900);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.argo-cust-ship:hover {
	background: var(--argo-brand, #19166d);
	color: #fff;
	border-color: var(--argo-brand, #19166d);
	box-shadow: 0 10px 24px rgba(15, 13, 66, 0.18);
}

/* Three-column grid. Origin/dest left, BL+status middle, count+CTA right. */
.argo-cust-ship-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 1.25rem;
	align-items: center;
}

/* Left column: vertical stops with dotted connector between them. */
.argo-cust-ship-route {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}
.argo-cust-ship-stop {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	min-width: 0;
}
.argo-cust-ship-stop-dot {
	flex-shrink: 0;
	width: 0.95rem;
	height: 0.95rem;
	margin-top: 0.18rem;
	border-radius: 999px;
	background: #03a2fe;
	box-shadow: 0 0 0 2px rgba(3, 162, 254, 0.18);
}
.argo-cust-ship-stop-pin {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--argo-accent, #fe5303);
}
.argo-cust-ship-stop-body { min-width: 0; }
.argo-cust-ship-stop-name {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
	overflow-wrap: anywhere;
}
.argo-cust-ship-stop-sub {
	margin-top: 0.15rem;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--argo-ink-500);
	overflow-wrap: anywhere;
}
.argo-cust-ship:hover .argo-cust-ship-stop-sub { color: rgba(255, 255, 255, 0.72); }

/* Middle column: BL label + value + status with check icon. */
.argo-cust-ship-mid { min-width: 0; }
.argo-cust-ship-bl-k {
	font-size: 0.78rem;
	color: var(--argo-ink-500);
	margin-bottom: 0.1rem;
}
.argo-cust-ship:hover .argo-cust-ship-bl-k { color: rgba(255, 255, 255, 0.72); }
.argo-cust-ship-bl-v {
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	overflow-wrap: anywhere;
	margin-bottom: 0.55rem;
}
.argo-cust-ship-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--argo-accent, #fe5303);
	font-weight: 600;
	font-size: 0.92rem;
}
.argo-cust-ship-status svg { flex-shrink: 0; }
.argo-cust-ship:hover .argo-cust-ship-status { color: var(--argo-accent, #fe5303); }

/* Right column: container count + View Details. Right-aligned. */
.argo-cust-ship-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.9rem;
	min-width: 0;
}
.argo-cust-ship-count {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	color: inherit;
}
.argo-cust-ship-count-n {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--argo-accent, #fe5303);
}
.argo-cust-ship-count-l {
	font-size: 0.92rem;
	color: inherit;
}
.argo-cust-ship-view {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--argo-accent, #fe5303);
}
.argo-cust-ship-view svg { transition: transform 0.15s ease; }
.argo-cust-ship:hover .argo-cust-ship-view svg { transform: translate(2px, -2px); }

/* Horizontal progress line: blue dots at start/end, solid fill up to the
 * current milestone, dashed remainder, container icon at the marker. */
.argo-cust-ship-line {
	position: relative;
	height: 0.6rem;
	margin: 1.1rem 0.2rem 0.1rem;
}
.argo-cust-ship-line-end {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 999px;
	background: #03a2fe;
	z-index: 2;
}
.argo-cust-ship-line-end.is-start { left: 0; }
.argo-cust-ship-line-end.is-finish { right: 0; }
.argo-cust-ship-line-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 0;
	border-top: 2px solid var(--argo-ink-300, #cbd5e1);
}
.argo-cust-ship-line-todo {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 0;
	border-top: 2px dashed var(--argo-ink-300, #cbd5e1);
}
.argo-cust-ship-line-marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	color: var(--argo-accent, #fe5303);
	line-height: 0;
}
.argo-cust-ship:hover .argo-cust-ship-line-fill { border-top-color: rgba(255, 255, 255, 0.85); }
.argo-cust-ship:hover .argo-cust-ship-line-todo { border-top-color: rgba(255, 255, 255, 0.5); }

/* On-hold and cancelled variants — dim the marker. */
.argo-cust-ship-line.is-on_hold .argo-cust-ship-line-marker { color: #b45309; }
.argo-cust-ship-line.is-cancelled .argo-cust-ship-line-fill { border-top-color: var(--argo-ink-400, #9ca3af); }
.argo-cust-ship-line.is-cancelled .argo-cust-ship-line-marker { color: var(--argo-ink-400, #9ca3af); }

/* Mobile: stack the grid vertically. No hover on touch — cards stay white. */
@media (max-width: 768px) {
	.argo-cust-ship { padding: 1rem; }
	.argo-cust-ship-grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
	.argo-cust-ship-bl-v { font-size: 1.25rem; }
	.argo-cust-ship-aside {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Stage 1 mobile rules (tiles + welcome + card head/body), restored. */
@media (max-width: 640px) {
	.argo-cust-tiles { grid-template-columns: 1fr; gap: 0.65rem; }
	.argo-cust-tile { padding: 0.85rem 1rem; }
	.argo-cust-tile-n { font-size: 1.4rem; }
	.argo-cust-card-head { padding: 0.85rem 1rem; }
	.argo-cust-card-body { padding: 0.85rem 1rem; }
	.argo-cust-welcome-h { font-size: 1.25rem; }
	/* Tiles marked --md-only are desktop/tablet-only — used on the
	   customer Argo Invoices page to keep mobile focused on Balance
	   Outstanding. The single visible tile auto-fills the 1fr row. */
	.argo-cust-tile--md-only { display: none !important; }
}

/* =============================================================================
 * CUSTOMER DASHBOARD v1.70.0 — card visual polish + per-card "Next:" line
 * Fixes audit items vs argooo_90.png reference (in order):
 *   1. Card vertical spacing was too tight
 *   2. Two stops in route had no dotted connector
 *   3. BL number font was too slim
 *   4. Default progress line was too pale on white background
 *   5. Progress line spacing from content above
 *   6. Container icon size
 *   7. "Containers" word color on hover
 *   8. Hover transition timing tuned
 * Plus: .argo-cust-ship-next — single-line "Next: ..." copy from
 *       StatusEngine::customer_facing_message(), only rendered when there's
 *       an actionable importer step at the current status.
 * Plus: amount-outstanding tile typography (smaller font, multi-line capable)
 *       since strings like "JMD 3,333.00 + USD 250.00" can be 25+ chars.
 * ========================================================================== */

/* Tile typography for money values — Active Shipments still uses the big
 * 1.6rem .argo-cust-tile-n, money tiles use a smaller balanced size that
 * can wrap to two lines without breaking the layout. */
.argo-cust-tile-money {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	overflow-wrap: anywhere;
}

/* (1, 5) Card padding bumped slightly; progress line gets more breathing room
 * above and below so the card matches the reference height (~140px on desktop). */
.argo-cust-ship {
	padding: 1.25rem 1.4rem 1.05rem;
}
.argo-cust-ship-line {
	margin: 1.5rem 0.2rem 0.15rem;
}

/* (2) Dotted connector between origin and destination stops.
 * Implemented as a pseudo-element on the route container, anchored to the
 * left column of dots/pins. */
.argo-cust-ship-route {
	position: relative;
	gap: 0.7rem;
}
.argo-cust-ship-route::before {
	content: "";
	position: absolute;
	left: 0.45rem;                       /* center under the 0.95rem dot */
	top: 1.15rem;                        /* below the origin dot */
	bottom: 1.55rem;                     /* above the destination pin */
	width: 0;
	border-left: 2px dotted var(--argo-ink-300, #cbd5e1);
	opacity: 0.8;
}
.argo-cust-ship:hover .argo-cust-ship-route::before {
	border-left-color: rgba(255, 255, 255, 0.55);
}

/* (3) BL number — heavier and larger to match the reference. */
.argo-cust-ship-bl-v {
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.05;
	margin-bottom: 0.65rem;
}

/* (4) Default progress line — navy tones on white instead of pale grey so
 * the line is legible at rest, not just on hover. */
.argo-cust-ship-line-fill {
	border-top: 2px solid var(--argo-brand, #19166d);
	opacity: 0.85;
}
.argo-cust-ship-line-todo {
	border-top: 2px dashed var(--argo-ink-400, #9ca3af);
	opacity: 0.6;
}
.argo-cust-ship:hover .argo-cust-ship-line-fill { border-top-color: rgba(255, 255, 255, 0.92); opacity: 1; }
.argo-cust-ship:hover .argo-cust-ship-line-todo { border-top-color: rgba(255, 255, 255, 0.55); opacity: 1; }

/* (6) Container icon — slightly larger to match the reference proportions. */
.argo-cust-ship-line-marker svg {
	width: 32px;
	height: 23px;
}

/* (7) "X Containers" — number stays orange in both states, the "Containers"
 * word follows the parent text color (black default, white on hover). */
.argo-cust-ship-count-n { color: var(--argo-accent, #fe5303); }
.argo-cust-ship-count-l { color: inherit; }

/* (8) Hover transition — slightly slower so the colour swap feels intentional
 * rather than snappy. */
.argo-cust-ship {
	transition:
		background 0.22s cubic-bezier(0.32, 0.72, 0, 1),
		color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
		border-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
		box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

/* "Next: ..." line — sits between the grid (status row) and the progress
 * line. Single line, smaller secondary text, inherits the navy/white from
 * the card so it works in both states. */
.argo-cust-ship-next {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin-top: 0.9rem;
	font-size: 0.88rem;
	line-height: 1.3;
}
.argo-cust-ship-next-k {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--argo-ink-500, #64748b);
	flex-shrink: 0;
}
.argo-cust-ship-next-v {
	color: inherit;
	overflow-wrap: anywhere;
}
.argo-cust-ship:hover .argo-cust-ship-next-k {
	color: rgba(255, 255, 255, 0.72);
}

/* Mobile — same spacing rules, the dotted connector still works because
 * the grid stacks but the route is still its own column. */
@media (max-width: 768px) {
	.argo-cust-ship { padding: 1rem 1.15rem 0.85rem; }
	.argo-cust-ship-bl-v { font-size: 1.7rem; }
	.argo-cust-ship-line-marker svg { width: 28px; height: 20px; }
	.argo-cust-ship-line { margin: 1.1rem 0.15rem 0.05rem; }
}

/* Documents (vault) section — required business docs (TCC, C73,
 * Company Registration) shown as a clean two-column list with state
 * pills. Receives/Missing only for now; expiry states come with vault
 * monitoring (deferred). */
.argo-cust-vault-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.argo-cust-vault-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem 0;
}
.argo-cust-vault-item + .argo-cust-vault-item {
	border-top: 1px solid #eef0f3;
}
.argo-cust-vault-label {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--argo-ink-900);
	overflow-wrap: anywhere;
}
.argo-cust-vault-state {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid transparent;
	flex-shrink: 0;
}
.argo-cust-vault-state.is-received {
	background: #ecfdf5;
	color: #047857;
	border-color: #a7f3d0;
}
.argo-cust-vault-state.is-missing {
	background: #fff7ed;
	color: #c2410c;
	border-color: #fed7aa;
}
.argo-cust-vault-state svg { flex-shrink: 0; }

/* =============================================================================
 * CUSTOMER DASHBOARD v1.72.0 — mockup-matched redesign
 *
 * Replaces:
 *   - Rich .argo-cust-ship card (white/navy-hover, route + BL + status grid)
 *     with a flat horizontal row design (BL block | location | status | CTA).
 *   - Latest Updates rail card with Shipment Breakdown donut + Documents.
 *
 * Notes on dead CSS:
 *   - .argo-cust-ship-grid, -route, -stop, -stop-dot, -stop-pin, -mid,
 *     -bl-k/-bl-v, -status, -aside, -count, -view (old style), -next
 *     are no longer rendered by the template. Their CSS rules are left in
 *     place since they may render on shipment-detail pages or be revived,
 *     and removing them would be a separate cleanup pass.
 * ========================================================================== */

/* Active shipment ROW (replaces card). Flat horizontal layout: BL on the
 * left, location in the middle, status pill, "View Shipment" button. A
 * progress line sits below spanning the full width. */
.argo-cust-ship {
	display: block;
	padding: 1.05rem 1.15rem 0.85rem;
	border: 0px solid var(--argo-border, #e5e7eb);
	border-radius: 0;
	background: transparent;
	color: var(--argo-ink-900);
	text-decoration: none;
}
/* Row separators live on the stack container so adjacent rows remain
 * visually distinct without giving .argo-cust-ship itself a visible border. */
.argo-cust-ship-stack > .argo-cust-ship + .argo-cust-ship {
	border-top: 1px solid #eef0f3 !important;
}

.argo-cust-ship-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
	gap: 1.15rem;
	align-items: center;
}

/* Left: container icon + BL block */
.argo-cust-ship-blcol {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}
.argo-cust-ship-blicon {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	background: #ececf6;
	color: var(--argo-brand, #19166d);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.argo-cust-ship-blbody { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.argo-cust-ship-bl-k {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--argo-ink-400);
}
.argo-cust-ship-bl-v {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--argo-ink-900);
	letter-spacing: -0.005em;
	overflow-wrap: anywhere;
	line-height: 1.2;
}

/* Middle: location with pin */
.argo-cust-ship-loccol {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}
.argo-cust-ship-locpin {
	flex-shrink: 0;
	color: var(--argo-accent, #fe5303);
	display: inline-flex;
	align-items: center;
}
.argo-cust-ship-locbody { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.argo-cust-ship-loc-k {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--argo-ink-400);
}
.argo-cust-ship-loc-v {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--argo-ink-900);
	overflow-wrap: anywhere;
}

/* Status pill — orange tone, subtle pill background */
.argo-cust-ship-statuscol { display: flex; align-items: center; }
.argo-cust-ship-statusbadge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--argo-accent, #fe5303);
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.3;
}

/* CTA: View Shipment button — bordered pill, dark text */
.argo-cust-ship-ctacol { display: flex; align-items: center; justify-content: flex-end; }
.argo-cust-ship-view {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid #eef0f3;
	border-radius: 0.55rem;
	color: var(--argo-ink-900);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.argo-cust-ship-view:hover {
	border-color: var(--argo-ink-400, #9ca3af);
	background: #f9fafc;
}

/* Mobile: stack the row */
@media (max-width: 900px) {
	.argo-cust-ship-row {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
	.argo-cust-ship-blcol     { grid-column: 1 / -1; }
	.argo-cust-ship-loccol    { grid-column: 1 / -1; }
	.argo-cust-ship-statuscol { grid-column: 1 / -1; }
	.argo-cust-ship-ctacol    { grid-column: 1 / -1; justify-content: flex-start; }
	.argo-cust-ship-view      { width: 100%; justify-content: center; }
}

/* Needs Attention — red alert icon next to title, button-on-right rows. */
.argo-cust-attn-alert {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.55rem;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.argo-cust-attn-alert svg {
	width: 1.4rem;
	height: 1.4rem;
	filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.25));
}
.argo-cust-card-title { display: inline-flex; align-items: center; }
.argo-cust-attn-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
}
.argo-cust-attn-item + .argo-cust-attn-item { border-top: 1px solid #eef0f3; }
.argo-cust-attn-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.argo-cust-attn-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--argo-ink-900);
	overflow-wrap: anywhere;
}
.argo-cust-attn-meta { font-size: 0.78rem; color: var(--argo-ink-500); }
.argo-cust-attn-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid #eef0f3;
	border-radius: 0.45rem;
	background: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--argo-ink-900);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.argo-cust-attn-cta:hover {
	border-color: var(--argo-ink-400, #9ca3af);
	background: #f9fafc;
}

/* Needs Attention card uses a lavender wash on its head per the mockup. */
[data-argo-attn-card] .argo-cust-card-head { background: #ececf6; }

/* Shipment Breakdown donut chart */
.argo-cust-donut {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0 0.25rem;
}
.argo-cust-donut svg {
	max-width: 200px;
	width: 100%;
	height: auto;
}
.argo-cust-donut-legend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.78rem;
	color: var(--argo-ink-700);
}
.argo-cust-donut-li { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.argo-cust-donut-dot {
	flex-shrink: 0;
	width: 0.55rem; height: 0.55rem;
	border-radius: 999px;
}
/* Filter icon next to the Shipment Breakdown title — purely decorative for
 * now, matches the small icon in the mockup. No menu behind it yet. */
.argo-cust-donut-filter {
	background: transparent;
	border: 0;
	padding: 0.25rem;
	color: var(--argo-ink-400, #9ca3af);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.35rem;
}
.argo-cust-donut-filter:hover { color: var(--argo-ink-700); background: #f5f5fa; }

/* Mobile tuning for hero tile (still very tall on phone otherwise) */
@media (max-width: 640px) {
	.argo-cust-tile { padding: 1.1rem 1.15rem; min-height: 5.5rem; }
	.argo-cust-tile-n { font-size: 1.85rem; }
	.argo-cust-tile-money { font-size: 1.85rem; }
	.argo-cust-tile-icon { top: 1rem; right: 1rem; }
	.argo-cust-tile-icon svg { width: 22px; height: 22px; }
}

/* Flush card variant — top and bottom borders only, no side borders, no
 * rounded corners. Used for the Active Shipments section so the row stack
 * reads as a horizontal band rather than a discrete card with sides.
 * !important throughout because earlier .argo-cust-card rules with the
 * `border:` shorthand set all 4 sides, and we have to win that cascade
 * even when stale CSS caches load.
 *
 * Note: only the BODY's horizontal padding is zeroed so the row separators
 * extend the full width of the section. The card-head keeps its normal
 * padding (so the section title is indented), and each row keeps its
 * natural horizontal padding (so row content sits indented from the
 * section edges instead of pressed against them). */
.argo-cust-card[data-argo-flush] {
	border-left: none !important;
	border-right: none !important;
	border-radius: 0 !important;
	border-top: 1px solid #eef0f3 !important;
	border-bottom: 1px solid #eef0f3 !important;
	background: #fff !important;
	overflow: visible !important;
	box-shadow: none !important;
}
.argo-cust-card[data-argo-flush] .argo-cust-card-body {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* v1.72.2 — neutralise all leftover hover state from earlier card designs.
 * The v1.66 / v1.69 / v1.70 hover rules (navy-on-hover, color shifts, etc.)
 * still match the current flat-row markup at the parent level. Explicit
 * override here keeps rows visually static on hover, per user request. */
.argo-cust-ship:hover {
	background: transparent !important;
	color: var(--argo-ink-900) !important;
	border-color: #eef0f3 !important;
	box-shadow: none !important;
}
.argo-cust-ship:hover .argo-cust-ship-bl-k,
.argo-cust-ship:hover .argo-cust-ship-loc-k,
.argo-cust-ship:hover .argo-cust-ship-bl-v,
.argo-cust-ship:hover .argo-cust-ship-loc-v,
.argo-cust-ship:hover .argo-cust-ship-next-k {
	color: revert !important;
}
.argo-cust-ship:hover .argo-cust-ship-line-fill {
	border-top-color: var(--argo-brand, #19166d) !important;
	opacity: 0.85 !important;
}
.argo-cust-ship:hover .argo-cust-ship-line-todo {
	border-top-color: var(--argo-ink-400, #9ca3af) !important;
	opacity: 0.6 !important;
}
.argo-cust-ship:hover .argo-cust-ship-view svg {
	transform: none !important;
}

/* =============================================================================
 * Customer Shipments page — flat row layout matching the dashboard.
 * Tabs (Active / Closed), simple filter panel, then the same flat-row
 * stack the dashboard uses.
 * ========================================================================== */
.argo-cust-ship-tabs {
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0 0;
}
.argo-cust-ship-tab {
	display: inline-flex;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--argo-ink-500);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.argo-cust-ship-tab:hover { color: var(--argo-ink-900); }
.argo-cust-ship-tab.is-active {
	background: var(--argo-brand, #19166d);
	color: #fff;
}

.argo-cust-ship-filters {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.argo-cust-ship-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.argo-cust-ship-field-l {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--argo-ink-700);
}
.argo-cust-ship-field-input {
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 1px solid #eef0f3;
	border-radius: 0.55rem;
	font-size: 0.92rem;
	color: var(--argo-ink-900);
	background: #fff;
	font-family: inherit;
}
.argo-cust-ship-field-input:focus {
	outline: none;
	border-color: var(--argo-brand, #19166d);
	box-shadow: 0 0 0 3px rgba(25, 22, 109, 0.08);
}
.argo-cust-ship-field-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.argo-cust-ship-field-count {
	font-size: 0.78rem;
	color: var(--argo-ink-400);
}

[data-argo-cship-row][hidden] { display: none !important; }

@media (min-width: 720px) {
	.argo-cust-ship-filters {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.85rem 1rem;
		align-items: end;
	}
	.argo-cust-ship-field-foot {
		grid-column: 1 / -1;
	}
}

/* =============================================================================
 * Customer-account button styling — scoped via body.argo-role-customer.
 *
 * On customer pages, the .argo-chip-btn class (used for tertiary actions in
 * shipment detail expandable rows, charges flow, documents flow, etc.) is
 * restyled to match the dashboard's Pay Now / View Shipment pill button.
 * Staff and broker views keep the original .argo-chip-btn (navy text on
 * brand-light hover) because they need a different visual language.
 *
 * Primary buttons (.argo-btn--primary) are NOT touched — solid CTAs keep
 * their dominant weight for primary actions like "Submit Payment" so the
 * page maintains a visual hierarchy. Same for .argo-btn--ghost.
 * ========================================================================== */
body.argo-role-customer .argo-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid #eef0f3;
	border-radius: 0.55rem;
	background: #fff;
	color: var(--argo-ink-900);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
body.argo-role-customer .argo-chip-btn:hover {
	border-color: var(--argo-ink-400, #9ca3af);
	background: #f9fafc;
}

/* Secondary .argo-btn (e.g. Visit Helpdesk in Contact us card) on customer
 * pages — match the same pill aesthetic. */
body.argo-role-customer .argo-btn--secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid #eef0f3;
	border-radius: 0.55rem;
	background: #fff;
	color: var(--argo-ink-900);
	font-size: 0.85rem;
	font-weight: 600;
}
body.argo-role-customer .argo-btn--secondary:hover {
	border-color: var(--argo-ink-400, #9ca3af);
	background: #f9fafc;
	color: var(--argo-ink-900);
}

/* =============================================================================
 * RECORDS & INSIGHTS — customer report page (v1.73.0)
 * Header, filter card, tabs, charts (donut + bars), data tables.
 * ========================================================================== */

.argo-rec-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}
.argo-rec-crumb { font-size: 0.82rem; color: var(--argo-ink-400); margin: 0 0 0.25rem; }
.argo-rec-crumb a { color: var(--argo-ink-400); text-decoration: none; }
.argo-rec-h { font-size: 1.65rem; font-weight: 700; color: var(--argo-ink-900); margin: 0; line-height: 1.15; }
.argo-rec-sub { font-size: 0.92rem; color: var(--argo-ink-500); margin: 0.3rem 0 0; }

.argo-rec-head-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Currency toggle */
.argo-rec-cur { position: relative; }
.argo-rec-cur-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 0.55rem;
	box-shadow: 0 10px 32px rgba(15, 13, 66, 0.12);
	padding: 0.35rem;
	z-index: 50;
}
.argo-rec-cur-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.7rem;
	border-radius: 0.4rem;
	font-size: 0.88rem;
	color: var(--argo-ink-900);
	text-decoration: none;
	gap: 0.5rem;
}
.argo-rec-cur-item:hover { background: #f9fafc; }
.argo-rec-cur-item.is-active { background: #ececf6; color: var(--argo-brand); font-weight: 600; }
.argo-rec-cur-item.is-disabled { color: var(--argo-ink-400); pointer-events: none; }
.argo-rec-cur-warn {
	display: inline-flex;
	width: 1rem; height: 1rem;
	align-items: center; justify-content: center;
	border-radius: 999px;
	background: #fef3c7;
	color: #b45309;
	font-size: 0.7rem;
	font-weight: 700;
}

/* Banner for missing rates */
.argo-rec-banner {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 0.65rem;
	color: #9a3412;
	font-size: 0.88rem;
	margin-bottom: 1rem;
}
.argo-rec-banner svg { flex-shrink: 0; }

/* Filter card */
.argo-rec-filters { padding: 0; }
.argo-rec-filter-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.85rem 1rem;
	padding: 1.15rem 1.25rem;
}
.argo-rec-filter-field { display: flex; flex-direction: column; gap: 0.35rem; }
.argo-rec-filter-foot {
	display: flex;
	gap: 0.5rem;
	padding: 0 1.25rem 1.25rem;
}
@media (max-width: 900px) {
	.argo-rec-filter-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.argo-rec-filter-row { grid-template-columns: 1fr; }
}

/* Tabs */
.argo-rec-tabs {
	display: flex;
	gap: 0.35rem;
	margin: 1.5rem 0 1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.argo-rec-tabs::-webkit-scrollbar { display: none; }
.argo-rec-tab {
	flex-shrink: 0;
	display: inline-flex;
	padding: 0.55rem 1.05rem;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--argo-ink-500);
	text-decoration: none;
	white-space: nowrap;
}
.argo-rec-tab:hover { color: var(--argo-ink-900); }
.argo-rec-tab.is-active { background: var(--argo-brand, #19166d); color: #fff; }

.argo-rec-tab-body { margin-top: 0.5rem; }

/* Grid: two cards side-by-side on desktop, stacked on mobile. */
.argo-rec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 900px) {
	.argo-rec-grid { grid-template-columns: 1fr; }
}
.argo-rec-twocol {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: center;
}
@media (max-width: 540px) {
	.argo-rec-twocol { grid-template-columns: 1fr; }
}

/* Legend */
.argo-rec-legend {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 0.85rem;
}
.argo-rec-legend-li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--argo-ink-700);
}
.argo-rec-legend-dot {
	flex-shrink: 0;
	width: 0.6rem; height: 0.6rem;
	border-radius: 999px;
}
.argo-rec-legend-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.argo-rec-legend-val { color: var(--argo-ink-500); font-weight: 600; flex-shrink: 0; }

/* Vertical bars (monthly volume) */
.argo-rec-bars {
	display: flex;
	align-items: flex-end;
	gap: 0.85rem;
	height: 200px;
	padding: 0 0.25rem 1.5rem;
	overflow-x: auto;
}
.argo-rec-bar { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 3rem; flex-shrink: 0; }
.argo-rec-bar-track {
	width: 2.5rem;
	height: 100%;
	background: #f5f5fa;
	border-radius: 0.35rem;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.argo-rec-bar-fill {
	width: 100%;
	background: var(--argo-brand, #19166d);
	border-radius: 0.35rem 0.35rem 0 0;
	transition: height 0.3s ease;
}
.argo-rec-bar-n { font-size: 0.85rem; font-weight: 700; color: var(--argo-ink-900); }
.argo-rec-bar-l { font-size: 0.72rem; color: var(--argo-ink-500); white-space: nowrap; }

/* Horizontal bars (charges by category) */
.argo-rec-bars-horiz {
	height: auto;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
	padding: 0;
	overflow: visible;
}
.argo-rec-hbar {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) 1fr auto;
	gap: 0.85rem;
	align-items: center;
}
.argo-rec-hbar-label { font-size: 0.85rem; color: var(--argo-ink-900); font-weight: 600; }
.argo-rec-hbar-track {
	display: flex;
	height: 1.15rem;
	background: #f5f5fa;
	border-radius: 0.3rem;
	overflow: hidden;
}
.argo-rec-hbar-paid   { background: #10b981; }
.argo-rec-hbar-unpaid { background: #fe5303; }
.argo-rec-hbar-v { font-size: 0.85rem; font-weight: 600; color: var(--argo-ink-900); white-space: nowrap; }

@media (max-width: 640px) {
	.argo-rec-hbar { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* Tables */
.argo-rec-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.argo-rec-table thead th {
	text-align: left;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--argo-ink-500);
	padding: 0.5rem 0.65rem;
	border-bottom: 1px solid #eef0f3;
	font-weight: 700;
}
.argo-rec-table tbody td {
	padding: 0.65rem 0.65rem;
	border-bottom: 1px solid #eef0f3;
	color: var(--argo-ink-900);
}
.argo-rec-table tbody tr:last-child td { border-bottom: none; }
.argo-rec-table .text-right { text-align: right; }
.argo-rec-table-wide { min-width: 700px; }

/* Mini value display */
.argo-rec-mini-l {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--argo-ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.35rem;
}
.argo-rec-mini-v { font-size: 1.25rem; font-weight: 700; color: var(--argo-ink-900); }

/* Empty state */
.argo-rec-empty {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--argo-ink-400);
	font-size: 0.92rem;
}

/* Records & Insights uses 4 tiles. */
.argo-rec-4tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
	.argo-rec-4tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
	.argo-rec-4tiles { grid-template-columns: 1fr !important; }
}

/* =============================================================================
 * RECORDS & INSIGHTS v1.73.1 — chart refresh
 * Monthly volume bar chart with year selector + YoY arrow + median line,
 * Argo Invoices header strip + semi-circle gauge, Charges single-bar chart
 * with hover tooltip showing paid/unpaid split, Shipments tab count bars.
 * ========================================================================== */

/* ---- Monthly volume chart ---- */
.argo-rec-monthly-head { align-items: center; }
.argo-rec-year-pills { display: inline-flex; gap: 0.3rem; }
.argo-rec-year-pill {
	display: inline-flex;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--argo-ink-500);
	text-decoration: none;
	background: #f5f5fa;
}
.argo-rec-year-pill:hover { color: var(--argo-ink-900); }
.argo-rec-year-pill.is-active {
	background: var(--argo-brand, #19166d);
	color: #fff;
}

.argo-rec-monthly-meta { margin-bottom: 0.85rem; }
.argo-rec-monthly-meta-eyebrow {
	font-size: 0.75rem;
	color: var(--argo-ink-500);
	margin-bottom: 0.1rem;
}
.argo-rec-monthly-meta-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
}
.argo-rec-monthly-meta-v {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--argo-ink-900);
	letter-spacing: -0.02em;
}
.argo-rec-yoy {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
}
.argo-rec-yoy-up   { background: #d1fae5; color: #065f46; }
.argo-rec-yoy-down { background: #fee2e2; color: #991b1b; }
.argo-rec-yoy-vs   { color: var(--argo-ink-400); font-weight: 500; }

.argo-rec-monthly-chart {
	position: relative;
	padding-top: 1.5rem;
}
.argo-rec-monthly-median {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-top: 1px dashed #e5e7eb;
	height: 1px;
	pointer-events: none;
}
.argo-rec-monthly-median > span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	color: var(--argo-ink-500);
	background: #fff;
	padding: 0 0.45rem;
	transform: translateY(-50%);
}
.argo-rec-monthly-median > span::before {
	content: "";
	width: 0.4rem; height: 0.4rem;
	border-radius: 999px;
	background: var(--argo-accent, #fe5303);
}
.argo-rec-monthly-bars {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0.4rem;
	align-items: end;
	height: 200px;
}
.argo-rec-monthly-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	position: relative;
}
.argo-rec-monthly-bar-track {
	width: 100%;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.argo-rec-monthly-bar-fill {
	width: 78%;
	min-height: 4px;
	background: #ececf6;
	border-radius: 0.65rem 0.65rem 0.25rem 0.25rem;
	transition: background 0.15s ease, transform 0.15s ease;
}
.argo-rec-monthly-bar:hover .argo-rec-monthly-bar-fill,
.argo-rec-monthly-bar.is-active .argo-rec-monthly-bar-fill {
	background: var(--argo-brand, #19166d);
}
.argo-rec-monthly-bar-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--argo-ink-500);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
}
.argo-rec-monthly-bar:hover .argo-rec-monthly-bar-label,
.argo-rec-monthly-bar.is-active .argo-rec-monthly-bar-label {
	background: var(--argo-brand, #19166d);
	color: #fff;
}
.argo-rec-monthly-tooltip {
	position: absolute;
	top: -2.1rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--argo-ink-900);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.35rem 0.6rem;
	border-radius: 0.4rem;
	white-space: nowrap;
	z-index: 5;
	pointer-events: none;
}
.argo-rec-monthly-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	width: 0; height: 0;
	border: 4px solid transparent;
	border-top-color: var(--argo-ink-900);
}
@media (max-width: 720px) {
	.argo-rec-monthly-bars { height: 140px; gap: 0.2rem; }
	.argo-rec-monthly-bar-label { font-size: 0.65rem; padding: 0.15rem 0.35rem; }
}

/* ---- Argo Invoices header strip + semi-circle gauge ---- */
.argo-rec-invoice-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 900px) {
	.argo-rec-invoice-grid { grid-template-columns: 1fr; }
}
.argo-rec-invoice-strip {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5rem;
	align-items: center;
}
.argo-rec-invoice-divider {
	width: 1px;
	background: #eef0f3;
	align-self: stretch;
}
.argo-rec-invoice-stat-head {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}
.argo-rec-invoice-stat-icon {
	width: 1.65rem; height: 1.65rem;
	border-radius: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.argo-rec-invoice-stat-icon-paid   { background: #d1fae5; color: #065f46; }
.argo-rec-invoice-stat-icon-unpaid { background: #ffedd5; color: #9a3412; }
.argo-rec-invoice-stat-l {
	font-size: 0.85rem;
	color: var(--argo-ink-500);
}
.argo-rec-invoice-stat-v {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--argo-ink-900);
	letter-spacing: -0.02em;
	line-height: 1.05;
	overflow-wrap: anywhere;
}
@media (max-width: 540px) {
	.argo-rec-invoice-strip { grid-template-columns: 1fr; }
	.argo-rec-invoice-divider { width: auto; height: 1px; }
	.argo-rec-invoice-stat-v { font-size: 1.5rem; }
}

.argo-rec-gauge {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0.5rem;
}
.argo-rec-gauge svg { max-width: 220px; width: 100%; height: auto; }
.argo-rec-gauge-value {
	position: absolute;
	bottom: 0.6rem;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}
.argo-rec-gauge-v {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--argo-ink-900);
	letter-spacing: -0.01em;
}
.argo-rec-gauge-l {
	font-size: 0.78rem;
	color: var(--argo-ink-500);
	margin-top: 0.1rem;
}

/* ---- Charges bar chart (single bar per category, hover tooltip) ---- */
.argo-rec-cbars {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.argo-rec-cbar {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) 1fr;
	gap: 1rem;
	align-items: center;
}
.argo-rec-cbar-label {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--argo-ink-500);
}
.argo-rec-cbar-track {
	position: relative;
	height: 1.5rem;
	border-radius: 0.4rem;
	background: transparent;
	cursor: pointer;
}
.argo-rec-cbar-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.argo-rec-cbar-grid > span {
	position: absolute;
	top: -0.25rem;
	bottom: -0.25rem;
	width: 1px;
	background: #eef0f3;
}
.argo-rec-cbar-fill {
	position: relative;
	height: 100%;
	display: flex;
	border-radius: 0.4rem;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
	transition: filter 0.15s ease;
}
.argo-rec-cbar-track:hover .argo-rec-cbar-fill {
	filter: brightness(1.05);
}
.argo-rec-cbar-paid   { background: #10b981; height: 100%; }
.argo-rec-cbar-unpaid { background: #fe5303; height: 100%; }

/*
 * v1.86.0/v1.87.0: floating value tooltip for admin colored horizontal
 * bars (.argo-rec-cbar--colored). Positioned ABOVE the right edge of
 * the bar fill so it's never clipped by the card's right boundary
 * (the right-side position used in v1.86.0 was being cut off by card
 * overflow). z-index 60 so it floats above everything; pointer-events
 * none so it doesn't intercept the next hover.
 *
 * The parent track and bars opt into overflow:visible so the
 * tooltip can escape upward past the bar's own box.
 */
.argo-rec-cbars--admin,
.argo-rec-cbars--admin .argo-rec-cbar,
.argo-rec-cbars--admin .argo-rec-cbar-track {
	overflow: visible;
}
.argo-rec-cbar-floating-tip {
	position: absolute;
	bottom: calc(100% + 0.4rem);
	/* `left` is set inline to the bar fill percent. Combined with
	   translateX(-50%) this centers the tooltip over the bar's right
	   edge. Clamping below keeps it inside the track for short bars. */
	transform: translateX(-50%);
	background: var(--argo-ink-900, #111827);
	color: #fff;
	border-radius: 0.4rem;
	padding: 0.3rem 0.55rem;
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 60;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.argo-rec-cbar-floating-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border: 5px solid transparent;
	border-top-color: var(--argo-ink-900, #111827);
}
.argo-rec-cbar--colored:hover .argo-rec-cbar-floating-tip,
.argo-rec-cbar--colored:focus-within .argo-rec-cbar-floating-tip {
	opacity: 1;
}
.argo-rec-cbar-floating-tip strong { font-weight: 700; }

/*
 * v1.88.0: untranslated currency footnote shown below money charts.
 * Surfaces amounts that couldn't be converted to JMD because the
 * admin hasn't set an FX rate yet. Subtle, non-disruptive — the
 * chart still renders its main value above this footer.
 */
.argo-rec-untranslated {
	margin-top: 0.6rem;
	padding: 0.5rem 0.75rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 0.3rem;
	font-size: 0.72rem;
	color: #78350f;
	line-height: 1.4;
}

/*
 * v1.90.0: per-currency native breakdown shown under KPI tile
 * values when the underlying data spans multiple currencies. The
 * headline is the JMD-translated combined; this strip below shows
 * what's actually been collected in each native currency.
 */
.argo-stat-breakdown {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.4rem;
	margin-top: 0.35rem;
	font-size: 0.72rem;
	color: var(--argo-ink-500, #6b7280);
	font-weight: 500;
	line-height: 1.3;
}
.argo-stat-breakdown-sep {
	color: var(--argo-ink-300, #d1d5db);
}

/*
 * v1.90.0: per-currency margin grid on the Argo-vs-Broker card.
 * Each row shows "USD: Argo X − Broker Y = +Z" in pure native
 * currency arithmetic. No FX assumption — what you see is what
 * actually moved in that currency.
 */
.argo-rec-margin-grid {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--argo-ink-100, #f3f4f6);
}
.argo-rec-margin-row {
	display: grid;
	grid-template-columns: 3rem 1fr auto 1fr auto 1fr;
	gap: 0.5rem;
	align-items: center;
	padding: 0.4rem 0;
	font-size: 0.82rem;
}
.argo-rec-margin-row + .argo-rec-margin-row {
	border-top: 1px dashed var(--argo-ink-100, #f3f4f6);
}
.argo-rec-margin-row-head {
	font-size: 0.7rem;
	color: var(--argo-ink-500, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--argo-ink-100, #f3f4f6);
}
.argo-rec-margin-row-cur {
	font-weight: 700;
	color: var(--argo-ink-900, #111827);
}

/*
 * v1.93.0: "Totals by currency" matrix on the Financial tab.
 * Clean side-by-side grid — each metric row, one column per currency.
 * The point of this view is to preserve the source-of-truth native
 * amounts (FX-shift-proof). Styling emphasizes column alignment and
 * tone-coded rows.
 */
.argo-ct-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}
.argo-ct-table thead th {
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--argo-ink-500, #6b7280);
	padding: 0.55rem 0.6rem;
	border-bottom: 1px solid var(--argo-ink-100, #f3f4f6);
	text-align: right;
}
.argo-ct-table thead th.argo-ct-metric-head {
	text-align: left;
}
.argo-ct-table tbody th.argo-ct-metric {
	font-weight: 600;
	color: var(--argo-ink-900, #111827);
	padding: 0.65rem 0.6rem;
	text-align: left;
	border-bottom: 1px dashed var(--argo-ink-100, #f3f4f6);
}
.argo-ct-table tbody td.argo-ct-amt {
	font-variant-numeric: tabular-nums;
	padding: 0.65rem 0.6rem;
	text-align: right;
	border-bottom: 1px dashed var(--argo-ink-100, #f3f4f6);
	color: var(--argo-ink-900, #111827);
}
.argo-ct-table tbody td.argo-ct-amt.is-zero {
	color: var(--argo-ink-300, #d1d5db);
}
.argo-ct-table tbody td.argo-ct-amt.has-amt {
	font-weight: 600;
}
.argo-ct-table tbody tr:last-child th,
.argo-ct-table tbody tr:last-child td {
	border-bottom: none;
}
/* Tone strip on the left so each metric reads at a glance. */
.argo-ct-table tbody tr.argo-ct-tone-success th.argo-ct-metric { box-shadow: inset 3px 0 0 0 #10b981; padding-left: 0.85rem; }
.argo-ct-table tbody tr.argo-ct-tone-info    th.argo-ct-metric { box-shadow: inset 3px 0 0 0 #3b82f6; padding-left: 0.85rem; }
.argo-ct-table tbody tr.argo-ct-tone-warning th.argo-ct-metric { box-shadow: inset 3px 0 0 0 #f59e0b; padding-left: 0.85rem; }
.argo-ct-table tbody tr.argo-ct-tone-danger  th.argo-ct-metric { box-shadow: inset 3px 0 0 0 #ef4444; padding-left: 0.85rem; }

/*
 * v1.94.0: Total column on the Totals by currency table. Renders
 * each native currency on its own line within the cell — preserves
 * the "no FX translation" intent (user explicitly asked for
 * per-currency truth, not cross-currency sums).
 */
.argo-ct-table thead th.argo-ct-total-head {
	border-left: 2px solid var(--argo-ink-200, #e5e7eb);
	padding-left: 1rem;
}
.argo-ct-table tbody td.argo-ct-total-cell {
	border-left: 2px solid var(--argo-ink-100, #f3f4f6);
	padding-left: 1rem;
	font-weight: 600;
}
.argo-ct-table tbody td.argo-ct-total-cell .argo-ct-total-line {
	display: block;
	font-size: 0.78rem;
	color: var(--argo-ink-500, #6b7280);
	font-weight: 500;
	margin-top: 0.1rem;
}

/*
 * v1.94.0: Argo-vs-Broker paid/outstanding pair grid. Replaces the
 * earlier single-stat strip — now each side shows BOTH paid and
 * outstanding so the user gets the full collected/owed picture.
 */
.argo-rec-pair-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0.5rem;
	align-items: stretch;
}
.argo-rec-pair {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.25rem 0;
}
.argo-rec-pair-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--argo-ink-500, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.argo-rec-pair-title {
	color: var(--argo-ink-700, #374151);
}
.argo-rec-pair-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem;
}
.argo-rec-pair-cell {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.argo-rec-pair-l {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--argo-ink-400, #9ca3af);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.argo-rec-pair-v {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--argo-ink-900, #111827);
}
.argo-rec-pair-v.argo-stat-success { color: #047857; }
.argo-rec-pair-v.argo-stat-warning { color: #b45309; }
@media (max-width: 640px) {
	.argo-rec-pair-row { grid-template-columns: 1fr; }
	.argo-rec-pair-row .argo-rec-invoice-divider { display: none; }
}

.argo-rec-cbar-tip {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	background: var(--argo-ink-900);
	color: #fff;
	border-radius: 0.5rem;
	padding: 0.55rem 0.8rem;
	min-width: 9rem;
	font-size: 0.78rem;
	z-index: 5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
.argo-rec-cbar-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border: 5px solid transparent;
	border-top-color: var(--argo-ink-900);
}
.argo-rec-cbar-tip-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.4rem;
	align-items: center;
}
.argo-rec-cbar-tip-row + .argo-rec-cbar-tip-row { margin-top: 0.25rem; }
.argo-rec-cbar-tip-row strong { font-weight: 700; }
.argo-rec-cbar-tip-dot {
	width: 0.55rem; height: 0.55rem;
	border-radius: 999px;
}

.argo-rec-cbar-axis {
	margin-top: 0.5rem;
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) 1fr;
	gap: 1rem;
}
.argo-rec-cbar-axis-spacer {}
.argo-rec-cbar-axis-row {
	position: relative;
	height: 1.1rem;
}
.argo-rec-cbar-axis-tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 0.7rem;
	color: var(--argo-ink-400);
}

@media (max-width: 640px) {
	.argo-rec-cbar { grid-template-columns: 1fr; gap: 0.35rem; }
	.argo-rec-cbar-axis { grid-template-columns: 1fr; }
}

/* ---- Shipments tab count bars (type + status) ---- */
.argo-rec-countbars {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.argo-rec-countbar {
	display: grid;
	grid-template-columns: minmax(7rem, 9rem) 1fr auto;
	gap: 0.8rem;
	align-items: center;
}
.argo-rec-countbar-label {
	font-size: 0.85rem;
	color: var(--argo-ink-700);
	font-weight: 500;
}
.argo-rec-countbar-track {
	height: 0.65rem;
	background: #f5f5fa;
	border-radius: 999px;
	overflow: hidden;
}
.argo-rec-countbar-fill {
	height: 100%;
	background: var(--argo-brand, #19166d);
	border-radius: 999px;
	transition: width 0.3s ease;
}
.argo-rec-countbar-v {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--argo-ink-900);
	min-width: 1.6rem;
	text-align: right;
}

/* Total value of all invoices — muted footer line below the
 * paid/outstanding strip + gauge. Appears on both the Overview and the
 * Charges tabs. */
.argo-rec-invoice-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #eef0f3;
	flex-wrap: wrap;
}
.argo-rec-invoice-total-l {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--argo-ink-500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.argo-rec-invoice-total-v {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--argo-ink-900);
}

/* =============================================================================
 * Tooltip overflow fix (v1.73.3)
 * Default .argo-cust-card has `overflow: hidden` so rounded corners look
 * crisp on inner elements. That clips tooltips trying to escape the card
 * upward. For the few cards that need visible tooltips (charges category
 * bar, monthly volume bars), restore visible overflow and raise their
 * stacking so tooltips render above any neighbor cards.
 * ========================================================================== */
.argo-cust-card:has(.argo-rec-cbar-tip),
.argo-cust-card:has(.argo-rec-monthly-tooltip) {
	overflow: visible;
}
/* Tooltip itself sits high in stacking order. */
.argo-rec-cbar-tip,
.argo-rec-monthly-tooltip {
	z-index: 100;
}
/* Browsers without :has() fallback — explicit opt-in classes the tab
 * templates already use. (Belt-and-braces.) */
.argo-rec-monthly,
.argo-rec-cbars-card {
	overflow: visible !important;
}

/* =============================================================================
 * Row-level delete button + toast (v1.81.0)
 *
 * Used on broker-invoices/list.php and reimbursements/list.php for the
 * inline trash-icon button in the Actions column. Gated server-side on
 * argo_access_admin so this CSS only ever applies to admin views.
 * ========================================================================= */
.argo-row-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	border-radius: 8px;
	color: var(--argo-ink-400);
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.argo-row-delete:hover:not(:disabled) {
	background: #fee2e2;
	color: #b91c1c;
	border-color: #fecaca;
}
.argo-row-delete:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18);
}
.argo-row-delete:disabled,
.argo-row-delete.is-loading {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Lightweight toast — only used when the page doesn't already mount
 * a richer notifier (argoToast). Renders pinned bottom-center so it
 * doesn't fight with the topbar or sidebar at typical viewport sizes. */
.argo-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 500;
	color: #fff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
	animation: argo-toast-in 0.22s ease;
}
.argo-toast--success { background: #16a34a; }
.argo-toast--error   { background: #dc2626; }
.argo-toast.is-leaving { opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.2s ease, transform 0.2s ease; }
@keyframes argo-toast-in {
	from { opacity: 0; transform: translate(-50%, 6px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}