/**
 * qTap IGcr — Public Styles
 *
 * @package KDC_QTAP_IGCR
 */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Accent — overridden via wp_add_inline_style from network setting */
  --igcr-accent: #3D6792;
  --igcr-accent-hover: #345878;
  --igcr-accent-light: rgba(61,103,146,0.1);
  --igcr-accent-rgb: 61,103,146;

  /* Semantic */
  --igcr-success: #22c55e;
  --igcr-success-hover: #16a34a;
  --igcr-warning: #f59e0b;
  --igcr-danger: #ef4444;
  --igcr-danger-hover: #dc2626;
  --igcr-info: #3b82f6;

  /* Neutrals */
  --igcr-text: #1f2937;
  --igcr-text-secondary: #6b7280;
  --igcr-text-muted: #9ca3af;
  --igcr-border: #e5e7eb;
  --igcr-border-light: #f3f4f6;
  --igcr-bg: #ffffff;
  --igcr-bg-subtle: #f9fafb;
  --igcr-bg-muted: #f3f4f6;

  /* Radius */
  --igcr-radius-sm: 6px;
  --igcr-radius: 8px;
  --igcr-radius-lg: 12px;
  --igcr-radius-full: 9999px;

  /* Shadows */
  --igcr-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --igcr-shadow: 0 4px 12px rgba(0,0,0,0.08);
  --igcr-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* ── Dark Mode Tokens ─────────────────────────────────────────────────── */

[data-igcr-theme="dark"] {
  /* Dark mode palette */
  --igcr-text: #f5f5f5;
  --igcr-text-secondary: #a8a8a8;
  --igcr-text-muted: #737373;
  --igcr-border: #262626;
  --igcr-border-light: #262626;
  --igcr-bg: #000;
  --igcr-bg-subtle: #121212;
  --igcr-bg-muted: #262626;
  --igcr-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --igcr-shadow: 0 4px 12px rgba(0,0,0,0.4);
  --igcr-shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  color-scheme: dark;
}

@media ( prefers-color-scheme: dark ) {
  [data-igcr-theme="system"] {
    /* Dark mode palette */
    --igcr-text: #f5f5f5;
    --igcr-text-secondary: #a8a8a8;
    --igcr-text-muted: #737373;
    --igcr-border: #262626;
    --igcr-border-light: #262626;
    --igcr-bg: #000;
    --igcr-bg-subtle: #121212;
    --igcr-bg-muted: #262626;
    --igcr-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --igcr-shadow: 0 4px 12px rgba(0,0,0,0.4);
    --igcr-shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}

/* Icon base */
.igcr-icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Instagram login button */
.igcr-login-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: opacity 0.2s;
}

.igcr-login-btn:hover,
.igcr-login-btn:focus {
	opacity: 0.85;
	color: #fff;
}

/* Grid — column count driven by --igcr-cols (set via inline style from PHP) */
.igcr-accounts-grid {
	display: grid;
	grid-template-columns: repeat( var( --igcr-cols, 3 ), 1fr );
	gap: 20px;
}

@media ( max-width: 875px ) {
	.igcr-accounts-grid {
		grid-template-columns: repeat( min( var( --igcr-cols, 3 ), 2 ), 1fr );
	}
}

@media ( max-width: 735px ) {
	.igcr-accounts-grid {
		grid-template-columns: 1fr;
	}
}

/* Card */
.igcr-account-card {
	background: var(--igcr-bg, #fff);
	border: 1px solid var(--igcr-border);
	border-radius: var(--igcr-radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: box-shadow 0.15s ease;
}

.igcr-account-card:hover {
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.07 );
}

/* Card top row — avatar + identity */
.igcr-card-top {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

/* Avatar */
.igcr-account-avatar img,
.igcr-avatar-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.igcr-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	font-size: 20px;
	font-weight: 600;
}

/* Identity */
.igcr-account-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.igcr-account-identity {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.igcr-account-username {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Account type badge */
.igcr-account-type {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 2px 7px;
	border-radius: 4px;
	white-space: nowrap;
}

.igcr-type--business {
	background: #e8f4fd;
	color: #1a6fa8;
}

.igcr-type--creator {
	background: #f3eafd;
	color: var(--igcr-accent-hover);
}

/* Bio — clamp to 3 lines */
.igcr-account-bio {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* Stats */
.igcr-account-stats {
	display: flex;
	gap: 24px;
	padding-top: 14px;
	border-top: 1px solid #f0f0f0;
	margin-top: auto;
}

.igcr-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.igcr-stat-value {
	font-weight: 700;
	line-height: 1;
}

.igcr-stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* Actions row */
.igcr-accounts-actions {
	margin-top: 28px;
}

/* Empty state */
.igcr-accounts-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 80px 24px;
	gap: 16px;
}

.igcr-empty-icon {
	width: 48px;
	height: 48px;
	color: #ccc;
}

.igcr-empty-text {
	margin: 0;
}

/* ── Modal System ─────────────────────────────────────────────────────── */

.igcr-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: igcr-modal-fade-in 0.15s ease;
}

.igcr-modal[hidden] {
	display: none;
}

.igcr-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	cursor: pointer;
}

.igcr-modal-box {
	position: relative;
	background: var(--igcr-bg, #fff);
	border-radius: var(--igcr-radius-lg, 12px);
	padding: 28px 28px 22px;
	max-width: 420px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.igcr-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--igcr-border, #e5e7eb);
	position: sticky;
	top: 0;
	background: var(--igcr-bg, #fff);
	z-index: 1;
}

.igcr-modal-header .igcr-modal-title {
	margin: 0;
	font-size: 1em;
	color: var(--igcr-text, #1f2937);
}

.igcr-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--igcr-text-secondary, #6b7280);
	border-radius: 50%;
	transition: background 0.15s;
	flex-shrink: 0;
	font-size: 1.2em;
	line-height: 1;
	padding: 0;
}

.igcr-modal-close:hover {
	background: var(--igcr-bg-muted, #f3f4f6);
	color: var(--igcr-text, #1f2937);
}

.igcr-modal-content {
	padding: 20px;
}

.igcr-modal-title {
	margin: 0 0 10px;
	font-size: 1.1em;
}

.igcr-modal-body {
	font-size: 0.9em;
	color: var(--igcr-text-secondary, #6b7280);
	margin: 0 0 10px;
	line-height: 1.5;
}

.igcr-modal-list {
	margin: 0 0 20px;
	padding-left: 18px;
	font-size: 0.875em;
	color: var(--igcr-text-secondary, #6b7280);
	line-height: 1.7;
}

.igcr-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

@keyframes igcr-modal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}