/* ConversionHub custom styles */
:root{--sidebar-width:260px}
html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* =====================
	 Typography (Global)
	 - Base font sizing & line-height
	 - Heading scale (h1-h6)
	 - Utilities: .text-xs .. .text-4xl, .fw-medium
	 ===================== */
:root{
	/* Fluid-ready body size (slightly larger than BS default for readability) */
	--fs-xs: 0.75rem;     /* 12px */
	--fs-sm: 0.875rem;    /* 14px */
	--fs-base: 0.975rem;  /* ~15.6px */
	--fs-md: 1rem;        /* 16px */
	--fs-lg: 1.125rem;    /* 18px */
	--fs-xl: 1.25rem;     /* 20px */
	--fs-2xl: 1.5rem;     /* 24px */
	--fs-3xl: 1.875rem;   /* 30px */
	--fs-4xl: 2.25rem;    /* 36px */

	--lh-tight: 1.25;
	--lh-normal: 1.6;
	--lh-loose: 1.8;

	/* Bootstrap body vars override (our stylesheet loads after BS) */
	--bs-body-font-size: var(--fs-base);
	--bs-body-line-height: var(--lh-normal);
}

body{font-size:var(--fs-base); line-height:var(--lh-normal); color:#111827}
small, .small{font-size:var(--fs-sm)}
.fw-medium{font-weight:500}

/* Headings: balanced modern scale with clamp for responsiveness */
h1{font-size:clamp(1.75rem, 1.15rem + 2.2vw, 2.25rem); line-height:1.25}
h2{font-size:clamp(1.5rem, 1.05rem + 1.6vw, 2rem); line-height:1.28}
h3{font-size:clamp(1.375rem, 1.02rem + 1vw, 1.75rem); line-height:1.3}
h4{font-size:clamp(1.25rem, 1.02rem + 0.6vw, 1.5rem); line-height:1.35}
h5{font-size:1.125rem; line-height:1.4}
h6{font-size:1rem; line-height:1.45}

/* Text size utilities (Tailwind-like names for convenience) */
.text-xs{font-size:var(--fs-xs)!important}
.text-sm{font-size:var(--fs-sm)!important}
.text-base{font-size:var(--fs-base)!important}
.text-md{font-size:var(--fs-md)!important}
.text-lg{font-size:var(--fs-lg)!important}
.text-xl{font-size:var(--fs-xl)!important}
.text-2xl{font-size:var(--fs-2xl)!important}
.text-3xl{font-size:var(--fs-3xl)!important}
.text-4xl{font-size:var(--fs-4xl)!important}

/* Optional helpers for icon-heavy UIs */
.text-xxl{font-size:2rem!important}
.text-2xxl{font-size:2.5rem!important}
.theme-light,:root{--bs-border-color: rgba(0,0,0,0.06)}
.sidebar{width:var(--sidebar-width)}
.topbar{min-height:56px}
.content{background:#f8f9fa}
.nav-link.active{background-color:rgba(255,255,255,0.2)!important}

/* Gradient helpers for KPI cards */
.bg-gradient-blue{
	background:linear-gradient(135deg,#2563eb, #60a5fa, #1d4ed8);
	color:#fff;
	background-size:200% 200%;
	animation:kpi-gradient 10s ease-in-out infinite;
}
.bg-gradient-purple{
	background:linear-gradient(135deg,#7c3aed, #a78bfa, #4c1d95);
	color:#fff;
	background-size:200% 200%;
	animation:kpi-gradient 11s ease-in-out infinite;
}
.bg-gradient-cyan{
	background:linear-gradient(135deg,#06b6d4, #67e8f9, #0ea5e9);
	color:#fff;
	background-size:200% 200%;
	animation:kpi-gradient 12s ease-in-out infinite;
}
.bg-gradient-green{
	background:linear-gradient(135deg,#16a34a, #86efac, #047857);
	color:#fff;
	background-size:200% 200%;
	animation:kpi-gradient 11s ease-in-out infinite;
}
.bg-gradient-red{
	background:linear-gradient(135deg,#dc2626, #fca5a5, #fb7185);
	color:#fff;
	background-size:200% 200%;
	animation:kpi-gradient 10s ease-in-out infinite;
}

@keyframes kpi-gradient{
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

/* Spacing helpers used by cards */
.p-20{padding:20px}
.mt-12{margin-top:12px}
.mt-24{margin-top:24px}
.mb-24{margin-bottom:24px}
.w-50-px{width:50px}
.h-50-px{height:50px}
.rounded-12{border-radius:12px}

/* Chart container tweaks */
#salesChart, #usersDonut{min-height:320px; height:100%}
.card .card-body #salesChart, .card .card-body #usersDonut{height:100%}

/* Polished Topbar styles */
.topbar-glass{
	position: sticky; top: 0; z-index: 1030;
	background: rgba(255,255,255,0.85);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.btn-ghost{
	background-color: transparent; border-color: transparent; color: #495057;
}
.btn-ghost:hover{background-color: rgba(0,0,0,0.04); border-color: transparent; color:#212529}
.btn-ghost:active,.btn-ghost:focus{background-color: rgba(0,0,0,0.06); box-shadow: none}
.btn-circle{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.search-pill .input-group-text{background:#f3f4f6;border:none;border-top-left-radius:9999px;border-bottom-left-radius:9999px}
.search-pill .form-control{background:#f3f4f6;border:none;border-top-right-radius:9999px;border-bottom-right-radius:9999px}
.search-pill .form-control:focus{background:#fff;box-shadow:0 0 0 2px rgba(13,110,253,.15)}
.topbar .dropdown-menu{border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(0,0,0,0.08)}

/* Soft badges for table statuses */
.badge-soft-success{color:#16a34a;background:rgba(22,163,74,0.12)}
.badge-soft-warning{color:#eab308;background:rgba(234,179,8,0.14)}
.badge-soft-danger{color:#dc2626;background:rgba(220,38,38,0.12)}
.badge-soft-secondary{color:#6b7280;background:rgba(107,114,128,0.12)}

/* Icon circle buttons for actions */
.btn-icon{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.btn-icon.btn-light{background:#eef2f7}
.btn-icon:hover{filter:brightness(0.96)}

/* Profile hero card */
.profile-hero{position:relative; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#eef2ff, #f8fafc)}
.profile-hero .card-body{position:relative; padding:22px 22px}
.profile-hero-bg{display:none}
/* Pro variant with animated blobs and glass look */
.profile-hero.pro{background:linear-gradient(135deg,#e9f0ff 0%, #f8fffb 100%); box-shadow: 0 16px 40px rgba(13,110,253,0.08), 0 2px 10px rgba(0,0,0,0.04)}
.profile-hero.pro .ph-backdrop{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.profile-hero.pro .ph-backdrop .ph-blob{position:absolute; border-radius:999px; filter:blur(16px); opacity:.6}
.profile-hero.pro .ph-backdrop .b1{width:320px; height:320px; background:radial-gradient(circle at 30% 30%, rgba(13,110,253,.35), transparent 60%); top:-80px; left:-80px; animation:ph-float 9s ease-in-out infinite}
.profile-hero.pro .ph-backdrop .b2{width:360px; height:360px; background:radial-gradient(circle at 70% 70%, rgba(32,201,151,.35), transparent 60%); bottom:-120px; right:-120px; animation:ph-float 11s ease-in-out infinite reverse}

.profile-hero.pro .ph-content{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center}
/* Make progress span full width under content */
.profile-hero.pro .ph-progress{grid-column: 1 / -1; margin-top:8px}

.avatar-hero{width:76px; height:76px; border-radius:50%; background:#0d6efd; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(255,255,255,0.6), 0 8px 20px rgba(13,110,253,0.25); overflow:hidden}
.avatar-hero img{width:100%; height:100%; object-fit:cover}
.avatar-hero .initials{color:#fff; font-weight:700; font-size:1.25rem}

.ph-title{display:flex; align-items:center; gap:10px}
.plan-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:linear-gradient(90deg, rgba(13,110,253,.1), rgba(32,201,151,.1)); color:#0d6efd; border:1px solid rgba(13,110,253,.25)}
.plan-chip i{font-size:16px}

.ph-stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.ph-stat{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:rgba(13,110,253,.06); color:#0d6efd}
.ph-stat i{font-size:16px}

.ph-progress .progress{height:8px; background:rgba(13,110,253,.08)}
.ph-progress .progress-bar{background:linear-gradient(90deg,#0d6efd,#6ea8fe)}

/* Stronger primary CTA */
.profile-hero.pro .ph-actions .btn-primary{box-shadow:0 6px 14px rgba(13,110,253,0.3); font-weight:600}
.profile-hero.pro .ph-actions .btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(13,110,253,0.35)}
.profile-hero.pro .ph-actions .btn-outline-primary{background:rgba(13,110,253,.06); border-color:rgba(13,110,253,.2)}

@keyframes ph-float{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-8px)}}

@media (max-width: 576px){
	.profile-hero.pro .ph-content{grid-template-columns:1fr; gap:14px}
	.avatar-hero{width:64px; height:64px}
}

/* Destination card list */
.dest-card-list .dest-card{border:1px solid rgba(0,0,0,0.06); border-radius:10px; background:#fff}
.dest-card-list .dest-card:hover{background:#f8fafc}
.dest-card-list .dest-card .badge{min-width:42px; text-align:center}
.dest-add-card{border:1px dashed rgba(0,0,0,0.2); color:#111827; background:#fff; padding:10px; border-radius:10px}
.dest-add-card:hover{background:#f8fafc}
/* Source add card */
.source-add-card{border:1px dashed rgba(0,0,0,0.2); background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; min-height:120px; cursor:pointer}
.source-add-card:hover{background:#f8fafc}
.source-add-card .inner{display:flex; flex-direction:column; align-items:center; gap:6px; color:#111827}
.source-add-card .plus{width:36px; height:36px; border-radius:10px; background:#eef2ff; color:#0d6efd; display:inline-flex; align-items:center; justify-content:center; font-size:20px}
/* Tiny status dot */
.status-dot{display:inline-block; width:10px; height:10px; border-radius:50%}
.status-dot.on{background:#22c55e}
.status-dot.off{background:#9ca3af}
.status-dot.warn{background:#f59e0b}

/* Table polish */
.table.align-middle td,.table.align-middle th{vertical-align:middle}
.table-hover tbody tr:hover{background-color:#f9fafb}
.table-borderless>:not(caption)>*>*{border-bottom:0!important}
.table-borderless thead th{border-bottom:0!important}
.card-header .card-title{font-size:var(--fs-md);margin:0}
.table-dashboard-latest tbody td,
.table-dashboard-latest thead th{
	padding:8px 14px;
}
.table-dashboard-latest tbody tr td:first-child,
.table-dashboard-latest thead tr th:first-child{
	padding-left:15px;
}
.table-dashboard-latest tbody tr td:last-child,
.table-dashboard-latest thead tr th:last-child{
	padding-right:15px;
}
.table-dashboard-latest tbody tr:hover{background-color:#f9fafb;}

/* Ghost borders across common components */
.card{border-color:rgba(0,0,0,0.06)}
.card-header{border-bottom-color:rgba(0,0,0,0.06)!important;background:rgba(255,255,255,0.9)}
.table> :not(caption)>*>*{border-color:rgba(0,0,0,0.06)}
.table thead.table-light{background-color:#f8fafc!important;border-bottom:1px solid rgba(0,0,0,0.06)}
.form-control,.form-select{border-color:rgba(0,0,0,0.12);background-color:#fff}
.form-control:focus,.form-select:focus{border-color:rgba(13,110,253,0.35);box-shadow:0 0 0 2px rgba(13,110,253,0.12)}
.form-label, .col-form-label{font-size:var(--fs-md)}
.btn-outline-secondary,.btn-outline-danger,.btn-outline-primary{border-color:rgba(0,0,0,0.12);color:#495057}
.btn-outline-secondary:hover,.btn-outline-danger:hover,.btn-outline-primary:hover{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.12)}
.dropdown-menu{border:1px solid rgba(0,0,0,0.06)}
.nav-tabs{border-bottom-color:rgba(0,0,0,0.06)!important}
.nav-tabs .nav-link{border-color:transparent; color:#6b7280}
.nav-tabs .nav-link:hover{border-color:transparent transparent rgba(0,0,0,0.06)}
.nav-tabs .nav-link.active{background:transparent;border-color:transparent transparent rgba(13,110,253,0.18)!important;border-bottom-width:2px;color:#0d6efd}
.tab-content{border-color:rgba(0,0,0,0.06)!important}
hr{border-color:rgba(0,0,0,0.06)}
.hr-soft{border:0; border-top:1px solid rgba(0,0,0,0.12); margin:12px 0}


/* =====================
	 Auth (Login/Register) - Metronic-like polish
	 ===================== */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f6f7fb;}
.auth-page .page-bg{position:fixed; inset:0; pointer-events:none; background:
	radial-gradient(1200px 600px at -10% -20%, #eef2ff 0%, rgba(238,242,255,0) 60%),
	radial-gradient(1000px 500px at 110% 120%, #e0f2fe 0%, rgba(224,242,254,0) 60%),
	linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%);
}
.auth-card{max-width: 420px; width: 100%;}
.auth-card .card{border:0; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.04)}
.auth-card .card-body{padding: 28px 28px;}

/* Headings + links */
.auth-title{font-size:1.125rem; font-weight:600; letter-spacing:.2px}
.auth-subtle{color:#6b7280}
.auth-link{color:#0d6efd; text-decoration:none}
.auth-link:hover{color:#0b5ed7; text-decoration:underline}

/* Inputs + password toggle */
.kt-input{position:relative}
.kt-input input.form-control{height:44px; border-radius:12px}
.kt-input .toggle-pass{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#6b7280}
.kt-input .toggle-pass:hover{color:#111827}

/* Buttons */
.kt-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 14px; font-weight:500; transition:.15s ease}
.kt-btn .brand-icon{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:18px}
.kt-btn.kt-btn-primary{background:#0d6efd; border:1px solid rgba(13,110,253,.2); color:#fff}
.kt-btn.kt-btn-primary:hover{filter:brightness(.98)}
.kt-btn.kt-btn-outline{background:#fff; border:1px solid rgba(0,0,0,.12); color:#111827}
.kt-btn.kt-btn-outline:hover{background:#f6f7f9}
.kt-btn.kt-btn-ghost{background:transparent; border:1px solid transparent; color:#374151}
.kt-btn.kt-btn-icon{width:36px; height:36px; justify-content:center; padding:0}

/* Divider */
.kt-divider{display:flex; align-items:center; gap:10px}
.kt-divider .line{flex:1 1 auto; height:1px; background:var(--bs-border-color)}
.kt-divider .text{font-size:.75rem; color:#6b7280; text-transform:uppercase; font-weight:600}

/* Checkbox tiny */
.kt-checkbox{transform: scale(1.05); margin-right:6px}

/* Auth brand badge (optional) */
.auth-brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px}
.auth-brand .logo{width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:#0d6efd}
.auth-brand .name{font-weight:600}

/* DataTables polish */
.dataTables_wrapper .dt-search, .dataTables_wrapper .dt-length{display:none!important}
.dt-container .dt-layout-row:first-child,
.dataTables_wrapper .row:first-child{display:none!important}
.dt-container, .dataTables_wrapper{padding-top:0!important; margin-top:0!important}
/* Remove any residual top spacing above thead */
.dt-container .dt-layout-row, .dataTables_wrapper .row{margin-top:0!important}
.dt-container .dt-layout-table{margin-top:0!important}
.dt-container table.dataTable, .dataTables_wrapper table.dataTable{margin-top:0!important}
.dataTables_wrapper .dataTables_info{color:#6b7280}
.dataTables_wrapper .dt-paging .dt-paging-button{border:1px solid rgba(0,0,0,0.06)!important;border-radius:8px;margin:0 2px}
.dataTables_wrapper .dt-paging .dt-paging-button.current{background:#e9efff;border-color:rgba(13,110,253,0.25)!important;color:#0d6efd}
.dataTables_wrapper .dt-paging .dt-paging-button:hover{background:#f3f4f6}
/* Padding cho khu vực info/pagination ở cuối bảng */
.dt-container .dt-layout-row:last-child,
.dataTables_wrapper .row:last-child{
	padding: 8px 12px 12px 12px; /* thêm khoảng thở để không bị dính mép card */
}

/* Add Destination Modal tweaks */
#addDestinationModal .modal-content{font-size:0.9375rem}
#addDestinationModal .modal-body{padding:20px 28px}
#addDestinationModal .modal-footer{padding:16px 28px}
#addDestinationModal .modal-body .form-label{margin-bottom:4px}
#addDestinationModal .modal-body .form-text{font-size:0.8125rem}
#addDestinationModal .btn-group .btn{padding:6px 10px}
#addDestinationModal .method-btn{padding:6px 10px}
/* Constrain modal width to hug the fields */
#addDestinationModal .modal-dialog{max-width:760px}

/* Destination (pixel) modal alignment fixes - center label to input (ignore description) */
#destinationModal .col-form-label{padding:0!important; margin:0; height:40px!important; display:flex; align-items:center}
#destinationModal .row .col-sm-8 > input.form-control,
#destinationModal .row .col-sm-8 > select.form-select{margin-top:0!important; height:40px!important}

/* Platform selector pills */
#addDestinationModal .platform-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:#f8fafc}
#addDestinationModal .platform-pill .platform-icon{width:28px; height:28px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff}
#addDestinationModal .platform-pill .platform-text{font-weight:500; color:#111827}
#addDestinationModal .platform-pill:hover{filter:brightness(0.98); background:#f3f4f6}
#addDestinationModal .platform-pill.active{outline:2px solid rgba(13,110,253,0.15); background:#eef5ff}
#addDestinationModal .platform-pill.active .platform-text{color:#0d6efd}

/* Brand-ish backgrounds */
.bg-meta{background:#1877F2}
.bg-google{background:#EA4335}
.bg-tiktok{background:#000}

/* Method switch (lightweight pills) */
#addDestinationModal .method-switch .method-btn{
	border:1px solid rgba(0,0,0,0.12);
	background:#fff;
	color:#111827;
	padding:8px 14px;
	border-radius:10px;
}
#addDestinationModal .method-switch .method-btn:hover{background:#f6f7f9}
#addDestinationModal .method-switch .method-btn.active{
	background:#eef5ff;
	outline:2px solid rgba(13,110,253,0.2);
	border-color: rgba(13,110,253,0.35);
	color:#0d6efd;
}

	/* Token input for Conversion labels */
	#addDestinationModal .conversion-list{display:block}
	#addDestinationModal .conversion-list .conversion-rows{display:flex; flex-direction:column; gap:10px}
	#addDestinationModal .conversion-item{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center}
	#addDestinationModal .conversion-item .box{position:relative; border:1px solid rgba(0,0,0,0.12); border-radius:10px; padding:10px 12px; background:#fff}
	#addDestinationModal .conversion-item .box .badge-hint{position:absolute; top:6px; left:10px; font-size:0.75rem; color:#6b7280}
	#addDestinationModal .conversion-item .box input,
	#addDestinationModal .conversion-item .box select{margin-top:16px}
	#addDestinationModal .conversion-item .box input.form-control,
	#addDestinationModal .conversion-item .box select.form-select{
		border:0!important;
		box-shadow:none!important;
		background:transparent!important;
		padding-left:0; padding-right:0;
	}
	#addDestinationModal .conversion-item .box select.form-select{
		-webkit-appearance:none; -moz-appearance:none; appearance:none;
	}
	#addDestinationModal .conversion-item .box:focus-within{
		border-color: rgba(13,110,253,0.4);
		box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
	}
	#addDestinationModal .conversion-item .conv-box .clear-row{position:absolute; top:6px; right:8px; border:0; background:transparent; color:#374151; font-size:18px; line-height:1; padding:0 4px; cursor:pointer}
	#addDestinationModal .conversion-item .conv-box .clear-row:hover{color:#111827}
	#addDestinationModal .add-conversion-box{border:1px dashed rgba(0,0,0,0.2); color:#111827; background:#fff; padding:12px; border-radius:10px}
	#addDestinationModal .add-conversion-box:hover{background:#f8fafc}
/* Fields fill modal width */
#addDestinationModal .modal-body .col-sm-8{max-width:100%}
#addDestinationModal .modal-body .col-sm-8 .form-control,
#addDestinationModal .modal-body .col-sm-8 .form-select{max-width:100%; width:100%}
#addDestinationModal .modal-body .col-sm-8 .btn-group{max-width:100%; width:100%}
#addDestinationModal .modal-body .col-sm-8 .form-text{max-width:100%; width:100%}

@media (max-width: 575.98px){
	/* On extra-small screens, let fields use full width */
	#addDestinationModal .modal-body .col-sm-8{max-width:100%}
	#addDestinationModal .modal-body .col-sm-8 .form-control,
	#addDestinationModal .modal-body .col-sm-8 .form-select,
	#addDestinationModal .modal-body .col-sm-8 .btn-group,
	#addDestinationModal .modal-body .col-sm-8 .form-text{max-width:100%}
}

/* Use default Bootstrap grid on ≥sm (no overrides) */

/* =====================
	Rule Builder (Rules UI)
	===================== */
.rb-conditions .rb-cond-row input.form-control,
.rb-conditions .rb-cond-row select.form-select{height:38px}
.rb-actions .rb-action{border:1px solid rgba(0,0,0,0.06)}
.rb-actions .rb-action .rb-map .row{margin-left:0; margin-right:0}
.rb-actions .rb-action .rb-map .form-control{height:38px}
.rb-actions .rb-action .rb-remove, .rb-conditions .rb-cond-row .rb-remove{width:28px;height:28px; font-size:14px; line-height:1}
/* Close (delete) icon for action card */
.rb-action .rb-remove-abs{position:absolute; top:5px; right:5px; z-index:2; border:0; cursor:pointer;
	width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
	background:transparent; color:#dc2626; border-radius:4px;
	-webkit-appearance:none; appearance:none;}
.rb-action .rb-remove-abs i{line-height:1; font-size:14px}
.rb-action .rb-remove-abs:hover{ color:#b91c1c }
.rb-action .rb-remove-abs:focus{ outline:2px solid rgba(220,38,38,.25); outline-offset:2px }

/* Sidebar wizard (offcanvas) */
.rb-canvas{--bs-offcanvas-width: 540px; width: var(--bs-offcanvas-width)}
.rb-step-pill{display:inline-block; font-weight:600; letter-spacing:.02em; font-size:.8rem; color:#0d6efd; background:#eef5ff; border:1px solid rgba(13,110,253,.2); padding:4px 8px; border-radius:999px}
.rb-step-title{font-size:1rem; font-weight:600; color:#111827}
.rb-step-pane .form-label{margin-bottom:4px}
.rb-quick-source .form-text{font-size:0.85rem}
/* Fixed padding utility for pixel action cards */
.rb-card-pad{padding:1.6rem !important}

/* Ensure all offcanvas variants respect width we set */
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl{ --bs-offcanvas-width: 540px; }

/* Integrations list (Step 3) */
.int-list{display:flex; flex-direction:column; gap:12px}
.int-item{background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; overflow:hidden}
.int-item .int-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px}
.int-item .int-head .form-check-input{transform: scale(1.25); cursor:pointer}
.int-item .int-head .form-check{padding-left:2.25rem}
.int-item .int-body{padding:2px 16px; background:#fafafa; border-top:1px solid rgba(0,0,0,0.06)}
/* Step 3: ensure "+ Chọn Pixel" can sit inline with "Tạo pixel" */
.int-add{
	display:inline-flex;               /* allow flex behavior inside flex row */
	align-items:center;
	justify-content:center;
	flex:1 1 auto;                     /* take remaining space next to the create button */
	width:auto;                        /* no longer force full width */
	text-align:center;
	padding:0 14px;                    /* vertical align handled by flex + fixed height */
	border:2px dashed rgba(0,0,0,0.15);
	background:#fff;
	border-radius:10px;
	color:#111827;
	margin:0;                          /* rely on gap spacing in parent */
}
.int-body .int-add,
.int-body .int-create{
	height:44px;                       /* unify heights */
}
.int-body .int-create{
	display:inline-flex;
	align-items:center;
	border-radius:10px;                /* visually consistent with .int-add */
}
.int-add:hover{background:#f8fafc}
/* Spacing between pixels */
.int-actions{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.int-body .int-actions + .int-actions-controls{ margin-top: 16px }
/* Inline label + field utility */
.inline-field{display:flex; align-items:center; gap:10px}
.inline-field .form-label{margin-bottom:0}
/* Two-column layout inside action blocks: label left fixed, field right fills */
.rb-action .inline-field{align-items:center}
.rb-action .inline-field .form-label{flex:0 0 120px; text-align:left}
.rb-action .inline-field > :not(.form-label){flex:1 1 auto}
/* Keep label on one line by limiting select width on desktop */
.rb-action .inline-field .evt-select{max-width: 320px}
@media (max-width: 575.98px){
	.rb-action .inline-field .evt-select{max-width: 100%}
}
@media (max-width: 575.98px){
	.inline-field{flex-direction:column; align-items:stretch; gap:6px}
    .rb-action .inline-field .form-label{flex:0 0 auto; width:100%}
}

/* =====================
   Cap Usage Warning Banner
   ===================== */
.cap-warning-banner {
	position: sticky;
	top: 0;
	z-index: 1020;
}
.cap-warning-banner .alert {
	margin-bottom: 0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: var(--fs-sm);
}
.cap-warning-banner .btn-close-sm {
	font-size: 0.65rem;
	padding: 0.25rem;
}
@media (max-width: 767.98px) {
	.cap-warning-banner .alert {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}
	.cap-warning-banner .alert > div:first-child {
		flex-direction: column;
	}
}
/* Pulse animation for critical warnings */
.cap-warning-banner[data-cap-type="danger"] .alert,
.cap-warning-banner[data-cap-type="warning-high"] .alert {
	animation: cap-pulse 2s ease-in-out infinite;
}
@keyframes cap-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.85; }
}
/* =====================
   Diagnostic Section (Dashboard)
   ===================== */
#diagnosticCard {
	transition: box-shadow 0.2s ease;
}
#diagnosticCard:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.diagnostic-step-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.diagnostic-step-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.diagnostic-step-card[data-status="error"] {
	border-color: rgba(220, 38, 38, 0.3) !important;
	background: rgba(254, 242, 242, 0.5);
}
.diagnostic-step-card[data-status="warning"] {
	border-color: rgba(234, 179, 8, 0.3) !important;
	background: rgba(254, 252, 232, 0.5);
}
.diagnostic-step-card[data-status="success"] {
	border-color: rgba(22, 163, 74, 0.2) !important;
}

/* Subtle backgrounds for status badges */
.bg-success-subtle { background-color: rgba(22, 163, 74, 0.1) !important; }
.bg-warning-subtle { background-color: rgba(234, 179, 8, 0.12) !important; }
.bg-danger-subtle { background-color: rgba(220, 38, 38, 0.1) !important; }
.bg-info-subtle { background-color: rgba(6, 182, 212, 0.1) !important; }