/**
 * Components Stylesheet
 * Reusable component styles (buttons, cards, forms, etc.)
 * 
 * @package Higashimatudo_Shika
 */

/* ============================================
   Buttons
   ============================================ */
.button,
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md) var(--spacing-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	color: var(--color-background);
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.button:hover,
button:hover,
input[type='button']:hover,
input[type='submit']:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-background);
}

.button:focus,
button:focus,
input[type='button']:focus,
input[type='submit']:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

.button:disabled,
button:disabled,
input[type='button']:disabled,
input[type='submit']:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Button Variants */
.button-secondary {
	color: var(--color-primary);
	background-color: transparent;
	border-color: var(--color-primary);
}

.button-secondary:hover {
	background-color: var(--color-primary);
	color: var(--color-background);
}

.button-outline {
	color: var(--color-text);
	background-color: transparent;
	border-color: var(--color-border);
}

.button-outline:hover {
	background-color: var(--color-background-alt);
	border-color: var(--color-text);
}

.button-large {
	padding: var(--spacing-lg) var(--spacing-2xl);
	font-size: var(--font-size-lg);
}

.button-small {
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
}

.button-block {
	width: 100%;
}

/* ============================================
   Cards
   ============================================ */
.card {
	background-color: var(--color-background);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card-header {
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border-light);
}

.card-body {
	margin-bottom: var(--spacing-md);
}

.card-footer {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Navigation
   ============================================ */
.navigation {
	list-style: none;
	display: flex;
	gap: var(--spacing-lg);
}

.navigation-item {
	position: relative;
}

.navigation-link {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.navigation-link:hover {
	color: var(--color-primary);
}

.navigation-link.active {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

/* ============================================
   Badges
   ============================================ */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	background-color: var(--color-background-alt);
	border-radius: var(--radius-full);
	color: var(--color-text);
}

.badge-primary {
	background-color: var(--color-primary);
	color: var(--color-background);
}

.badge-success {
	background-color: var(--color-success);
	color: var(--color-background);
}

/* ============================================
   Alerts
   ============================================ */
.alert {
	padding: var(--spacing-md) var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--color-info);
	background-color: rgba(33, 150, 243, 0.1);
	color: var(--color-text);
}

.alert-success {
	border-color: var(--color-success);
	background-color: rgba(76, 175, 80, 0.1);
}

.alert-warning {
	border-color: var(--color-warning);
	background-color: rgba(255, 152, 0, 0.1);
}

.alert-error {
	border-color: var(--color-error);
	background-color: rgba(244, 67, 54, 0.1);
}

/* ============================================
   Forms
   ============================================ */
.form-group {
	margin-bottom: var(--spacing-lg);
}

.form-label {
	display: block;
	margin-bottom: var(--spacing-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
	width: 100%;
	padding: var(--spacing-md);
	font-size: var(--font-size-base);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-textarea {
	resize: vertical;
	min-height: 120px;
}

.form-help {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--color-text-lighter);
}

/* ============================================
   Grid
   ============================================ */
.grid {
	display: grid;
	gap: var(--spacing-lg);
}

.grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ============================================
   Pagination
   ============================================ */
.pagination {
	display: flex;
	gap: var(--spacing-xs);
	justify-content: center;
	list-style: none;
	margin: var(--spacing-2xl) 0;
}

.pagination-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.pagination-link:hover,
.pagination-link.active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-background);
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	list-style: none;
	font-size: var(--font-size-sm);
	color: var(--color-text-lighter);
}

.breadcrumb-item::after {
	content: '/';
	margin-left: var(--spacing-sm);
	color: var(--color-border);
}

.breadcrumb-item:last-child::after {
	content: '';
	margin: 0;
}

.breadcrumb-link {
	color: var(--color-primary);
	text-decoration: none;
}

.breadcrumb-link:hover {
	text-decoration: underline;
}

/* ============================================
   Spinner / Loading
   ============================================ */
.spinner {
	display: inline-flex;
	width: 20px;
	height: 20px;
	border: 3px solid var(--color-border-light);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spinner-spin 1s linear infinite;
}

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