/* assets/css/pages.css — Style Spesifik Per Halaman */
/* Diisi bertahap sesuai fase implementasi */

/* =============================================================================
   LOGIN PAGE (F1)
   ============================================================================= */

.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		145deg,
		rgba(70, 44, 39, 0.9) 0%,
		var(--color-primary-dark) 42%,
		var(--color-primary) 100%
	);
	padding: var(--sp-md);
}

.login-wrapper {
	width: 100%;
	max-width: 420px;
}

.login-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-2xl) var(--sp-xl);
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
}

/* Brand / header */
.login-brand {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-xs);
}

.login-brand__icon {
	font-size: 48px;
	line-height: 1;
	margin-bottom: var(--sp-xs);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.login-brand__title {
	font-size: var(--font-size-xl);
	font-weight: 800;
	color: var(--color-primary-dark);
	letter-spacing: -0.01em;
}

.login-brand__subtitle {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* Submit button full-width */
.btn-login {
	width: 100%;
	padding: 11px;
	font-size: var(--font-size-base);
	font-weight: 700;
	margin-top: var(--sp-sm);
	letter-spacing: 0.02em;
}

/* Global login error */
.login-error[hidden] {
	display: none;
}

.login-error {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
	background: #fff2f5;
	color: #b4234f;
	border: 1px solid #f1b5c7;
	border-radius: var(--radius-md);
	padding: var(--sp-sm) var(--sp-md);
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.login-error::before {
	content: "⚠️";
	flex-shrink: 0;
}

/* Password field with toggle button */
.password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.password-wrapper .form-input {
	padding-right: 40px;
}

.btn-toggle-pw {
	position: absolute;
	right: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 4px;
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}
.btn-toggle-pw:hover {
	color: var(--color-text);
}

/* Hint box */
.login-hint {
	display: flex;
	gap: var(--sp-sm);
	align-items: flex-start;
	background: linear-gradient(
		135deg,
		rgba(248, 226, 234, 0.72),
		rgba(243, 230, 211, 0.7)
	);
	border: 1px solid rgba(184, 95, 127, 0.18);
	border-radius: var(--radius-md);
	padding: var(--sp-sm) var(--sp-md);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
}

.login-hint__icon {
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.login-hint code {
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--radius-sm);
	padding: 1px 5px;
	font-family: "Consolas", monospace;
	font-size: 12px;
	color: var(--color-primary-dark);
}

@media (max-width: 480px) {
	.login-card {
		padding: var(--sp-xl) var(--sp-md);
	}
}

/* =============================================================================
   DASHBOARD PAGE (F4)
   ============================================================================= */

/* Stat cards grid */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-md);
	margin-bottom: var(--sp-xl);
}

.stat-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	padding: var(--sp-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-xs);
	transition:
		box-shadow var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}
.stat-card:hover {
	box-shadow: var(--shadow-md);
	border-color: rgba(184, 95, 127, 0.24);
	transform: translateY(-2px);
}

.stat-card__icon {
	font-size: 26px;
	line-height: 1;
	margin-bottom: var(--sp-xs);
}

.stat-card__value {
	font-size: var(--font-size-2xl);
	font-weight: 800;
	color: var(--color-text);
	line-height: 1.1;
	display: flex;
	align-items: baseline;
	gap: var(--sp-xs);
}

.stat-card__pct {
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-text-muted);
}

.stat-card__label {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.stat-card--success .stat-card__value {
	color: var(--color-success);
}
.stat-card--warning .stat-card__value {
	color: var(--color-warning);
}
.stat-card--info .stat-card__value {
	color: var(--color-info);
}

/* Dashboard sections */
.dashboard-section {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	background-image: linear-gradient(
		180deg,
		rgba(248, 226, 234, 0.35),
		rgba(255, 253, 251, 0) 84px
	);
	padding: var(--sp-lg);
	margin-bottom: var(--sp-xl);
}

.dashboard-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-md);
	gap: var(--sp-sm);
}

.dashboard-section__title {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--color-primary-dark);
}

.dashboard-section__badge {
	background: linear-gradient(
		135deg,
		var(--color-primary-dark),
		var(--color-primary)
	);
	color: #fff;
	border-radius: 99px;
	padding: 2px 10px;
	font-size: var(--font-size-sm);
	font-weight: 600;
}

