/**
	 * Dark Theme Lottery Lines Viewer CSS Styles
	 * Updated with matching header style from history checker
	 */

	/* Main Container */
	.lotto-lines-viewer {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
		background-color: #1a1a1a;
		color: #e0e0e0;
		border-radius: 8px;
	}

	/* Main title styling to match history checker */
	.lotto-lines-viewer > h2 {
		text-align: center;
		margin-bottom: 30px;
		font-size: 2.2rem;
		font-weight: 700;
		background: linear-gradient(45deg, #ffd700, #ffed4a, #f39c12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}

	/* Login Required Message */
	.lotto-viewer-login-required,
	.lotto-viewer-error {
		background: #2d2d2d;
		border: 2px dashed #555;
		border-radius: 8px;
		padding: 40px;
		text-align: center;
		margin: 20px auto;
		max-width: 500px;
		color: #e0e0e0;
	}

	.lotto-viewer-login-required p,
	.lotto-viewer-error {
		font-size: 18px;
		color: #b0b0b0;
		margin-bottom: 20px;
	}

	.lotto-viewer-login-required .button {
		background-color: #0073aa;
		color: white;
		text-decoration: none;
		padding: 10px 20px;
		border-radius: 4px;
		display: inline-block;
		transition: background-color 0.3s;
	}

	.lotto-viewer-login-required .button:hover {
		background-color: #005a87;
	}

	/* Header Section - Updated to match history checker style */
	.viewer-header {
		background: #1a1a1a;
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		padding: 30px;
		margin-bottom: 30px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	/* Statistics */
	.viewer-stats {
		display: flex;
		gap: 30px;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	.stat-item {
		background: rgba(255, 255, 255, 0.1);
		padding: 10px 20px;
		border-radius: 8px;
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.stat-label {
		font-size: 12px;
		text-transform: uppercase;
		opacity: 0.8;
		margin-right: 8px;
		color: #b0b0b0;
	}

	.stat-value {
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
	}

	/* Game Type Breakdown */
	.game-type-breakdown,
	.range-type-breakdown {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin-top: 15px;
	}

	.game-badge,
	.range-badge {
		background: rgba(255, 255, 255, 0.15);
		padding: 6px 12px;
		border-radius: 20px;
		font-size: 14px;
		font-weight: 500;
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	/* Game Badge Colors - Match game-type-badge styling */
	.game-badge.lotto {
		background: #ffd700;
		color: #1a1a1a;
	}

	.game-badge.daily-lotto {
		background: #ff6b6b;
		color: white;
	}

	.game-badge.powerball {
		background: #4a90e2;
		color: white;
	}

	/* Filters Section */
	.viewer-filters {
		background: #2d2d2d;
		padding: 20px;
		border-radius: 8px;
		margin-bottom: 30px;
		display: flex;
		gap: 20px;
		align-items: center;
		flex-wrap: wrap;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.viewer-filters label {
		font-weight: 500;
		color: #b0b0b0;
	}

	.viewer-filters select {
		padding: 8px 12px;
		border: 1px solid #555;
		border-radius: 4px;
		background: #404040;
		color: #e0e0e0;
		min-width: 150px;
		font-size: 14px;
	}

	.viewer-filters select:focus {
		outline: none;
		border-color: #0073aa;
		box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
	}

	.clear-filters-btn {
		margin-left: auto;
		background: #6c757d;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.3s;
	}

	.clear-filters-btn:hover {
		background: #5a6268;
	}

	/* Pagination Styles */
	.pagination-wrapper {
		background: #2d2d2d;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		padding: 20px;
		margin: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 15px;
	}

	.pagination-top {
		margin-bottom: 30px;
	}

	.pagination-bottom {
		margin-top: 30px;
	}

	.pagination-info {
		color: #b0b0b0;
		font-size: 14px;
		font-weight: 500;
	}

	.pagination-controls {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.pagination-btn {
		background: rgba(255, 255, 255, 0.1);
		color: #e0e0e0;
		border: 1px solid rgba(255, 255, 255, 0.2);
		padding: 8px 12px;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		font-size: 14px;
		font-weight: 500;
		min-width: 40px;
		text-align: center;
	}

	.pagination-btn:hover {
		background: rgba(255, 255, 255, 0.2);
		border-color: rgba(255, 255, 255, 0.3);
		transform: translateY(-1px);
	}

	.pagination-btn:active {
		transform: translateY(0);
	}

	.pagination-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	.pagination-btn:disabled:hover {
		background: rgba(255, 255, 255, 0.1);
		transform: none;
	}

	.current-page {
		background: #0073aa;
		color: white;
		padding: 8px 12px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: bold;
		min-width: 40px;
		text-align: center;
		border: 1px solid #0073aa;
	}

	.pagination-numbers {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.page-number {
		min-width: 35px;
		padding: 6px 8px;
	}

	.page-input-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
		background: rgba(255, 255, 255, 0.05);
		padding: 4px 8px;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.page-input {
		background: #404040;
		color: #e0e0e0;
		border: 1px solid #555;
		border-radius: 3px;
		padding: 4px 8px;
		width: 60px;
		text-align: center;
		font-size: 14px;
	}

	.page-input:focus {
		outline: none;
		border-color: #0073aa;
		box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
	}

	.page-total {
		color: #b0b0b0;
		font-size: 14px;
		white-space: nowrap;
	}

	/* Loading state for pagination */
	.lines-container.loading {
		opacity: 0.5;
		pointer-events: none;
		position: relative;
	}

	.lines-container.loading::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40px;
		height: 40px;
		border: 4px solid rgba(255, 255, 255, 0.1);
		border-top-color: #0073aa;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	/* No Lines Message */
	.no-lines-message {
		text-align: center;
		padding: 60px 20px;
		color: #888;
		background: #2d2d2d;
		border-radius: 8px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.no-lines-message p {
		font-size: 18px;
		margin: 10px 0;
	}

	/* Lines Container */
	.lines-container {
		display: grid;
		gap: 20px;
	}

	/* Line Card */
	.saved-line-card {
		background: #2d2d2d;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		padding: 20px;
		transition: all 0.3s ease;
		animation: slideIn 0.3s ease;
	}

	.saved-line-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
		transform: translateY(-2px);
		border-color: rgba(255, 255, 255, 0.2);
	}

	/* Line Header */
	.line-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.line-info {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-wrap: wrap;
	}

	/* Game Type Badges */
	.game-type-badge {
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
	}

	.game-type-badge.lotto {
		background: #ffd700;
		color: #1a1a1a;
	}

	.game-type-badge.daily-lotto {
		background: #ff6b6b;
		color: white;
	}

	.game-type-badge.powerball {
		background: #4a90e2;
		color: white;
	}

	/* Range Indicators - Updated with your color scheme */
	.range-indicator {
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
	}

	/* INFINITY - Cyan/Bright Blue */
	.range-indicator.range-infinity,
	.range-badge.range-infinity {
		background: linear-gradient(135deg, #00d4ff, #0099ff);
		color: white;
	}

	/* TITAN - Silver/Chrome */
	.range-indicator.range-titan,
	.range-badge.range-titan {
		background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
		color: white;
	}

	/* APEX - Purple/Violet */
	.range-indicator.range-apex,
	.range-badge.range-apex {
		background: linear-gradient(135deg, #da70d6, #9370db);
		color: white;
	}

	/* HYPER - Cyber Red */
	.range-indicator.range-hyper,
	.range-badge.range-hyper {
		background: linear-gradient(135deg, #ff3030, #cc0000);
		color: white;
	}

	.range-indicator.range-classic,
	.range-badge.range-classic {
		background: #6c757d;
		color: white;
	}

	/* Date Badge */
	.date-badge {
		background: rgba(255, 255, 255, 0.1);
		color: #b0b0b0;
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 12px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Action Buttons */
	.line-actions {
		display: flex;
		gap: 5px;
	}

	.action-btn {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.2);
		padding: 6px 10px;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s;
		font-size: 16px;
		color: #e0e0e0;
	}

	.action-btn:hover {
		background: rgba(255, 255, 255, 0.1);
		transform: scale(1.1);
		border-color: rgba(255, 255, 255, 0.3);
	}

	.delete-btn:hover {
		background: rgba(220, 53, 69, 0.2);
		border-color: #dc3545;
	}

	/* Line Numbers - Game-specific colors */
	.line-numbers {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		margin: 20px 0;
	}

	.number-ball {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 14px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: #1a1a1a;
	}

	/* Default ball color (for unknown game types) */
	.saved-line-card .number-ball {
		background: linear-gradient(135deg, #4a90e2, #357abd);
		color: white;
	}

	/* Lotto game balls - Yellow gradient */
	.saved-line-card[data-game-type="Lotto"] .number-ball {
		background: linear-gradient(135deg, #FFD700, #FFA500);
		color: #1a1a1a;
	}

	/* Daily Lotto game balls - Red gradient */
	.saved-line-card[data-game-type="Daily Lotto"] .number-ball {
		background: linear-gradient(135deg, #ff6b6b, #ee4b4b);
		color: white;
	}

	/* PowerBall game balls - Blue gradient */
	.saved-line-card[data-game-type="Powerball"] .number-ball {
		background: linear-gradient(135deg, #4a90e2, #357abd);
		color: white;
	}

	/* Line Meta */
	.line-meta {
		display: flex;
		gap: 20px;
		margin: 15px 0;
		padding: 10px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 4px;
		font-size: 14px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.meta-item {
		color: #b0b0b0;
	}

	/* Notes Section */
	.line-notes {
		margin-top: 15px;
		padding: 15px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 4px;
		min-height: 50px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.note-content {
		color: #e0e0e0;
		line-height: 1.6;
	}

	.no-note {
		color: #888;
		font-style: italic;
	}

	/* Note Edit Form */
	.note-edit-form {
		margin-top: 15px;
		padding: 15px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.note-edit-form textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid #555;
		border-radius: 4px;
		resize: vertical;
		font-family: inherit;
		font-size: 14px;
		background: #404040;
		color: #e0e0e0;
	}

	.note-edit-form textarea:focus {
		outline: none;
		border-color: #0073aa;
		box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
	}

	.note-form-actions {
		display: flex;
		gap: 10px;
		margin-top: 10px;
	}

	.save-note-btn {
		background: #28a745;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.3s;
	}

	.save-note-btn:hover {
		background: #218838;
	}

	.cancel-note-btn {
		background: #6c757d;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.3s;
	}

	.cancel-note-btn:hover {
		background: #5a6268;
	}

	/* Animations */
	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
			transform: scale(1);
		}
		to {
			opacity: 0;
			transform: scale(0.9);
		}
	}

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

	/* Responsive Pagination */
	@media (max-width: 768px) {
		.pagination-wrapper {
			flex-direction: column;
			align-items: stretch;
			text-align: center;
		}

		.pagination-controls {
			justify-content: center;
		}

		.pagination-info {
			text-align: center;
			margin-bottom: 10px;
		}

		.page-input-wrapper {
			flex-direction: column;
			gap: 5px;
			padding: 8px;
		}

		.pagination-numbers .pagination-btn {
			display: none;
		}

		.pagination-numbers .current-page {
			display: inline-block;
		}

		/* Show only first/last/prev/next on mobile */
		.pagination-controls > .pagination-btn:first-child,
		.pagination-controls > .pagination-btn:nth-child(2),
		.pagination-controls > .pagination-btn:nth-last-child(2),
		.pagination-controls > .pagination-btn:last-child {
			display: inline-block;
		}
	}

	@media (max-width: 480px) {
		.pagination-btn {
			padding: 6px 8px;
			font-size: 12px;
			min-width: 35px;
		}

		.page-input {
			width: 50px;
		}
	}

	/* Responsive Design */
	@media (max-width: 768px) {
		.lotto-lines-viewer {
			padding: 10px;
		}

		.viewer-header {
			padding: 20px;
		}

		.lotto-lines-viewer > h2 {
			font-size: 2rem;
		}

		.viewer-stats {
			flex-direction: column;
			gap: 10px;
		}

		.viewer-filters {
			flex-direction: column;
			align-items: stretch;
		}

		.viewer-filters select {
			width: 100%;
		}

		.clear-filters-btn {
			margin-left: 0;
			margin-top: 10px;
		}

		.line-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		.line-actions {
			align-self: flex-end;
		}

		.number-ball {
			width: 35px;
			height: 35px;
			font-size: 12px;
		}

		.line-meta {
			flex-direction: column;
			gap: 8px;
		}
	}

	/* Print Styles */
	@media print {
		.viewer-filters,
		.pagination-wrapper,
		.line-actions,
		.note-edit-form {
			display: none !important;
		}

		.saved-line-card {
			break-inside: avoid;
			page-break-inside: avoid;
		}

		.viewer-header {
			background: none;
			color: black;
			border: 2px solid #333;
		}

		.number-ball {
			background: white;
			color: black;
			border: 2px solid #333;
		}
	}

	/* Loading State */
	.loading-spinner {
		display: inline-block;
		width: 20px;
		height: 20px;
		border: 3px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		border-top-color: white;
		animation: spin 1s ease-in-out infinite;
	}

	/* Success/Error Messages */
	.success-message,
	.error-message {
		padding: 12px 20px;
		border-radius: 4px;
		margin: 10px 0;
		font-weight: 500;
		animation: slideIn 0.3s ease;
	}

	.success-message {
		background: rgba(39, 174, 96, 0.2);
		color: #27ae60;
		border: 1px solid rgba(39, 174, 96, 0.3);
	}

	.error-message {
		background: rgba(220, 53, 69, 0.2);
		color: #dc3545;
		border: 1px solid rgba(220, 53, 69, 0.3);
	}

	/* Tooltips */
	[title] {
		position: relative;
	}

	.action-btn[title]:hover::after {
		content: attr(title);
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: #333;
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		white-space: nowrap;
		margin-bottom: 5px;
		z-index: 1000;
	}

	.saved-line-card[data-game-type="Powerball"] .line-numbers span:last-child {
		background: #022246!important;
	}