/**
 * Utility Classes
 *
 * Common reusable utility classes extracted from inline styles
 * Following Tailwind-like naming conventions with ss_ prefix
 *
 * @package SageScreen
 */

/* === SPACING UTILITIES === */
.ss-mb-1 { margin-bottom: 0.5rem; }
.ss-mb-2 { margin-bottom: 1rem; }
.ss-mb-3 { margin-bottom: 1.5rem; }
.ss-mb-4 { margin-bottom: 2rem; }
.ss-mb-6 { margin-bottom: 3rem; }
.ss-mb-8 { margin-bottom: 4rem; }

.ss-mt-1 { margin-top: 0.5rem; }
.ss-mt-2 { margin-top: 1rem; }
.ss-mt-3 { margin-top: 1.5rem; }
.ss-mt-4 { margin-top: 2rem; }
.ss-mt-6 { margin-top: 3rem; }

.ss-p-4 { padding: 1rem; }
.ss-p-6 { padding: 1.5rem; }
.ss-p-8 { padding: 2rem; }

/* === DISPLAY & FLEX UTILITIES === */
.ss-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ss-flex-col {
	display: flex;
	flex-direction: column;
}

.ss-hidden {
	display: none !important;
}

.ss-hidden.ss-active {
	display: block !important;
}

/* === GRID UTILITIES === */
.ss-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ss-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.ss-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

/* === WIDTH UTILITIES === */
.ss-w-full { width: 100%; }
.ss-w-auto { width: auto; }
.ss-max-w-2xl { max-width: 42rem; }
.ss-max-w-4xl { max-width: 56rem; }
.ss-max-w-6xl { max-width: 72rem; }

/* === POSITIONING UTILITIES === */
.ss-relative { position: relative; }
.ss-absolute { position: absolute; }
.ss-fixed { position: fixed; }

.ss-top-0 { top: 0; }
.ss-right-0 { right: 0; }
.ss-bottom-0 { bottom: 0; }
.ss-left-0 { left: 0; }

/* === Z-INDEX UTILITIES === */
.ss-z-10 { z-index: 10; }
.ss-z-20 { z-index: 20; }
.ss-z-50 { z-index: 50; }
.ss-z-100 { z-index: 100; }
.ss-z-modal { z-index: 100000; }
.ss-z-modal-content { z-index: 100001; }

/* === BACKGROUND UTILITIES === */
.ss-bg-overlay {
	background: rgba(0, 0, 0, 0.5);
}

.ss-bg-white { background-color: #ffffff; }
.ss-bg-gray-50 { background-color: #f9fafb; }
.ss-bg-gray-100 { background-color: #f3f4f6; }

/* === BORDER UTILITIES === */
.ss-rounded { border-radius: 0.375rem; }
.ss-rounded-lg { border-radius: 0.5rem; }
.ss-rounded-xl { border-radius: 0.75rem; }
.ss-rounded-full { border-radius: 9999px; }

.ss-border { border: 1px solid #e5e7eb; }
.ss-border-t { border-top: 1px solid #e5e7eb; }
.ss-border-b { border-bottom: 1px solid #e5e7eb; }

/* === SHADOW UTILITIES === */
.ss-shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ss-shadow {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.ss-shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* === TEXT UTILITIES === */
.ss-text-center { text-align: center; }
.ss-text-right { text-align: right; }
.ss-text-left { text-align: left; }

.ss-font-bold { font-weight: 700; }
.ss-font-semibold { font-weight: 600; }

/* === OVERFLOW UTILITIES === */
.ss-overflow-hidden { overflow: hidden; }
.ss-overflow-auto { overflow: auto; }
.ss-overflow-y-auto { overflow-y: auto; }

/* === TRANSFORM UTILITIES === */
.ss-transform-center {
	transform: translate(-50%, -50%);
}

/* === BLUR UTILITIES === */
.ss-blur-sm { filter: blur(4px); }
.ss-blur { filter: blur(8px); }
.ss-blur-lg { filter: blur(16px); }

/* === OPACITY UTILITIES === */
.ss-opacity-50 { opacity: 0.5; }
.ss-opacity-75 { opacity: 0.75; }
.ss-opacity-90 { opacity: 0.9; }

/* === STATUS BADGES === */
.ss-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 600;
	display: inline-block;
}

.ss-badge-green {
	background-color: #10b981;
	color: #ffffff;
}

.ss-badge-yellow {
	background-color: #f59e0b;
	color: #ffffff;
}

.ss-badge-red {
	background-color: #ef4444;
	color: #ffffff;
}

.ss-badge-blue {
	background-color: #3b82f6;
	color: #ffffff;
}

.ss-badge-gray {
	background-color: #6b7280;
	color: #ffffff;
}

/* === PROGRESS BARS === */
.ss-progress-container {
	width: 100%;
	background-color: #e5e7eb;
	border-radius: 9999px;
	height: 8px;
	overflow: hidden;
}

.ss-progress-bar {
	height: 100%;
	border-radius: 9999px;
	transition: width 0.3s ease;
}

.ss-progress-bar-blue {
	background-color: #3b82f6;
}

.ss-progress-bar-green {
	background-color: #10b981;
}

.ss-progress-bar-yellow {
	background-color: #f59e0b;
}

.ss-progress-bar-red {
	background-color: #ef4444;
}

/* === CARD UTILITIES === */
.ss-card {
	background-color: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	border: 1px solid #e5e7eb;
	padding: 2rem;
}

.ss-card-header {
	padding: 1.5rem;
	border-bottom: 1px solid #e5e7eb;
}

.ss-card-body {
	padding: 1.5rem;
}

.ss-card-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	text-align: right;
}

/* === SECTION UTILITIES === */
.ss-section-spacing {
	margin-bottom: 2rem;
}

.ss-section-spacing-lg {
	margin-bottom: 3rem;
}