/**
 * CARIBICO UI Components System v1
 *
 * Reusable opt-in component classes built on UI Foundation tokens.
 * Does NOT restyle existing pages. Use classes only when migrating UI.
 *
 * Components: buttons, status badges, tabs, form controls.
 * Style: compact B2B, soft CARIBICO navy — not saturated social-blue.
 */

:root{
	/* Component-local tokens (foundation-aware) */
	--cwb-c-btn-h:32px;
	--cwb-c-btn-h-sm:28px;
	--cwb-c-btn-px:12px;
	--cwb-c-btn-fs:13px;
	--cwb-c-btn-radius:8px;
	--cwb-c-btn-shadow:0 1px 2px rgba(27,90,122,.12),0 1px 3px rgba(16,24,40,.06);
	--cwb-c-control-h:34px;
	--cwb-c-control-radius:8px;
	--cwb-c-control-fs:13px;
	--cwb-c-badge-fs:11px;
	--cwb-c-tab-fs:12px;
}

/* —— Buttons —— */
.cwb-c-btn{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:var(--cwb-c-btn-h);
	padding:0 var(--cwb-c-btn-px);
	margin:0;
	border:1px solid transparent;
	border-radius:var(--cwb-c-btn-radius);
	font-family:var(--cwb-f-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
	font-size:var(--cwb-c-btn-fs);
	font-weight:var(--cwb-f-fw-semibold,600);
	line-height:1.2;
	letter-spacing:.01em;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	user-select:none;
	transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,opacity .15s ease;
	-webkit-appearance:none;
	appearance:none;
}
.cwb-c-btn:focus{
	outline:none;
}
.cwb-c-btn:focus-visible{
	box-shadow:0 0 0 3px rgba(27,90,122,.22);
}
.cwb-c-btn:disabled,
.cwb-c-btn.is-disabled{
	opacity:.48;
	cursor:not-allowed;
	box-shadow:none;
	pointer-events:none;
}
.cwb-c-btn.is-sm{
	min-height:var(--cwb-c-btn-h-sm);
	padding:0 10px;
	font-size:12px;
}
.cwb-c-btn.is-block{
	display:flex;
	width:100%;
}

/* Primary — soft CARIBICO navy (Search, Confirm) */
.cwb-c-btn.is-primary{
	background:var(--cwb-f-navy,#1B5A7A);
	border-color:var(--cwb-f-navy,#1B5A7A);
	color:var(--cwb-f-text-on-navy,#fff);
	box-shadow:var(--cwb-c-btn-shadow);
}
.cwb-c-btn.is-primary:hover{
	background:var(--cwb-f-navy-hover,#164A65);
	border-color:var(--cwb-f-navy-hover,#164A65);
}
.cwb-c-btn.is-primary:active{
	background:var(--cwb-f-navy-active,#123E55);
	border-color:var(--cwb-f-navy-active,#123E55);
	box-shadow:var(--cwb-f-shadow-soft,0 1px 2px rgba(16,24,40,.04));
}

/* Secondary — soft bordered (Open, Edit, View) */
.cwb-c-btn.is-secondary{
	background:var(--cwb-f-bg-elevated,#fff);
	border-color:var(--cwb-f-border,#D9E1E7);
	color:var(--cwb-f-navy,#1B5A7A);
	box-shadow:var(--cwb-f-shadow-soft,0 1px 3px rgba(16,24,40,.04));
}
.cwb-c-btn.is-secondary:hover{
	background:var(--cwb-f-blue-soft,#EAF3F7);
	border-color:var(--cwb-f-border-strong,#C9DDE7);
}
.cwb-c-btn.is-secondary:active{
	background:var(--cwb-f-bg-muted,#F8FAFB);
}

/* Ghost — small actions */
.cwb-c-btn.is-ghost{
	background:transparent;
	border-color:transparent;
	color:var(--cwb-f-text-secondary,rgba(0,0,0,.55));
	box-shadow:none;
	font-weight:var(--cwb-f-fw-medium,500);
}
.cwb-c-btn.is-ghost:hover{
	background:rgba(27,90,122,.06);
	color:var(--cwb-f-navy,#1B5A7A);
}
.cwb-c-btn.is-ghost:active{
	background:rgba(27,90,122,.1);
}

/* Danger — Cancel / destructive */
.cwb-c-btn.is-danger{
	background:var(--cwb-f-danger-soft,#FEF3F2);
	border-color:#F3D1CE;
	color:var(--cwb-f-danger,#B42318);
	box-shadow:none;
}
.cwb-c-btn.is-danger:hover{
	background:#FCE8E6;
	border-color:#E8B4AF;
}
.cwb-c-btn.is-danger:active{
	background:#F9DCD8;
}
.cwb-c-btn.is-danger.is-solid{
	background:var(--cwb-f-danger,#B42318);
	border-color:var(--cwb-f-danger,#B42318);
	color:#fff;
	box-shadow:0 1px 2px rgba(180,35,24,.16);
}
.cwb-c-btn.is-danger.is-solid:hover{
	background:#9B1C14;
	border-color:#9B1C14;
}

/* Icon button — close / refresh / settings / actions */
.cwb-c-btn.is-icon{
	width:var(--cwb-c-btn-h);
	min-width:var(--cwb-c-btn-h);
	padding:0;
	border-radius:var(--cwb-c-btn-radius);
	background:transparent;
	border-color:transparent;
	color:var(--cwb-f-text-secondary,rgba(0,0,0,.55));
	box-shadow:none;
}
.cwb-c-btn.is-icon:hover{
	background:rgba(27,90,122,.07);
	color:var(--cwb-f-navy,#1B5A7A);
}
.cwb-c-btn.is-icon:active{
	background:rgba(27,90,122,.12);
}
.cwb-c-btn.is-icon.is-sm{
	width:var(--cwb-c-btn-h-sm);
	min-width:var(--cwb-c-btn-h-sm);
	min-height:var(--cwb-c-btn-h-sm);
}
.cwb-c-btn.is-icon .cwb-lucide,
.cwb-c-btn.is-icon svg{
	width:16px;
	height:16px;
	flex:0 0 auto;
}

/* —— Status badges —— */
.cwb-c-badge{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	gap:4px;
	max-width:100%;
	padding:2px 8px;
	border:1px solid transparent;
	border-radius:999px;
	font-family:var(--cwb-f-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
	font-size:var(--cwb-c-badge-fs);
	font-weight:var(--cwb-f-fw-semibold,600);
	line-height:1.35;
	letter-spacing:.02em;
	white-space:nowrap;
	vertical-align:middle;
}
.cwb-c-badge.is-confirmed,
.cwb-c-badge.is-active{
	background:var(--cwb-f-success-soft,#ECFDF3);
	border-color:#A6F4C5;
	color:var(--cwb-f-success,#027A48);
}
.cwb-c-badge.is-pending{
	background:var(--cwb-f-warning-soft,#FFFAEB);
	border-color:#FEDF89;
	color:var(--cwb-f-warning,#B54708);
}
.cwb-c-badge.is-cancelled,
.cwb-c-badge.is-suspended{
	background:var(--cwb-f-danger-soft,#FEF3F2);
	border-color:#FECDCA;
	color:var(--cwb-f-danger,#B42318);
}
.cwb-c-badge.is-neutral{
	background:var(--cwb-f-bg-muted,#F8FAFB);
	border-color:var(--cwb-f-border-soft,#E4E9ED);
	color:var(--cwb-f-text-secondary,rgba(0,0,0,.55));
}
.cwb-c-badge.is-info{
	background:var(--cwb-f-blue-soft,#EAF3F7);
	border-color:var(--cwb-f-border-strong,#C9DDE7);
	color:var(--cwb-f-navy,#1B5A7A);
}

/* —— Tabs (DETAILS | VOUCHER | PROFORMA | HISTORY) —— */
.cwb-c-tabs{
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	gap:2px;
	padding:2px;
	margin:0;
	list-style:none;
	background:var(--cwb-f-bg-muted,#F8FAFB);
	border:1px solid var(--cwb-f-border-soft,#E4E9ED);
	border-radius:var(--cwb-f-radius-sm,8px);
}
.cwb-c-tabs.is-underline{
	gap:0;
	padding:0;
	background:transparent;
	border:none;
	border-bottom:1px solid var(--cwb-f-border,#D9E1E7);
	border-radius:0;
}
.cwb-c-tab{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:30px;
	padding:6px 12px;
	margin:0;
	border:1px solid transparent;
	border-radius:6px;
	background:transparent;
	color:var(--cwb-f-text-secondary,rgba(0,0,0,.55));
	font-family:var(--cwb-f-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
	font-size:var(--cwb-c-tab-fs);
	font-weight:var(--cwb-f-fw-medium,500);
	line-height:1.2;
	letter-spacing:.03em;
	text-transform:uppercase;
	text-decoration:none;
	cursor:pointer;
	transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
	-webkit-appearance:none;
	appearance:none;
}
.cwb-c-tab:hover{
	color:var(--cwb-f-navy,#1B5A7A);
	background:rgba(255,255,255,.7);
}
.cwb-c-tab:focus{
	outline:none;
}
.cwb-c-tab:focus-visible{
	box-shadow:0 0 0 3px rgba(27,90,122,.18);
}
.cwb-c-tab.is-active,
.cwb-c-tab[aria-selected="true"]{
	background:var(--cwb-f-bg-elevated,#fff);
	border-color:var(--cwb-f-border-soft,#E4E9ED);
	color:var(--cwb-f-navy,#1B5A7A);
	font-weight:var(--cwb-f-fw-semibold,600);
	box-shadow:var(--cwb-f-shadow-soft,0 1px 3px rgba(16,24,40,.04));
}
.cwb-c-tabs.is-underline .cwb-c-tab{
	border-radius:0;
	border:none;
	border-bottom:2px solid transparent;
	background:transparent;
	box-shadow:none;
	min-height:34px;
	padding:8px 10px;
}
.cwb-c-tabs.is-underline .cwb-c-tab:hover{
	background:transparent;
	color:var(--cwb-f-navy,#1B5A7A);
}
.cwb-c-tabs.is-underline .cwb-c-tab.is-active,
.cwb-c-tabs.is-underline .cwb-c-tab[aria-selected="true"]{
	background:transparent;
	border-bottom-color:var(--cwb-f-navy,#1B5A7A);
	color:var(--cwb-f-navy,#1B5A7A);
	box-shadow:none;
}
.cwb-c-tab-panel{
	padding-top:var(--cwb-f-space-md,12px);
}
.cwb-c-tab-panel[hidden]{
	display:none;
}

/* —— Form elements —— */
.cwb-c-field{
	display:grid;
	gap:6px;
}
.cwb-c-field-label{
	margin:0;
	font-family:var(--cwb-f-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
	font-size:var(--cwb-f-fs-label,11px);
	font-weight:var(--cwb-f-fw-medium,500);
	line-height:1.3;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--cwb-f-text-label,rgba(0,0,0,.45));
}
.cwb-c-field-hint{
	margin:0;
	font-size:12px;
	line-height:1.35;
	color:var(--cwb-f-text-muted,rgba(0,0,0,.38));
}
.cwb-c-field-error{
	margin:0;
	font-size:12px;
	line-height:1.35;
	color:var(--cwb-f-danger,#B42318);
}

.cwb-c-input,
.cwb-c-select,
.cwb-c-textarea{
	box-sizing:border-box;
	width:100%;
	min-height:var(--cwb-c-control-h);
	padding:7px 10px;
	margin:0;
	border:1px solid var(--cwb-f-border,#D9E1E7);
	border-radius:var(--cwb-c-control-radius);
	background:var(--cwb-f-bg-elevated,#fff);
	color:var(--cwb-f-text,#1A2B44);
	font-family:var(--cwb-f-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
	font-size:var(--cwb-c-control-fs);
	font-weight:var(--cwb-f-fw-regular,400);
	line-height:1.35;
	box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
	transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
	-webkit-appearance:none;
	appearance:none;
}
.cwb-c-textarea{
	min-height:84px;
	resize:vertical;
}
.cwb-c-input::placeholder,
.cwb-c-textarea::placeholder{
	color:var(--cwb-f-text-muted,rgba(0,0,0,.38));
}
.cwb-c-input:hover,
.cwb-c-select:hover,
.cwb-c-textarea:hover{
	border-color:var(--cwb-f-border-strong,#C9DDE7);
}
.cwb-c-input:focus,
.cwb-c-select:focus,
.cwb-c-textarea:focus{
	outline:none;
	border-color:var(--cwb-f-navy,#1B5A7A);
	box-shadow:0 0 0 3px rgba(27,90,122,.16);
}
.cwb-c-input:disabled,
.cwb-c-select:disabled,
.cwb-c-textarea:disabled,
.cwb-c-input.is-disabled,
.cwb-c-select.is-disabled{
	background:var(--cwb-f-bg-muted,#F8FAFB);
	color:var(--cwb-f-text-secondary,rgba(0,0,0,.55));
	cursor:not-allowed;
	opacity:.85;
}
.cwb-c-input.is-error,
.cwb-c-select.is-error,
.cwb-c-textarea.is-error{
	border-color:#F3D1CE;
}
.cwb-c-input.is-error:focus,
.cwb-c-select.is-error:focus,
.cwb-c-textarea.is-error:focus{
	box-shadow:0 0 0 3px rgba(180,35,24,.14);
}

/* Select with chevron affordance */
.cwb-c-select{
	padding-right:28px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7C8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 8px center;
	background-size:14px 14px;
	cursor:pointer;
}

/* Custom dropdown shell (trigger + panel) */
.cwb-c-dropdown{
	position:relative;
	display:inline-block;
	max-width:100%;
}
.cwb-c-dropdown.is-block{
	display:block;
	width:100%;
}
.cwb-c-dropdown-trigger{
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	width:100%;
	min-height:var(--cwb-c-control-h);
	padding:7px 10px;
	border:1px solid var(--cwb-f-border,#D9E1E7);
	border-radius:var(--cwb-c-control-radius);
	background:var(--cwb-f-bg-elevated,#fff);
	color:var(--cwb-f-text,#1A2B44);
	font-family:var(--cwb-f-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
	font-size:var(--cwb-c-control-fs);
	font-weight:var(--cwb-f-fw-medium,500);
	line-height:1.35;
	text-align:left;
	cursor:pointer;
	box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
	transition:border-color .15s ease,box-shadow .15s ease;
}
.cwb-c-dropdown-trigger:hover{
	border-color:var(--cwb-f-border-strong,#C9DDE7);
}
.cwb-c-dropdown-trigger:focus,
.cwb-c-dropdown.is-open .cwb-c-dropdown-trigger{
	outline:none;
	border-color:var(--cwb-f-navy,#1B5A7A);
	box-shadow:0 0 0 3px rgba(27,90,122,.16);
}
.cwb-c-dropdown-panel{
	position:absolute;
	z-index:40;
	top:calc(100% + 4px);
	left:0;
	right:0;
	min-width:100%;
	max-height:220px;
	overflow:auto;
	padding:4px;
	margin:0;
	list-style:none;
	background:var(--cwb-f-bg-elevated,#fff);
	border:1px solid var(--cwb-f-border,#D9E1E7);
	border-radius:var(--cwb-c-control-radius);
	box-shadow:var(--cwb-f-shadow,0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.06));
}
.cwb-c-dropdown-panel[hidden],
.cwb-c-dropdown:not(.is-open) .cwb-c-dropdown-panel{
	display:none;
}
.cwb-c-dropdown-item{
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
	padding:7px 8px;
	border:0;
	border-radius:6px;
	background:transparent;
	color:var(--cwb-f-text,#1A2B44);
	font-family:inherit;
	font-size:13px;
	font-weight:var(--cwb-f-fw-regular,400);
	line-height:1.3;
	text-align:left;
	cursor:pointer;
}
.cwb-c-dropdown-item:hover,
.cwb-c-dropdown-item:focus{
	outline:none;
	background:var(--cwb-f-blue-soft,#EAF3F7);
	color:var(--cwb-f-navy,#1B5A7A);
}
.cwb-c-dropdown-item.is-active{
	background:rgba(27,90,122,.08);
	color:var(--cwb-f-navy,#1B5A7A);
	font-weight:var(--cwb-f-fw-semibold,600);
}

/* —— Responsive —— */
@media(max-width:760px){
	:root{
		--cwb-c-btn-h:34px;
		--cwb-c-control-h:36px;
	}
	.cwb-c-tabs{
		flex-wrap:nowrap;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:thin;
	}
	.cwb-c-tab{
		flex:0 0 auto;
		padding:6px 10px;
	}
	.cwb-c-btn.is-block-mobile{
		display:flex;
		width:100%;
	}
	.cwb-c-dropdown{
		display:block;
		width:100%;
	}
}