/* Define default color scheme */
:root {
    --bg-color: white;
    --text-color: black;
    --table-stripe-odd: rgba(85, 80, 80, 0.5);
    --table-stripe-even: rgba(255, 255, 255, 0.1);
}

/* Define light color scheme */
@media (prefers-color-scheme: light) {
    :root {
        --bg-color: white;
        --text-color: black;
        --table-stripe-odd: rgba(85, 80, 80, 0.5);
        --table-stripe-even: rgba(255, 255, 255, 0.1);
    }
}
/* Define light color scheme */
:root, :root[data-bs-theme="light"] {
    --bg-color: white;
    --text-color: black;
    --table-stripe-odd: rgba(85, 80, 80, 0.5);
    --table-stripe-even: rgba(255, 255, 255, 0.1);
}

/* Define dark color scheme */
:root[data-bs-theme="dark"] {
    --bg-color: black;
    --text-color: white;
    --table-stripe-odd: rgba(85, 80, 80, 0.5);
    --table-stripe-even: rgba(255, 255, 255, 0.1);
}
/* Define dark color scheme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: black;
        --text-color: white;
        --table-stripe-odd: rgba(85, 80, 80, 0.5);
        --table-stripe-even: rgba(255, 255, 255, 0.1);
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

input,
textarea {
    background-color: white;
    color: black;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe-odd);
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--table-stripe-even);
}

@media (min-width: 576px) {
    .w-90 {
        width: 90% !important;
    }
}

@media (min-width: 768px) {
    .w-md-80 {
        width: 80% !important;
    }
}

@media (min-width: 992px) {
    .w-lg-70 {
        width: 70% !important;
    }
}

@media screen and (max-width: 767px) {
    .table-responsive {
        border: none !important;
    }
}

#content {
    border-top: 1px solid black;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1
}
.htmx-request.htmx-indicator {
    opacity: 1
}

.btn {
    border-radius: 1px;
}

.pager li>a,.pager li>span {
    border-radius: 1px;
}


/* Light mode styles (default) */
.badge {
    color: #fff;
}

.badge.bg-primary {
    background-color: #0d6efd;
}

.badge.bg-secondary {
    background-color: #6c757d;
}

.badge.bg-success {
    background-color: #198754;
}

.badge.bg-danger {
    background-color: #dc3545;
}

.badge.bg-warning {
    background-color: #ffc107;
}

.badge.bg-info {
    background-color: #0dcaf0;
}

.badge.bg-light {
    background-color: #f8f9fa;
    color: #000;
}

.badge.bg-dark {
    background-color: #212529;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    .badge {
        color: #000;
    }

    .badge.bg-primary {
        background-color: #375a7f;
    }

    .badge.bg-secondary {
        background-color: #95a5a6;
    }

    .badge.bg-success {
        background-color: #27ae60;
    }

    .badge.bg-danger {
        background-color: #e74c3c;
    }

    .badge.bg-warning {
        background-color: #f39c12;
    }

    .badge.bg-info {
        background-color: #3498db;
    }

    .badge.bg-light {
        background-color: #ecf0f1;
        color: #000;
    }

    .badge.bg-dark {
        background-color: #2c3e50;
    }
}

.location-item {
    border-top: 1px solid #ecf0f1;
    padding-top: 10px;
    margin-top: 10px;
}

.badge-primary-light, a.badge-primary-light {
    background-color: rgba(59, 125, 221, .15);
    color: color-yiq(rgba(59, 125, 221, .15));
    color: #3b7ddd;
}

.badge-success-light, a.badge-success-light {
    background-color: rgba(28, 187, 140, .15);
    color: color-yiq(rgba(28, 187, 140, .15));
    color: #1cbb8c;
}

.badge-danger-light, a.badge-danger-light {
    background-color: rgba(220, 53, 69, .15);
    color: color-yiq(rgba(220, 53, 69, .15));
    color: #dc3545;
}

.dashboard-card {
    box-shadow: 0 0 .875rem 0 rgba(33, 37, 41, .05);
}

.chart {
    margin: auto;
    min-height: 250px;
    position: relative;
    width: 100%;
}

.chart-sm {
    min-height: 250px;
    height: 100%;
}

.chartjs-size-monitor, .chartjs-size-monitor-expand, .chartjs-size-monitor-shrink {
    position: absolute;
    direction: ltr;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
}