/* Souvenir rows */
.souvenir-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.souvenir-row {
	display: grid;
	grid-template-columns: 1fr auto 160px;
	align-items: center;
	gap: var(--sp-md);
	padding: var(--sp-sm) 0;
	border-bottom: 1px solid var(--color-border);
}
.souvenir-row:last-child {
	border-bottom: none;
}
.souvenir-row--low {
	background: #fff3f6;
	border-radius: var(--radius-sm);
	padding: var(--sp-sm) var(--sp-sm);
	border: 1px solid #f5c2d1;
	border-radius: var(--radius-md);
}

.souvenir-row__info {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	flex-wrap: wrap;
}

.souvenir-row__name {
	font-weight: 600;
	color: var(--color-text);
}

.souvenir-row__cat {
	font-size: var(--font-size-sm);
}

.souvenir-row__stats {
	text-align: right;
	font-size: var(--font-size-sm);
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.souvenir-row__count {
	font-weight: 600;
	color: var(--color-text);
}

.souvenir-row__bar-wrap {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
}

.souvenir-row__pct {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
	min-width: 34px;
	text-align: right;
}

/* Progress bar variants */
.progress-bar--danger {
	background: var(--color-danger) !important;
}

/* Responsive stat grid */
@media (max-width: 900px) {
	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.stat-grid {
		grid-template-columns: 1fr;
	}
	.souvenir-row {
		grid-template-columns: 1fr;
	}
	.souvenir-row__stats {
		text-align: left;
	}
}

/* =============================================================================
   CHECK-IN PAGE (F5)
   ============================================================================= */

/* Search area */
.checkin-search-wrap {
	margin-bottom: var(--sp-xl);
}

.checkin-search-hint {
	font-size: var(--font-size-sm);
	margin-top: var(--sp-xs);
	padding-left: 2px;
}

/* Results container */
.checkin-results {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

/* Guest card */
.guest-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--sp-md) var(--sp-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-md);
	transition: box-shadow var(--transition-fast);
}
.guest-card:hover {
	box-shadow: var(--shadow-md);
	border-color: rgba(184, 95, 127, 0.2);
}
.guest-card--attended {
	background: #f6fff6;
	border-color: #a5d6a7;
	opacity: 0.85;
}

.guest-card__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.guest-card__name {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.guest-card__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	flex-wrap: wrap;
	font-size: var(--font-size-sm);
}

.guest-card__status {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	flex-wrap: wrap;
	font-size: var(--font-size-sm);
}

.guest-card__time {
	font-size: var(--font-size-sm);
}

.guest-card__action {
	flex-shrink: 0;
}

/* Check-in modal info grid */
.checkin-info-grid {
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-md);
}

.checkin-info-row {
	display: flex;
	gap: var(--sp-md);
	align-items: baseline;
}

.checkin-info-label {
	width: 170px;
	flex-shrink: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.checkin-info-value {
	font-weight: 600;
	color: var(--color-text);
	flex: 1;
}

/* Checkbox label */
.checkin-checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	cursor: pointer;
	font-size: var(--font-size-base);
}
.checkin-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--color-primary);
}

/* Responsive */
@media (max-width: 600px) {
	.guest-card {
		flex-direction: column;
		align-items: flex-start;
	}
	.guest-card__action {
		width: 100%;
	}
	.guest-card__action .btn {
		width: 100%;
		justify-content: center;
	}
	.checkin-info-label {
		width: 130px;
	}
}

/* =============================================================================
   GUESTS PAGE (F6)
   ============================================================================= */

/* Toolbar: filter row + add button */
.guests-toolbar {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	flex-wrap: wrap;
	margin-bottom: var(--sp-md);
}

.guests-toolbar__filters {
	display: flex;
	gap: var(--sp-sm);
	flex-wrap: wrap;
	flex: 1;
	min-width: 0;
}

.guests-filter-select {
	width: 170px;
	flex-shrink: 0;
}

.guests-search-box {
	flex: 1;
	min-width: 160px;
}

/* Meta row (count label) */
.guests-meta {
	display: flex;
	align-items: center;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-sm);
}

/* Table: name cell */
.guests-name-cell {
	font-weight: 600;
	color: var(--color-text);
}

/* Action buttons (edit + delete) side by side */
.guests-action-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-xs);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.guests-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.guests-toolbar__filters {
		flex-direction: column;
	}
	.guests-filter-select,
	.guests-search-box {
		width: 100%;
	}
	#btn-add-guest {
		width: 100%;
		justify-content: center;
	}
}

/* =============================================================================
   CATEGORIES PAGE (F7)
   ============================================================================= */

/* Two-panel layout */
.cat-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: var(--sp-xl);
	align-items: start;
}

@media (max-width: 900px) {
	.cat-layout {
		grid-template-columns: 1fr;
	}
}

