/* Base styles */
body {
    overflow-x: hidden;
    min-height: 100vh;
}

/* Side menu styles */
.side-menu a {
    font-size: .80rem !important;
}

/* Navigation link styles */
.nav-link {
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffc107 !important;
    text-decoration: none;
}

.hover-effect {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Alert styles */
.alert {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Image styles */
img {
    max-width: 100%;
    height: auto;
}

/* Logo image size */
.logo-img {
    width: 30px; 
    height: 30px;
}

/* Button styles */
.btn-primary {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
}

/* Text styles */
.fw-bold {
    font-weight: bold;
}

/* Comment styles */
.comment-meta {
    font-style: italic !important;
    font-size: 0.785rem;
}

/* Display utilities */
.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

/* Text utilities */
.text-xs {
    font-size: 0.75rem;
}

/* Button size */
.btn-xs {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
}

/* Margins and padding */
.pt-0 {
    padding-top: 0 !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* Shadow utilities */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Border utilities */
.rounded {
    border-radius: 0.375rem !important;
}

/* Image utilities */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Pagination Styles */
.pagination {
    margin-top: 2rem;
}

.pagination .page-link {
    color: #0d6efd;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Dashboard Chart Styles */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin-bottom: 20px;
}

.overall-chart {
    max-width: 500px;
    margin: 0 auto;
    height: 400px;
}

.time-chart-container {
    max-width: 800px;
    margin: 0 auto;
    height: 400px;
    background: white;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Chart title styles */
.chart-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Time range selector style */
#timeRange {
    width: auto;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
}

/* Table layout for dashboard */
.table {
    table-layout: fixed;
    width: 100%;
}

/* Add smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Legend styles */
.case-state-legend {
    margin: 20px auto;
    max-width: 900px;
}

.legend-item {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.legend-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 6px;
}

.legend-label {
    font-weight: 500;
}

.history-container {
    background-color: #f8f9fa; /* Light background for better contrast */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.history-container h4 {
    font-weight: bold;
    color: #333;
}

.case-history-list .card {
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.case-history-list .card-body {
    padding: 10px;
}

.alert-warning {
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
}

/* Timeline styles */
.timeline {
    position: relative;
    margin: 0 0 0 30px;
    padding: 0;
    list-style: none;
    border-left: 3px solid #1976d2;
}
.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -13px;
    top: 0;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #1976d2;
    border-radius: 50%;
    z-index: 1;
}
.timeline-item.active .timeline-dot {
    background: #1976d2;
    border-color: #1976d2;
}
.timeline-content {
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: inline-block;
    min-width: 220px;
}
.timeline-cstate {
    font-weight: bold;
    color: #1976d2;
    text-transform: capitalize;
}
.timeline-date {
    font-size: 0.9em;
    color: #888;
    margin-top: 2px;
}

/* Comment Timeline styles */
.comment-timeline {
    position: relative;
    margin: 0 0 0 30px;
    padding: 0;
    list-style: none;
    border-left: 3px solid #43a047;
}
.comment-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
}
.comment-item:last-child {
    margin-bottom: 0;
}
.comment-dot {
    position: absolute;
    left: -13px;
    top: 0;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #43a047;
    border-radius: 50%;
    z-index: 1;
}
.comment-content {
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: inline-block;
    min-width: 220px;
}
.comment-user {
    font-weight: bold;
    color: #43a047;
}
.comment-date {
    font-size: 0.9em;
    color: #888;
    margin-top: 2px;
}

/* Map responsive styles */
.map-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    width: 100%;
    height: 0;
    overflow: hidden;
}
.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}