/* ============================================
	AttentIQ Dashboard
	============================================ */
@import "dashboard/attentiq-hero-block.css";
@import "dashboard/attentiq-under-hero-boxes.css";
@import "dashboard/attentiq-table.css";


/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.attentiq-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	margin-top: 50px;
}

.attentiq-scan-all {
	background: var(--primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'DM Sans', sans-serif !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(108,99,255,0.25) !important;
	transition: background 0.15s, box-shadow 0.15s, transform 0.1s !important;
	letter-spacing: 0.1px !important;
	text-shadow: none !important;
	line-height: 1.4 !important;
	height: auto !important;
}

.attentiq-scan-all:hover {
	background: var(--primary-dark) !important;
	box-shadow: 0 4px 12px rgba(108,99,255,0.35) !important;
	transform: translateY(-1px) !important;
}

/* ── Auto toggle (CSS checkbox replacement) ──────────────────────────────── */
.attentiq-auto-toggle {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 32px !important;
	height: 18px !important;
	border-radius: 18px !important;
	background: var(--border) !important;
	cursor: pointer !important;
	position: relative !important;
	transition: background 0.2s !important;
	flex-shrink: 0 !important;
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.attentiq-auto-toggle::before {
	content: '' !important;
	position: absolute !important;
	width: 12px !important;
	height: 12px !important;
	left: 3px !important;
	top: 3px !important;
	background: #fff !important;
	border-radius: 50% !important;
	transition: transform 0.2s !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
	border: none !important;
}

.attentiq-auto-toggle:checked {
	background: var(--primary) !important;
}

.attentiq-auto-toggle:checked::before {
	transform: translateX(14px) !important;
}

/* ── Confidence & decay badges ───────────────────────────────────────────── */
.attentiq-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 600;
	font-family: 'DM Sans', sans-serif;
	white-space: nowrap;
	margin-left: 3px;
}

.attentiq-badge.ok    { background: var(--mint-10); color: var(--mint-text); border: 1px solid var(--border-mint-light); }
.attentiq-badge.low   { background: var(--header-10); color: var(--text-3-aa); border: 1px solid var(--header-30); }
.attentiq-badge.decay { background: var(--red-soft);   color: #991b1b; }

/* ── Ad slot pills ───────────────────────────────────────────────────────── */
.attentiq-ad-slot {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	margin: 2px 3px 2px 0;
	white-space: nowrap;
	border: none;
	font-family: 'DM Sans', sans-serif;
}

.attentiq-ad-slot.best {
	background: var(--green-soft);
	color: #065f46;
	box-shadow: inset 0 0 0 1.5px var(--green);
}

.attentiq-ad-slot.strong {
	background: var(--primary-soft);
	color: #3730a3;
	box-shadow: inset 0 0 0 1.5px var(--primary);
}

.attentiq-ad-slot.ok {
	background: var(--amber-soft);
	color: #92400e;
	box-shadow: inset 0 0 0 1.5px var(--amber);
}

/* ── Slot row layout ─────────────────────────────────────────────────────── */
.attentiq-slot-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-bottom: 8px;
}

.attentiq-slot-row-top {
	display: flex;
	align-items: center;
	gap: 6px;
}

.attentiq-ctr {
	display: block;
	font-size: 11px;
	color: var(--text-3-aa);
	margin-top: 1px;
	letter-spacing: 0.1px;
	font-family: 'DM Mono', monospace;
}

.attentiq-dual-badge {
	font-size: 11px;
	font-weight: 700;
	color: #3730a3;
	margin-left: 6px;
	font-family: 'DM Sans', sans-serif;
	vertical-align: middle;
}

/* ── Direct sale / programmatic wrappers ─────────────────────────────────── */
.attentiq-direct-wrap {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 176px;
	font-family: 'DM Sans', sans-serif;
}

.attentiq-direct-row {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	line-height: 1.3;
}

.attentiq-direct-label {
	min-width: 72px;
	color: var(--text-2);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1px;
}

.attentiq-direct-value {
	font-weight: 700;
	color: var(--green-text);
	font-family: 'DM Mono', monospace;
	white-space: nowrap;
	font-size: 12px;
}

.attentiq-direct-period {
	font-weight: 400;
	font-size: 11px;
	color: var(--text-3-aa);
	font-family: 'DM Sans', sans-serif;
	margin-left: 1px;
}

/* ── Multiplier badges ───────────────────────────────────────────────────── */
.attentiq-direct-mult {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
	line-height: 1.6;
	white-space: nowrap;
	letter-spacing: 0.2px;
}

.attentiq-mult-high { background: var(--green-soft); color: #065f46; box-shadow: inset 0 0 0 1.5px var(--green); }
.attentiq-mult-mid  { background: var(--amber-soft); color: #92400e; box-shadow: inset 0 0 0 1.5px var(--amber); }
.attentiq-mult-low  { background: var(--border-soft); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
.attentiq-mult-none { display: none; }

/* ── Callout detail (inside tooltip) ─────────────────────────────────────── */
.attentiq-direct-callout-detail {
	display: block;
	font-size: 11px;
	color: #34896a;
	font-family: 'DM Mono', monospace;
	margin-top: 2px;
	letter-spacing: 0.1px;
}

/* ── No-data state ───────────────────────────────────────────────────────── */
.attentiq-direct-no-data {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: var(--border-soft);
	box-shadow: inset 0 0 0 1px var(--border);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-3-aa);
	font-family: 'DM Sans', sans-serif;
	cursor: help;
	letter-spacing: 0.1px;
}

/* ── Toggle switch (JS-rendered) ────────────────────────────────────────── */
.attentiq-toggle-switch {
	display: inline-block;
	width: 32px;
	height: 18px;
	border-radius: 18px;
	background: var(--border);
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	transition: background 0.2s;
	flex-shrink: 0;
}

.attentiq-toggle-switch::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.attentiq-toggle-switch.is-on { background: var(--primary); }
.attentiq-toggle-switch.is-on::after { transform: translateX(14px); }

/* ── Tooltips ────────────────────────────────────────────────────────────── */
.attentiq-direct-tip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.attentiq-direct-tip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--green-soft);
	box-shadow: inset 0 0 0 1.5px var(--green);
	font-size: 9px;
	cursor: pointer;
	margin-left: 5px;
	flex-shrink: 0;
	color: #065f46;
	font-weight: 700;
}

.attentiq-direct-tip-icon--grey {
	background: var(--border-soft);
	box-shadow: inset 0 0 0 1.5px var(--border);
	color: var(--text-2);
}

#attentiq-tooltip {
	display: none;
	position: fixed;
	background: var(--green-soft);
	box-shadow: 0 4px 16px rgba(16,185,129,0.25), inset 0 0 0 1px rgba(16,185,129,0.35);
	border-radius: 6px;
	padding: 8px 11px;
	font-size: 11px;
	color: #065f46;
	line-height: 1.6;
	font-family: 'DM Sans', sans-serif;
	width: 240px;
	z-index: 999999;
	pointer-events: none;
}

#attentiq-tooltip strong { color: #064e3b; font-weight: 700; }

#attentiq-tooltip .attentiq-direct-callout-detail {
	display: block;
	font-size: 11px;
	color: #34896a;
	font-family: 'DM Mono', monospace;
	margin-top: 3px;
}

#attentiq-tooltip.attentiq-tooltip--grey {
	background: var(--border-soft);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 0 0 1px var(--border);
	color: var(--text-2);
}

#attentiq-tooltip.attentiq-tooltip--grey strong {
	color: var(--text);
}