/* ============================================================
   Infineural Client Dashboard — Main CSS Design System
   Dark glassmorphism, Inter font, mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
	--infc-accent:      #6366f1;
	--infc-accent-2:    #8b5cf6;
	--infc-teal:        #14b8a6;
	--infc-green:       #10b981;
	--infc-yellow:      #f59e0b;
	--infc-red:         #ef4444;
	--infc-bg:          #0d0f18;
	--infc-bg-2:        #11141f;
	--infc-surface:     rgba(255,255,255,0.04);
	--infc-surface-2:   rgba(255,255,255,0.07);
	--infc-border:      rgba(255,255,255,0.08);
	--infc-border-2:    rgba(255,255,255,0.13);
	--infc-text:        #f1f5f9;
	--infc-text-2:      #cbd5e1;
	--infc-muted:       #64748b;
	--infc-muted-2:     #94a3b8;
	--infc-radius:      14px;
	--infc-radius-sm:   8px;
	--infc-shadow:      0 4px 24px rgba(0,0,0,0.35);
	--infc-sidebar-w:   240px;
	--infc-nav-h:       64px;
}

/* ── Base ───────────────────────────────────────────────────── */
.infc-wrap * { box-sizing:border-box; }

.infc-wrap {
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	font-size:14px;
	color:var(--infc-text);
	background:var(--infc-bg);
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

/* ── Layout Grid ────────────────────────────────────────────── */
.infc-layout {
	display:grid;
	grid-template-columns:var(--infc-sidebar-w) 1fr;
	grid-template-rows:auto 1fr;
	min-height:100vh;
}

.infc-topbar {
	grid-column:1/-1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 24px;
	height:60px;
	background:rgba(13,15,24,0.95);
	border-bottom:1px solid var(--infc-border);
	backdrop-filter:blur(16px);
	position:sticky;
	top:0;
	z-index:100;
}

.infc-topbar-brand {
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
}

.infc-topbar-logo {
	height:32px;
	width:auto;
}

.infc-topbar-name {
	font-size:16px;
	font-weight:700;
	background:linear-gradient(135deg,var(--infc-accent),var(--infc-teal));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-clip:text;
}

.infc-topbar-right {
	display:flex;
	align-items:center;
	gap:16px;
}

.infc-topbar-user {
	display:flex;
	align-items:center;
	gap:10px;
}

.infc-avatar {
	width:34px;
	height:34px;
	border-radius:50%;
	background:linear-gradient(135deg,var(--infc-accent),var(--infc-accent-2));
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	font-weight:700;
	color:#fff;
	flex-shrink:0;
}

.infc-user-name {
	font-size:13px;
	font-weight:500;
	color:var(--infc-text-2);
	line-height:1.2;
}

.infc-user-role {
	font-size:11px;
	color:var(--infc-muted-2);
}

.infc-logout-btn {
	font-size:12px;
	color:var(--infc-muted-2);
	text-decoration:none;
	padding:6px 12px;
	border:1px solid var(--infc-border);
	border-radius:6px;
	transition:all .15s;
}

.infc-logout-btn:hover {
	color:var(--infc-text);
	border-color:var(--infc-border-2);
	background:var(--infc-surface-2);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.infc-sidebar {
	background:var(--infc-bg-2);
	border-right:1px solid var(--infc-border);
	padding:20px 12px;
	display:flex;
	flex-direction:column;
	gap:4px;
	position:sticky;
	top:60px;
	height:calc(100vh - 60px);
	overflow-y:auto;
}

.infc-sidebar-section-label {
	font-size:10px;
	font-weight:600;
	color:var(--infc-muted);
	text-transform:uppercase;
	letter-spacing:.08em;
	padding:12px 12px 4px;
}

.infc-nav-item {
	display:flex;
	align-items:center;
	gap:11px;
	padding:10px 14px;
	border-radius:var(--infc-radius-sm);
	cursor:pointer;
	transition:all .15s;
	border:none;
	background:none;
	width:100%;
	text-align:left;
	color:var(--infc-muted-2);
	font-size:13px;
	font-weight:500;
	text-decoration:none;
}

.infc-nav-item:hover {
	background:var(--infc-surface-2);
	color:var(--infc-text);
}

.infc-nav-item.active {
	background:rgba(99,102,241,0.15);
	color:var(--infc-accent);
	font-weight:600;
}

.infc-nav-item.active .infc-nav-icon { opacity:1; }

.infc-nav-icon {
	width:18px;
	height:18px;
	opacity:.6;
	flex-shrink:0;
}

.infc-nav-dot {
	margin-left:auto;
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--infc-green);
	display:none;
}

.infc-nav-dot.visible { display:block; }

/* ── Content Area ───────────────────────────────────────────── */
.infc-content {
	padding:28px 28px 80px;
	overflow-y:auto;
}

/* ── Section panels ─────────────────────────────────────────── */
.infc-section { display:none; }
.infc-section.active { display:block; animation:infc-fade-in .25s ease; }

@keyframes infc-fade-in {
	from { opacity:0; transform:translateY(8px); }
	to   { opacity:1; transform:translateY(0); }
}

/* ── Page Header ────────────────────────────────────────────── */
.infc-page-header {
	margin-bottom:24px;
}

.infc-page-title {
	font-size:22px;
	font-weight:700;
	color:var(--infc-text);
	margin:0 0 4px;
}

.infc-page-subtitle {
	font-size:13px;
	color:var(--infc-muted-2);
	margin:0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.infc-card {
	background:var(--infc-surface);
	border:1px solid var(--infc-border);
	border-radius:var(--infc-radius);
	padding:22px 24px;
	margin-bottom:18px;
	box-shadow:var(--infc-shadow);
	backdrop-filter:blur(10px);
	transition:border-color .2s;
}

.infc-card:hover { border-color:var(--infc-border-2); }

.infc-card-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:18px;
}

.infc-card-title {
	font-size:15px;
	font-weight:700;
	color:var(--infc-text);
	margin:0;
	display:flex;
	align-items:center;
	gap:8px;
}

.infc-card-title-icon {
	width:20px;
	height:20px;
	opacity:.8;
}

/* ── Stat Grid ──────────────────────────────────────────────── */
.infc-stat-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
	gap:14px;
	margin-bottom:20px;
}

