/* Custom styles to work with Bootstrap 5 Dark Theme */
body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	background-color: #0f172a;
}

/* Custom gauge styles */
.gauge-container {
	position: relative;
}

.gauge {
	width: 100%;
	height: 20px;
	background: linear-gradient(90deg, #1e293b, #334155);
	border: 1px solid #475569;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.gauge .gauge-fill {
	height: 100%;
	width: 0%;
	border-radius: 10px;
	transition: width 0.6s ease-in-out;
}

.gauge .gauge-fill.bg-gradient {
	background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
}

.gauge .gauge-fill.bg-success {
	background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

.gauge .gauge-fill.bg-warning {
	background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}

.gauge-label {
	margin-top: 8px;
}

/* Metric boxes */
.metric-box {
	padding: 12px;
	text-align: center;
}

.metric-box i {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.metric-value {
	font-size: 1.25rem;
	font-weight: 600;
	color: #e2e8f0;
}

.metric-unit {
	font-size: 0.875rem;
	color: #94a3b8;
	margin-top: 4px;
}

/* Progress bar customizations */
.progress {
	background-color: #1e293b;
	border: 1px solid #475569;
}

.progress-bar.bg-gradient {
	background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
}

/* Card customizations for better separation */
.card.border-primary {
	border-color: #3b82f6 !important;
	border-width: 2px;
}

.card.border-success {
	border-color: #22c55e !important;
	border-width: 2px;
}

.card.border-warning {
	border-color: #f59e0b !important;
	border-width: 2px;
}

.card.border-info {
	border-color: #06b6d4 !important;
	border-width: 2px;
}

.card.border-secondary {
	border-color: #6b7280 !important;
	border-width: 2px;
}

/* Status badge positioning */
#status {
	font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .metric-box { padding: 4px; }
    .metric-value { font-size: 0.9rem; }
    .gauge { height: 12px; }
    .gauge-label { font-size: 0.9rem; }
    /* Reduce paddings to fit more on a single screen */
    .card-body { padding: .5rem !important; }
    .card-header { padding: .4rem .5rem !important; }
    .card-header h5 { font-size: 0.95rem; margin-bottom: 0; }
    .row.mb-4 { margin-bottom: 0.75rem !important; }
    .row.mb-3 { margin-bottom: 0.5rem !important; }
    .progress { height: 16px !important; }
    .display-6 { font-size: 1.2rem; }
    .h3 { font-size: 1.1rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
	.navbar {
		position: static;
	}
	
	.container-fluid {
		padding: 8px;
	}
	
	.display-6 {
		font-size: 1.5rem;
	}
}