/* TeHyBug Custom Styles */

:root {
    /* Chart Colors */
    --color-temperature: #AA4643;
    --color-humidity: #3b6290;
    --color-pressure: #728a41;
    --color-air-quality: #80699B;
    --color-uv-light: #3D96AE;
    --color-ambient-light: #DB843D;
    --color-voltage: #92A8CD;
    --color-adc: #A47D7C;
    --color-alert: #B5CA92;

    /* UI Colors */
    --color-primary: #3b6290;
    --color-secondary: #728a41;
    --color-success: #B5CA92;
    --color-danger: #AA4643;
    --color-warning: #DB843D;
    --color-info: #3D96AE;
    /*
	--color-logo: #1fa67a;
	--color-logo-hover: #31781f;
    */
    --color-logo: #fff;
    --color-logo-hover: #ffd602;
}

/* Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
}

/* Bug/Button Cards */
.bug-item,
.button-item {
    transition: box-shadow 0.3s ease;
}

.bug-item:hover,
.button-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Data Display Icons */
.data-icon-temperature {
    color: var(--color-temperature);
}

.data-icon-humidity {
    color: var(--color-humidity);
}

.data-icon-pressure {
    color: var(--color-pressure);
}

.data-icon-air-quality {
    color: var(--color-air-quality);
}

.data-icon-uv {
    color: var(--color-uv-light);
}

.data-icon-light {
    color: var(--color-ambient-light);
}

.data-icon-voltage {
    color: var(--color-voltage);
}

.data-icon-alert {
    color: var(--color-alert);
}

/* Data Table Sticky Header */
.table-responsive .sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

/* Button Groups */
.btn-group .btn {
    transition: all 0.2s ease;
}

.btn-group .btn:hover {
    transform: translateY(-1px);
}

/* Modal Improvements */
.modal-content {
    border-radius: 8px;
}

.modal-header {
    border-bottom: 2px solid #e9ecef;
}

/* Form Controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 98, 144, 0.25);
}

/* Alert Styling */
.alert {
    border-radius: 6px;
}

/* Card Headers */
.card-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

/* Popover Custom Styling */
.popover {
    max-width: 400px;
}

.popover-body {
    padding: 1rem;
}

/* Date Selector */
input[type="date"] {
    cursor: pointer;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive Chart */
@media (max-width: 768px) {
    .chart-container {
        height: 300px;
    }
}

/* Data Display Grid */
.data-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

/* Smooth Transitions */
* {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Custom Scrollbar */
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Badge Colors */
.badge-temperature {
    background-color: var(--color-temperature);
}

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

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

/* Utility Classes */
.text-temperature {
    color: var(--color-temperature);
}

.text-humidity {
    color: var(--color-humidity);
}

.text-pressure {
    color: var(--color-pressure);
}

.bg-temperature {
    background-color: var(--color-temperature);
}

.bg-humidity {
    background-color: var(--color-humidity);
}

.bg-pressure {
    background-color: var(--color-pressure);
}

/* Chart Export Button */
.btn-chart-export {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.btn-chart-export:hover {
    opacity: 1;
}

.logo-box svg path {
	fill: var(--color-logo);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.logo-box svg:hover path {
	fill: var(--color-logo-hover) !important;
}

.navbar-brand:hover  {
    color: var(--color-logo-hover) !important;
    transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}