@use "../constants" as *;
@use "../components/settings-card" as *;

.cleanup {
	margin-top: 2rem;

	// ── Quota Card ────────────────────────────────────────────────
	.cleanup-quota-card {
		background: $surface-color;
		border-radius: 5px;
		box-shadow: $card-box-shadow;
		padding: 1rem 1.25rem;
		margin-bottom: 0.75rem;
	}

	.cleanup-quota-header {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.cleanup-quota-icon-wrap {
		width: 36px;
		height: 36px;
		min-width: 36px;
		background: $surface-blue-tint;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;

		i {
			font-size: 16px;
			color: $main-theme-color;
		}
	}

	.cleanup-quota-info {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.cleanup-quota-title {
		font-weight: 600;
		font-size: 0.85rem;
		color: $text-body;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.cleanup-quota-size {
		font-size: 0.85rem;
		color: $text-secondary;
	}

	.cleanup-quota-body {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.cleanup-progress {
		background: $surface-subtle;
		border-radius: 999px;
		height: 10px;
		overflow: hidden;
	}

	.cleanup-progress-bar {
		height: 100%;
		border-radius: 999px;
		transition: width 0.4s ease;
		min-width: 2%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 6px;
		font-size: 0;

		&.bg-success {
			background: $success-color-medium;
		}
		&.bg-warning {
			background: $warning-color;
		}
		&.bg-danger {
			background: $danger-color;
		}
	}

	.cleanup-quota-msg {
		font-size: 0.82rem;
		margin: 0;
		font-weight: 500;

		&.quota-ok {
			color: $success-color-strong;
		}
		&.quota-warning {
			color: $warning-color-dark;
		}
		&.quota-danger {
			color: $danger-color-dark;
		}
	}

	// ── Layout ────────────────────────────────────────────────────
	.cleanup-layout {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	// ── Main Card ─────────────────────────────────────────────────
	.cleanup-card {
		background: $surface-color;
		border-radius: 5px;
		box-shadow: $card-box-shadow;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.cleanup-card-header {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid $border-light;
	}

	.cleanup-card-icon-wrap {
		width: 36px;
		height: 36px;
		min-width: 36px;
		background: $surface-blue-tint;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;

		i {
			font-size: 16px;
			color: $main-theme-color;
		}
	}

	.cleanup-card-info {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.cleanup-card-title {
		font-weight: 600;
		font-size: 0.95rem;
		color: $text-heading;
	}

	.cleanup-card-desc {
		font-size: 0.82rem;
		color: $text-secondary;
	}

	.cleanup-card-body {
		padding: 1rem 1.25rem 1.25rem;
		flex: 1;
	}

	.cleanup-card-footer {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.875rem 1.25rem;
		border-top: 1px solid $border-light;
		background: $surface-hover;
		justify-content: space-between;
	}

	// ── Settings-card pattern ─────────────────────────────────────
	@include settings-cards(0.75rem, 0.75rem, 1rem 1.25rem, 0.9rem, 12px, 1.4);

	// ── Form Controls ─────────────────────────────────────────────
	.cleanup-input {
		padding: 0.35rem 0.6rem;
		font-size: 13px;
		line-height: 1.5;
		color: $text-input;
		background: $surface-color;
		border: 1px solid $border-input;
		border-radius: 0.25rem;
		transition:
			border-color 0.15s ease-in-out,
			box-shadow 0.15s ease-in-out;
		width: 80px;

		&:focus {
			border-color: $focus-border;
			outline: 0;
			box-shadow: 0 0 0 0.2rem rgba($main-theme-color, 0.2);
		}

		&[readonly] {
			background: $surface-light;
			color: $text-secondary;
			cursor: not-allowed;
		}
	}

	.cleanup-select {
		padding: 0.35rem 0.6rem;
		font-size: 13px;
		line-height: 1.5;
		color: $text-input;
		background: $surface-color;
		border: 1px solid $border-input;
		border-radius: 0.25rem;
		cursor: pointer;
		width: auto;
		min-width: 140px;
		transition:
			border-color 0.15s ease-in-out,
			box-shadow 0.15s ease-in-out;

		&:focus {
			border-color: $focus-border;
			outline: 0;
			box-shadow: 0 0 0 0.2rem rgba($main-theme-color, 0.2);
		}

		&[readonly] {
			background: $surface-light;
			color: $text-secondary;
			cursor: not-allowed;
			pointer-events: none;
		}

		&:disabled {
			background: $surface-light;
			color: $text-secondary;
			cursor: not-allowed;
			opacity: 0.7;
		}
	}

	.cleanup-input-with-unit {
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}

	.cleanup-input-unit {
		font-size: 12px;
		font-weight: 600;
		color: $text-secondary;
		white-space: nowrap;
	}

	// ── Toggle Switch (iOS style) ──────────────────────────────────
	.toggle-switch {
		display: flex;
		align-items: center;
		cursor: pointer;
		margin: 0;
		position: relative;
		width: 46px;
		height: 26px;

		input[type="checkbox"] {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
		}

		.toggle-slider {
			position: absolute;
			inset: 0;
			background: $toggle-off-bg;
			border-radius: 999px;
			transition: background 0.2s ease;

			&::before {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				left: 3px;
				top: 3px;
				background: $white;
				border-radius: 50%;
				transition: transform 0.2s ease;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			}
		}

		input:checked + .toggle-slider {
			background: $main-theme-color;
		}

		input:checked + .toggle-slider::before {
			transform: translateX(20px);
		}

		input:disabled + .toggle-slider {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	// ── Disable-state button style ─────────────────────────────────
	.btn.disable {
		color: $text-secondary;
		border-color: $border-input;
		background: transparent;

		&:hover {
			color: $danger-color-dark;
			border-color: $danger-color-dark;
			background: $danger-bg-light;
		}
	}

	// ── History Card Specifics ─────────────────────────────────────
	.cleanup-history-body {
		padding: 0;
	}

	.cleanup-history-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 13px;
		color: $text-body;

		thead tr {
			background: $surface-light;
			border-bottom: 2px solid $border-muted;
		}

		thead th {
			padding: 0.7rem 1rem;
			font-weight: 600;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			color: $text-secondary;
			white-space: nowrap;
		}

		tbody tr {
			border-bottom: 1px solid $surface-subtle;
			transition: background 0.1s ease;

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				background: $surface-hover;
			}
		}

		tbody td {
			padding: 0.65rem 1rem;
			vertical-align: middle;
		}
	}

	.cleanup-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		padding: 0.2rem 0.55rem;
		border-radius: 999px;
		font-size: 11px;
		font-weight: 600;
		white-space: nowrap;

		&.cleanup-badge-success {
			background: $success-bg;
			color: $success-color-dark;
		}

		&.cleanup-badge-failed {
			background: $danger-bg;
			color: $danger-color-darker;
		}

		&.cleanup-badge-skipped {
			background: $surface-subtle;
			color: $text-secondary;
		}
	}

	.cleanup-reduction {
		font-size: 12px;
		font-weight: 600;
		color: $success-color-strong;
	}

	.cleanup-history-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2.5rem 1rem;
		text-align: center;
		color: $text-muted;

		i {
			font-size: 2rem;
			margin-bottom: 0.75rem;
		}

		p {
			font-size: 0.875rem;
			margin: 0;
			max-width: 360px;
			line-height: 1.5;
		}
	}
}

// ── Responsive ────────────────────────────────────────────────────
@media (max-width: 768px) {
	.cleanup {
		.settings-cards-grid {
			grid-template-columns: 1fr;
		}

		.cleanup-card-footer {
			flex-wrap: wrap;

			.btn {
				width: 100%;
			}
		}

		.cleanup-history-table {
			font-size: 11px;

			thead th,
			tbody td {
				padding: 0.5rem 0.6rem;
			}
		}
	}
}