.infc-stat-card {
	background:var(--infc-surface-2);
	border:1px solid var(--infc-border);
	border-radius:var(--infc-radius-sm);
	padding:16px;
	transition:transform .15s, border-color .15s;
}

.infc-stat-card:hover { transform:translateY(-2px); border-color:var(--infc-border-2); }

.infc-stat-value {
	font-size:26px;
	font-weight:800;
	color:var(--infc-accent);
	line-height:1.1;
}

.infc-stat-value.green  { color:var(--infc-green); }
.infc-stat-value.teal   { color:var(--infc-teal); }
.infc-stat-value.yellow { color:var(--infc-yellow); }
.infc-stat-value.red    { color:var(--infc-red); }

.infc-stat-label {
	font-size:11px;
	font-weight:500;
	color:var(--infc-muted-2);
	margin-top:5px;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.infc-stat-trend {
	font-size:11px;
	margin-top:4px;
}

.infc-stat-trend.up   { color:var(--infc-green); }
.infc-stat-trend.down { color:var(--infc-red); }

/* ── Badges ─────────────────────────────────────────────────── */
.infc-badge {
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:3px 9px;
	border-radius:20px;
	font-size:11px;
	font-weight:600;
	letter-spacing:.02em;
	white-space:nowrap;
}

.infc-badge-green   { background:rgba(16,185,129,.15); color:#34d399; border:1px solid rgba(16,185,129,.2); }
.infc-badge-blue    { background:rgba(99,102,241,.15);  color:#818cf8; border:1px solid rgba(99,102,241,.2); }
.infc-badge-teal    { background:rgba(20,184,166,.15);  color:#2dd4bf; border:1px solid rgba(20,184,166,.2); }
.infc-badge-yellow  { background:rgba(245,158,11,.15);  color:#fbbf24; border:1px solid rgba(245,158,11,.2); }
.infc-badge-red     { background:rgba(239,68,68,.15);   color:#f87171; border:1px solid rgba(239,68,68,.2); }
.infc-badge-gray    { background:rgba(100,116,139,.15); color:#94a3b8; border:1px solid rgba(100,116,139,.2); }
.infc-badge-purple  { background:rgba(139,92,246,.15);  color:#a78bfa; border:1px solid rgba(139,92,246,.2); }

/* ── Tables ─────────────────────────────────────────────────── */
.infc-table-wrap { overflow-x:auto; border-radius:var(--infc-radius-sm); }

.infc-table {
	width:100%;
	border-collapse:collapse;
	font-size:13px;
}

.infc-table th {
	background:rgba(255,255,255,0.04);
	padding:10px 14px;
	text-align:left;
	font-size:10px;
	font-weight:600;
	color:var(--infc-muted);
	text-transform:uppercase;
	letter-spacing:.06em;
	border-bottom:1px solid var(--infc-border);
	white-space:nowrap;
}

.infc-table td {
	padding:11px 14px;
	border-bottom:1px solid rgba(255,255,255,0.04);
	color:var(--infc-text-2);
	vertical-align:middle;
}

.infc-table tr:last-child td { border-bottom:none; }
.infc-table tr:hover td { background:rgba(255,255,255,0.03); }

/* ── Progress Bars ──────────────────────────────────────────── */
.infc-bar {
	background:rgba(255,255,255,0.08);
	border-radius:6px;
	height:8px;
	overflow:hidden;
}

.infc-bar-fill {
	height:100%;
	border-radius:6px;
	background:linear-gradient(90deg,var(--infc-accent),var(--infc-accent-2));
	transition:width .6s ease;
}

.infc-bar-fill.green  { background:linear-gradient(90deg,var(--infc-green),#059669); }
.infc-bar-fill.teal   { background:linear-gradient(90deg,var(--infc-teal),#0d9488); }
.infc-bar-fill.yellow { background:linear-gradient(90deg,var(--infc-yellow),#d97706); }
.infc-bar-fill.red    { background:linear-gradient(90deg,var(--infc-red),#dc2626); }

/* ── Credit bar (tall) ──────────────────────────────────────── */
.infc-credit-bar { height:12px; }

/* ── Tabs ───────────────────────────────────────────────────── */
.infc-tabs {
	display:flex;
	border-bottom:1px solid var(--infc-border);
	margin-bottom:18px;
	gap:0;
	overflow-x:auto;
}

.infc-tab {
	background:none;
	border:none;
	border-bottom:2px solid transparent;
	padding:8px 16px;
	font-size:13px;
	font-weight:500;
	color:var(--infc-muted-2);
	cursor:pointer;
	white-space:nowrap;
	margin-bottom:-1px;
	transition:color .15s, border-color .15s;
}

.infc-tab:hover   { color:var(--infc-text); }
.infc-tab.active  { color:var(--infc-accent); border-bottom-color:var(--infc-accent); font-weight:600; }

.infc-tab-panel   { display:none; }
.infc-tab-panel.active { display:block; }

/* ── Two-column subsection grid ─────────────────────────────── */
.infc-2col {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}

.infc-subsection {
	background:rgba(255,255,255,0.03);
	border:1px solid var(--infc-border);
	border-radius:var(--infc-radius-sm);
	padding:16px;
}

.infc-subsection-title {
	font-size:12px;
	font-weight:700;
	color:var(--infc-text-2);
	text-transform:uppercase;
	letter-spacing:.05em;
	margin:0 0 12px;
}

/* ── Score circle ───────────────────────────────────────────── */
.infc-score-circle {
	width:60px;
	height:60px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
	font-weight:800;
	color:#fff;
	flex-shrink:0;
}

/* ── Timeline / Log Items ───────────────────────────────────── */
.infc-log-item {
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:10px 0;
	border-bottom:1px solid rgba(255,255,255,0.04);
}

.infc-log-item:last-child { border-bottom:none; }

.infc-log-dot {
	width:8px;
	height:8px;
	border-radius:50%;
	margin-top:4px;
	flex-shrink:0;
}

.infc-log-dot.green  { background:var(--infc-green); }
.infc-log-dot.blue   { background:var(--infc-accent); }
.infc-log-dot.yellow { background:var(--infc-yellow); }
.infc-log-dot.red    { background:var(--infc-red); }

.infc-log-text { font-size:13px; color:var(--infc-text-2); line-height:1.4; }
.infc-log-time { font-size:11px; color:var(--infc-muted); margin-top:2px; }

/* ── Calendar cards ─────────────────────────────────────────── */
.infc-cal-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:14px;
}

.infc-cal-card {
	background:var(--infc-surface-2);
	border:1px solid var(--infc-border);
	border-radius:var(--infc-radius-sm);
	padding:14px;
	transition:border-color .15s;
}

.infc-cal-card:hover { border-color:var(--infc-border-2); }

.infc-cal-thumb {
	width:100%;
	height:90px;
	object-fit:cover;
	border-radius:6px;
	margin-bottom:10px;
}

.infc-cal-platform {
	font-size:11px;
	font-weight:600;
	margin-bottom:4px;
}

.infc-cal-date {
	font-size:11px;
	color:var(--infc-muted-2);
	margin-bottom:6px;
}

.infc-cal-caption {
	font-size:12px;
	color:var(--infc-text-2);
	line-height:1.4;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}

/* ── Account info rows ──────────────────────────────────────── */
.infc-info-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:10px 0;
	border-bottom:1px solid rgba(255,255,255,0.05);
	gap:12px;
}

.infc-info-row:last-child { border-bottom:none; }
.infc-info-label  { font-size:12px; color:var(--infc-muted-2); font-weight:500; }
.infc-info-value  { font-size:13px; color:var(--infc-text); font-weight:600; text-align:right; }

/* ── Limit bars ─────────────────────────────────────────────── */
.infc-limit-item { margin-bottom:16px; }

.infc-limit-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:12px;
	margin-bottom:5px;
}

.infc-limit-label { color:var(--infc-text-2); font-weight:500; }
.infc-limit-value { color:var(--infc-muted-2); }

/* ── Empty state ────────────────────────────────────────────── */
.infc-empty {
	text-align:center;
	padding:32px 20px;
	color:var(--infc-muted);
	font-size:13px;
	font-style:italic;
}

/* ── Notice ─────────────────────────────────────────────────── */
.infc-notice {
	border-radius:var(--infc-radius-sm);
	padding:12px 16px;
	font-size:13px;
	margin-bottom:14px;
	display:flex;
	align-items:center;
	gap:10px;
}

.infc-notice-info   { background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2); color:#a5b4fc; }
.infc-notice-warn   { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); color:#fcd34d; }
.infc-notice-danger { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.2);  color:#fca5a5; }
.infc-notice-green  { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2); color:#6ee7b7; }

/* ── Mobile bottom nav ──────────────────────────────────────── */
.infc-mobile-nav {
	display:none;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background:rgba(13,15,24,0.97);
	border-top:1px solid var(--infc-border);
	backdrop-filter:blur(20px);
	z-index:200;
	padding:0 8px;
}

.infc-mobile-nav-inner {
	display:flex;
	justify-content:space-around;
	height:var(--infc-nav-h);
}

.infc-mobile-nav-item {
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:3px;
	background:none;
	border:none;
	color:var(--infc-muted);
	cursor:pointer;
	padding:8px 4px;
	font-size:10px;
	font-weight:500;
	transition:color .15s;
}

.infc-mobile-nav-item.active { color:var(--infc-accent); }

.infc-mobile-nav-item svg {
	width:20px;
	height:20px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:768px) {
	.infc-layout {
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr;
	}

	.infc-sidebar { display:none; }
	.infc-mobile-nav { display:flex; }
	.infc-content { padding:20px 16px 80px; }
	.infc-topbar { padding:0 16px; }
	.infc-topbar-name { display:none; }
	.infc-2col { grid-template-columns:1fr; }
	.infc-stat-grid { grid-template-columns:1fr 1fr; }
	.infc-user-role { display:none; }
}

/* ── Analytics page header ──────────────────────────────────────── */
.infc-analytics-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
}

.infc-analytics-header-right {
	display:flex;
	align-items:center;
	gap:10px;
	flex-shrink:0;
}

.infc-sync-time {
	font-size:11px;
	color:var(--infc-muted);
}

.infc-btn-sync {
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 14px;
	background:rgba(99,102,241,.12);
	border:1px solid rgba(99,102,241,.25);
	border-radius:var(--infc-radius-sm);
	color:var(--infc-accent);
	font-size:12px;
	font-weight:600;
	cursor:pointer;
	transition:all .15s;
	white-space:nowrap;
}

.infc-btn-sync:hover:not(:disabled) {
	background:rgba(99,102,241,.2);
	border-color:var(--infc-accent);
}

.infc-btn-sync:disabled { opacity:.5; cursor:default; }

/* ── 6-column stat grid override ─────────────────────────────────── */
.infc-stat-grid-6 {
	grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}

/* ── Muted inline tag ────────────────────────────────────────────── */
.infc-muted-tag {
	font-size:11px;
	color:var(--infc-muted);
}

.infc-muted-note {
	font-size:13px;
	color:var(--infc-muted-2);
	line-height:1.55;
	margin:0;
}

/* ── Position badge ──────────────────────────────────────────────── */
.infc-pos-badge {
	display:inline-block;
	font-size:12px;
	font-weight:600;
	color:var(--infc-muted-2);
}

.infc-pos-badge.green  { color:var(--infc-green); }
.infc-pos-badge.teal   { color:var(--infc-teal); }
.infc-pos-badge.yellow { color:var(--infc-yellow); }
.infc-pos-badge.red    { color:var(--infc-red); }

/* ── Channel list ────────────────────────────────────────────────── */
.infc-channel-list {
	display:flex;
	flex-direction:column;
	gap:10px;
}

.infc-channel-row {
	display:flex;
	flex-direction:column;
	gap:5px;
}

.infc-channel-meta {
	display:flex;
	align-items:center;
	gap:7px;
	font-size:13px;
}

.infc-channel-dot {
	width:8px;
	height:8px;
	border-radius:50%;
	flex-shrink:0;
}

.infc-channel-name {
	flex:1;
	color:var(--infc-text-2);
	font-weight:500;
}

.infc-channel-pct {
	font-size:12px;
	font-weight:600;
	color:var(--infc-text);
	width:36px;
	text-align:right;
}

.infc-channel-val {
	font-size:11px;
	color:var(--infc-muted);
	width:52px;
	text-align:right;
}

/* ── AI referrals totals row ─────────────────────────────────────── */
.infc-ai-totals {
	display:flex;
	gap:20px;
	margin-bottom:4px;
}

.infc-ai-total-item { text-align:left; }

.infc-ai-total-val {
	font-size:28px;
	font-weight:800;
	color:var(--infc-accent);
	line-height:1.1;
}

.infc-ai-total-val.purple { color:#a78bfa; }

.infc-ai-total-lbl {
	font-size:11px;
	font-weight:500;
	color:var(--infc-muted-2);
	margin-top:3px;
	text-transform:uppercase;
	letter-spacing:.04em;
}

/* ── Page cell in tables ─────────────────────────────────────────── */
.infc-page-cell { max-width:260px; }

.infc-page-title-text {
	font-weight:500;
	color:var(--infc-text-2);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:240px;
}

.infc-page-url {
	font-size:11px;
	color:var(--infc-muted);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:240px;
	margin-top:2px;
}

/* ── Analytics 2-col (channels + AI) ─────────────────────────────── */
.infc-analytics-2col {
	margin-bottom:0;
}

.infc-analytics-2col > .infc-card {
	margin-bottom:0;
}

/* ── Spin animation for sync button ─────────────────────────────── */
@keyframes infc-spin {
	to { transform:rotate(360deg); }
}

@media (max-width:768px) {
	.infc-analytics-header { flex-direction:column; align-items:flex-start; }
	.infc-analytics-2col { grid-template-columns:1fr; }
}

@media (max-width:480px) {
	.infc-stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
	.infc-stat-grid-6 { grid-template-columns:1fr 1fr; }
	.infc-cal-grid  { grid-template-columns:1fr; }
}