/* CrowdSec Dashboard - Base Theme Variables */
/* Shared foundation for all themes */

:root {
	/* Base colors - can be overridden by theme */
	--cs-bg-primary: #0d1117;
	--cs-bg-secondary: #161b22;
	--cs-bg-tertiary: #21262d;
	--cs-border: #30363d;
	--cs-text: #c9d1d9;
	--cs-text-muted: #8b949e;
	--cs-text-heading: #ffffff;

	/* Accent colors */
	--cs-accent: #58a6ff;
	--cs-success: #3fb950;
	--cs-warning: #d29922;
	--cs-danger: #f85149;
	--cs-info: #79c0ff;

	/* Spacing */
	--cs-space-xs: 4px;
	--cs-space-sm: 8px;
	--cs-space-md: 16px;
	--cs-space-lg: 24px;
	--cs-space-xl: 32px;

	/* Border radius */
	--cs-radius-sm: 4px;
	--cs-radius-md: 6px;
	--cs-radius-lg: 8px;
	--cs-radius-xl: 12px;

	/* Typography */
	--cs-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cs-font-mono: 'JetBrains Mono', Consolas, monospace;
	--cs-font-size-xs: 10px;
	--cs-font-size-sm: 12px;
	--cs-font-size-md: 14px;
	--cs-font-size-lg: 16px;
	--cs-font-size-xl: 20px;
	--cs-font-size-2xl: 28px;

	/* Shadows */
	--cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--cs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
	--cs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);

	/* Transitions */
	--cs-transition-fast: 0.15s ease;
	--cs-transition-normal: 0.25s ease;
}

/* Base resets */
.cs-dashboard {
	min-height: 100vh;
	font-family: var(--cs-font-sans);
	color: var(--cs-text);
	background: var(--cs-bg-primary);
}

.cs-dashboard * {
	box-sizing: border-box;
}

/* Hide LuCI sidebar for full-width view */
body.cs-fullwidth #maincontainer > .pull-left,
body.cs-fullwidth #mainmenu { display: none !important; }
body.cs-fullwidth #maincontent { margin: 0 !important; width: 100% !important; }

/* Common utility classes */
.cs-text-muted { color: var(--cs-text-muted); }
.cs-text-success { color: var(--cs-success); }
.cs-text-warning { color: var(--cs-warning); }
.cs-text-danger { color: var(--cs-danger); }
.cs-text-accent { color: var(--cs-accent); }

.cs-mono { font-family: var(--cs-font-mono); }
.cs-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }

/* Loading spinner */
.cs-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--cs-border);
	border-top-color: var(--cs-accent);
	border-radius: 50%;
	animation: cs-spin 0.8s linear infinite;
}

@keyframes cs-spin { to { transform: rotate(360deg); } }

/* Pulse animation */
@keyframes cs-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Toast notifications */
.cs-toast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: var(--cs-bg-secondary);
	border: 1px solid var(--cs-border);
	padding: 12px 20px;
	border-radius: var(--cs-radius-md);
	font-size: var(--cs-font-size-sm);
	z-index: 9999;
	animation: cs-slideIn 0.3s ease;
}

.cs-toast.success { border-left: 3px solid var(--cs-success); }
.cs-toast.error { border-left: 3px solid var(--cs-danger); }
.cs-toast.warning { border-left: 3px solid var(--cs-warning); }

@keyframes cs-slideIn {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}