/* TailAdmin-Inspired Dashboard Styles */
/* Extracted from stats/index.html for better organization */

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sidebar-item:hover {
    background-color: rgba(102, 217, 239, 0.1);
    border-left: 3px solid #66D9EF;
}

.sidebar-item.active {
    background-color: rgba(102, 217, 239, 0.15);
    border-left: 3px solid #66D9EF;
    color: #66D9EF;
}

.stat-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.chart-container {
    background: #2D2D30;
    border-radius: 12px;
    padding: 1.5rem;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    background: url('../../assets/images/cd-spinner.png') center/contain no-repeat;
    animation: spin 2s linear infinite;
}

/* Leaflet map dark theme customization */
.leaflet-popup-content-wrapper {
    background: #2D2D30 !important;
    color: #CCCCCC !important;
    border-radius: 8px !important;
}

.leaflet-popup-tip {
    background: #2D2D30 !important;
}

.leaflet-control-attribution {
    background: rgba(45, 45, 48, 0.8) !important;
    color: #858585 !important;
}

.leaflet-control-zoom a {
    background: #2D2D30 !important;
    color: #CCCCCC !important;
    border: 1px solid #4A4A4F !important;
}

.leaflet-control-zoom a:hover {
    background: #3E3E42 !important;
    color: #66D9EF !important;
}

/* Layout utilities */
.header-height {
    height: 73px;
}

.table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}

.table-scroll-container table {
    min-width: 1200px;
}

.table-scroll-container-tall {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
}

.table-scroll-container-tall table {
    min-width: 1200px;
}

/* Blog post content styling */
.blog-post-content img,
.blog-comment-content img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    margin: 1rem auto;
    display: block;
    border-radius: 8px;
}

.blog-post-content p,
.blog-comment-content p {
    margin-bottom: 1.5em;
    line-height: 1.7;
}

.blog-post-content p:last-child,
.blog-comment-content p:last-child {
    margin-bottom: 0;
}

.table-fixed-layout {
    table-layout: fixed;
}

.progress-bar-empty {
    width: 0%;
}

/* Map styles */
.map-container-full {
    height: 100%;
    width: 100%;
}

.map-tooltip-text {
    color: #333;
    font-family: Inter, sans-serif;
}

.map-tooltip-country {
    color: #F92672;
}

.map-tooltip-label {
    color: #666;
}

/* Map legend indicators */
.legend-indicator-low {
    color: #A6E22E;
}

.legend-indicator-mid {
    color: #66D9EF;
}

.legend-indicator-high {
    color: #F92672;
}

/* Quill Rich Text Editor - Dark Theme Override */
.ql-toolbar.ql-snow {
    background-color: #3E3E42;
    border-color: #4A4A4F;
    border-radius: 8px 8px 0 0;
}

.ql-container.ql-snow {
    background-color: #2D2D30;
    border-color: #4A4A4F;
    border-radius: 0 0 8px 8px;
    color: #CCCCCC;
    font-family: 'Inter', system-ui, sans-serif;
}

.ql-editor {
    min-height: 280px;
    color: #CCCCCC;
}

.ql-editor.ql-blank::before {
    color: #858585;
    font-style: normal;
}

/* Toolbar button colors */
.ql-snow .ql-stroke {
    stroke: #858585;
}

.ql-snow .ql-fill {
    fill: #858585;
}

.ql-snow .ql-picker {
    color: #858585;
}

.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active,
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
    color: #66D9EF;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: #66D9EF;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: #66D9EF;
}

/* Dropdown menus */
.ql-snow .ql-picker-options {
    background-color: #3E3E42;
    border-color: #4A4A4F;
}

.ql-snow .ql-tooltip {
    background-color: #3E3E42;
    border-color: #4A4A4F;
    color: #CCCCCC;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ql-snow .ql-tooltip input[type="text"] {
    background-color: #2D2D30;
    border-color: #4A4A4F;
    color: #CCCCCC;
}

.ql-snow .ql-tooltip a.ql-action::after,
.ql-snow .ql-tooltip a.ql-remove::before {
    color: #66D9EF;
}

/* Code blocks */
.ql-snow .ql-editor pre.ql-syntax {
    background-color: #1E1E1E;
    color: #A6E22E;
    border-radius: 4px;
}

/* Links */
.ql-snow .ql-editor a {
    color: #66D9EF;
}

/* Blockquotes */
.ql-snow .ql-editor blockquote {
    border-left-color: #AE81FF;
    color: #858585;
}