/* Panel card */
.cat-panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.cat-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-sm);
	padding: var(--sp-md) var(--sp-lg);
	border-bottom: 1px solid var(--color-border);
	background: linear-gradient(
		180deg,
		rgba(248, 226, 234, 0.6),
		rgba(255, 253, 251, 0)
	);
	flex-wrap: wrap;
}

.cat-panel__title {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--color-primary-dark);
}

.cat-panel__header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	flex-wrap: wrap;
}

/* Category list */
.cat-list {
	padding: var(--sp-sm) 0;
}

.cat-item {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	padding: var(--sp-md) var(--sp-lg);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--transition-fast);
}
.cat-item:last-child {
	border-bottom: none;
}
.cat-item:hover {
	background: rgba(217, 154, 176, 0.12);
}

.cat-item__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cat-item__name {
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cat-item__desc,
.cat-item__count {
	font-size: var(--font-size-sm);
}

.cat-item__actions {
	display: flex;
	gap: var(--sp-xs);
	flex-shrink: 0;
}

/* Souvenir grid (cards) */
.souvenirs-grid {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	padding: var(--sp-md) var(--sp-lg);
}

.sv-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-md);
	background: var(--color-surface);
	transition: box-shadow var(--transition-fast);
}
.sv-card:hover {
	box-shadow: var(--shadow-md);
}
.sv-card--low {
	border-color: #f1bfd0;
	background: #fff4f7;
}

.sv-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-sm);
}

.sv-card__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sv-card__name {
	font-weight: 700;
	color: var(--color-text);
}

.sv-card__cat {
	font-size: var(--font-size-sm);
}

.sv-card__actions {
	display: flex;
	gap: var(--sp-xs);
	flex-shrink: 0;
}

.sv-card__stats {
	display: flex;
	gap: var(--sp-lg);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-sm);
	flex-wrap: wrap;
	gap: var(--sp-md);
}

.sv-card__bar-wrap {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-xs);
}

.sv-card__pct {
	font-size: var(--font-size-sm);
	white-space: nowrap;
	min-width: 34px;
	text-align: right;
}

.sv-card__warning {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	margin-top: var(--sp-sm);
	flex-wrap: wrap;
}

/* =============================================================================
   REPORTS & ACTIVITY LOG PAGE (F8)
   ============================================================================= */

/* ---- Reports toolbar ---- */
.report-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-md);
	flex-wrap: wrap;
	margin-bottom: var(--sp-md);
}

.report-toolbar__right {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	flex-wrap: wrap;
}

/* ---- Tabs ---- */
.report-tabs {
	display: flex;
	gap: var(--sp-xs);
	flex-wrap: wrap;
}

.report-tab {
	padding: 8px var(--sp-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast);
}
.report-tab:hover {
	background: var(--color-primary-soft);
	color: var(--color-primary);
}
.report-tab--active {
	background: linear-gradient(
		135deg,
		var(--color-primary-dark),
		var(--color-primary)
	);
	color: #fff;
	border-color: var(--color-primary);
}

/* Meta row */
.report-meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-sm);
}

/* Name cell */
.report-name-cell {
	font-weight: 600;
}

/* Low-stock row highlight */
.report-row--low td {
	background: #fff1f5;
}

/* ---- Activity log toolbar ---- */
.log-toolbar {
	display: flex;
	align-items: center;
	margin-bottom: var(--sp-sm);
}

.log-name-cell {
	font-weight: 600;
}

/* ---- Pagination ---- */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-xs);
	flex-wrap: wrap;
	margin-top: var(--sp-lg);
}

.pagination__btn {
	min-width: 36px;
	height: 36px;
	padding: 0 var(--sp-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
}
.pagination__btn:hover:not(:disabled) {
	background: var(--color-primary-soft);
	color: var(--color-primary);
	border-color: var(--color-primary-light);
}
.pagination__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.pagination__btn--active {
	background: linear-gradient(
		135deg,
		var(--color-primary-dark),
		var(--color-primary)
	);
	color: #fff;
	border-color: var(--color-primary);
	font-weight: 700;
}

.pagination__ellipsis {
	color: var(--color-text-muted);
	padding: 0 var(--sp-xs);
	line-height: 36px;
}

@media (max-width: 600px) {
	.report-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.report-tabs,
	.report-toolbar__right {
		width: 100%;
	}
	.report-tab {
		flex: 1;
		text-align: center;
	}
	#btn-export-csv {
		width: 100%;
		justify-content: center;
	}
}