/* ============================================
   CMMS Pro - Professional Report Builder
   Power BI Style Analytics Dashboard
   Version: 2.0 - Professional Edition
   ============================================ */

/* Variables */
:root {
    --primary-color: #244855;
    --primary-dark: #1a3640;
    --accent-color: #f0b05d;
    --accent-dark: #e09d3e;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
}

/* Dashboard Container */
.report-builder {
    padding: 1rem 1rem 1.5rem 1rem;   /* was 1.5rem all around — narrower L/R */
    background: var(--gray-100);
    min-height: calc(100vh - 200px);
}

/* ============================================
   HEADER SECTION
   ============================================ */
.report-builder-header {
    background: white;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.report-builder-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 0.25rem 0;
}

.report-builder-header p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.875rem;
}

/* ============================================
   TOOLBAR (Power BI Style Ribbon)
   ============================================ */
.report-toolbar {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.toolbar-section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.toolbar-section:last-child {
    border-bottom: none;
}

.toolbar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toolbar-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--gray-700);
}

.toolbar-btn:hover {
    background: var(--gray-100);
    border-color: var(--accent-color);
}

.toolbar-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.toolbar-btn.primary:hover {
    background: var(--primary-dark);
}

.toolbar-btn.accent {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.toolbar-btn.accent:hover {
    background: var(--accent-dark);
}

/* ============================================
   DATA SOURCE PANEL (Left Sidebar)
   ============================================ */
.data-source-panel {
    position: fixed;
    left: -320px;
    top: 0;
    width: 320px;
    height: 100vh;
    background: white;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.data-source-panel.open {
    left: 0;
}

.data-source-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.data-source-overlay.active {
    display: block;
}

.data-source-header {
    padding: 1rem 1.5rem;
    background: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-source-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.data-source-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
}

.data-source-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.data-source-tab {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: all 0.2s;
}

.data-source-tab.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    background: white;
}

.data-source-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.data-table-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.data-table-item {
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.data-table-header {
    padding: 0.75rem;
    background: var(--gray-100);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-table-fields {
    padding: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

.data-field {
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    cursor: grab;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.data-field:hover {
    border-color: var(--accent-color);
    background: var(--gray-100);
    cursor: grab;
}

.data-field:active {
    cursor: grabbing;
}

.field-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 3px;
}

.field-icon.text { background: var(--info); color: white; }
.field-icon.number { background: var(--success); color: white; }
.field-icon.date { background: var(--warning); color: var(--gray-900); }
.field-icon.category { background: var(--accent-color); color: white; }

/* ============================================
   CANVAS AREA (Dashboard Builder)
   ============================================ */
.dashboard-canvas {
    background: var(--gray-100);
    border-radius: 8px;
    min-height: 600px;
}

.canvas-header {
    background: white;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.canvas-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.canvas-actions {
    display: flex;
    gap: 0.5rem;
}

.canvas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

/* Disable the native CSS grid once GridStack takes over — it was forcing
   450px-wide columns and creating huge gaps around smaller tile cards */
#canvasGrid.grid-stack {
    display: block !important;
}

.visual-widget {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: visible;   /* was: hidden — clipped the chart canvas whenever
                             .widget-body grew wider than this outer box
                             during a jQuery UI width-resize, producing the
                             "cropped" look instead of an actual resize */
    transition: all 0.2s;
    position: relative;
}

.visual-widget:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.visual-widget.selected {
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

.widget-header {
    padding: 0.75rem 1rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.widget-actions {
    display: flex;
    gap: 0.5rem;
}

.widget-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 3px;
    color: var(--gray-600);
    font-size: 0.75rem;
}

.widget-action-btn:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

.widget-body {
    padding: 1rem;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-body canvas {
    max-height: 250px;
    width: 100%;
}

.widget-empty {
    text-align: center;
    color: var(--gray-500);
    font-size: 0.8rem;
}

/* ============================================
   VISUAL CONFIGURATION PANEL (Right Sidebar)
   ============================================ */
.visual-config-panel {
    position: fixed;
    right: -380px;
    top: 0;
    width: 380px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.visual-config-panel.open {
    right: 0;
}

.config-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.config-overlay.active {
    display: block;
}

.config-header {
    padding: 1rem 1.5rem;
    background: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.config-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.config-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
}

.config-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.config-section {
    margin-bottom: 1.5rem;
}

.config-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.config-field {
    margin-bottom: 1rem;
}

.config-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.config-field select,
.config-field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.8rem;
}

.config-field select:focus,
.config-field input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.chart-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.chart-type-option {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.chart-type-option:hover {
    border-color: var(--accent-color);
}

.chart-type-option.selected {
    border-color: var(--accent-color);
    background: rgba(240, 176, 93, 0.1);
}

.chart-type-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.chart-type-name {
    font-size: 0.7rem;
    color: var(--gray-600);
}

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group {
    min-width: 150px;
}

.filter-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.8rem;
}

.apply-filters-btn {
    padding: 0.5rem 1.5rem;
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    cursor: pointer;
}

/* ============================================
   DASHBOARD SELECTOR
   ============================================ */
.dashboard-selector {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    padding: 0.75rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dashboard-tab {
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.dashboard-tab:hover {
    border-color: var(--accent-color);
}

.dashboard-tab.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.add-dashboard-btn {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 1rem 1.5rem;
    background: var(--primary-color);
    color: white;
}

.modal-header h3 {
    margin: 0;
    font-size: 1rem;
}

.modal-body {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.modal-body input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.9rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .canvas-grid {
        grid-template-columns: 1fr;
    }
    
    .data-source-panel,
    .visual-config-panel {
        width: 100%;
        left: -100%;
        right: auto;
    }
    
    .visual-config-panel.open {
        left: 0;
        right: auto;
    }
    
    .toolbar-section {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
}

/* Field Chips */
.field-chip {
    animation: chipFadeIn 0.2s ease-out;
    transition: all 0.2s;
}

.field-chip:hover {
    background: #dee2e6 !important;
    transform: translateY(-1px);
}

/* Color Palette Button Preview */
#colorPaletteBtn > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes chipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Make fields clickable */
.data-field {
    cursor: pointer !important;
}

.data-field:hover {
    background: #e9ecef;
    border-color: var(--accent-color);
    transform: translateX(3px);
}

.data-field span:last-child {
    transition: transform 0.2s;
    opacity: 0;
}

.data-field:hover span:last-child {
    opacity: 1;
    transform: scale(1.1);
}

/* Chart Type Items */
.chart-type-item {
    cursor: pointer !important;
}

.chart-type-item:hover {
    background: #e9ecef;
    border-color: var(--accent-color);
    transform: translateX(3px);
}

.chart-type-item:hover span:last-child {
    opacity: 1;
    transform: scale(1.1);
}

/* Visual chips styling */
.field-chip {
    animation: chipFadeIn 0.2s ease-out;
    transition: all 0.2s;
}

.field-chip:hover {
    background: #dee2e6 !important;
    transform: translateY(-1px);
}

/* Color Palette Dropdown Styles */
#colorPaletteContainer {
    position: relative;
    display: inline-flex;
}

#colorPaletteBtn {
    background: white;
    border: 1px solid var(--gray-300);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

#colorPaletteBtn:hover {
    background: var(--gray-100);
    border-color: var(--accent-color);
}

/* Fix dropdown positioning */
.color-palette-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 280px;
    max-width: 320px;
    padding: 8px;
    max-height: 350px;
    overflow-y: auto;
}

/* Make sure the toolbar doesn't clip the dropdown */
.report-toolbar {
    overflow: visible !important;
}

.toolbar-section {
    overflow: visible !important;
    position: relative;
}

.color-palette-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.color-palette-option:hover {
    background: var(--gray-100);
}

.color-palette-option.selected {
    background: rgba(240, 176, 93, 0.2);
    border-left: 3px solid var(--accent-color);
}

.color-palette-preview {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    width: 120px;
}

.color-box {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

.color-palette-name {
    font-size: 0.8rem;
    color: var(--gray-700);
    flex: 1;
}

.color-palette-check {
    color: var(--success);
    font-size: 1rem;
    font-weight: bold;
}

/* Filter Modal Styling */
.filter-section {
    transition: all 0.2s ease;
}

.filter-section:hover {
    background: var(--gray-50);
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 8px;
}

.filter-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

/* Custom checkbox styling */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

/* Modal animation */
.modal-overlay.active .modal {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Equations Modal Styling */
.equation-field-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.equation-field-tag:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-1px);
}

.equation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin: 8px 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s;
}

.equation-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.equation-info {
    flex: 1;
}

.equation-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-800);
}

.equation-formula {
    font-size: 0.7rem;
    color: var(--gray-500);
    font-family: monospace;
    margin-top: 4px;
}

.equation-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-left: 1rem;
}

.equation-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

.equation-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--gray-600);
    transition: all 0.2s;
}

.equation-delete:hover {
    background: var(--danger);
    color: white;
}

#savedEquationsList {
    min-height: 100px;
}

/* Formula Builder Chips */
.formula-container {
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    min-height: 100px;
    padding: 0.5rem;
    cursor: text;
    font-family: monospace;
    font-size: 0.8rem;
    overflow-y: auto;
    max-height: 150px;
}

.formula-container:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

.formula-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.formula-chip:hover {
    background: var(--accent-color);
    transform: translateY(-1px);
}

.formula-chip-remove {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    margin-left: 4px;
    opacity: 0.7;
}

.formula-chip-remove:hover {
    opacity: 1;
}

.formula-text {
    display: inline;
    font-family: monospace;
    font-size: 0.8rem;
}

.formula-equals {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 8px;
}

.formula-variable-name {
    display: inline-block;
    background: var(--gray-200);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 8px;
}

/* Equation Add to Field Button */
.equation-add-field {
    transition: all 0.2s;
}

.equation-add-field:hover {
    transform: translateY(-1px);
}

/* Saved Canvases Styling */
.saved-canvas-card {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

.saved-canvas-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}

.saved-canvas-header {
    padding: 1rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saved-canvas-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-800);
}

.saved-canvas-date {
    font-size: 0.7rem;
    color: var(--gray-500);
}

.saved-canvas-body {
    padding: 0.75rem 1rem;
}

.saved-canvas-description {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.saved-canvas-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--gray-500);
}

.saved-canvas-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.saved-canvas-load {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.saved-canvas-load:hover {
    background: var(--accent-color);
    color: white;
}

.saved-canvas-delete {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.saved-canvas-delete:hover {
    background: var(--danger);
    color: white;
}

/* GridStack Layout Styles */
.grid-stack {
    background: var(--gray-100);
    min-height: 600px;
}

.grid-stack-item {
    list-style: none;
}

.grid-stack-item-content {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

.grid-stack-item-content .visual-widget {
    height: 100%;
    width: 100%;
    border: none;
    display: flex;
    flex-direction: column;
}

.grid-stack-item-content .widget-body canvas {
    max-height: calc(100% - 50px);
}

/* Edit mode styling */
.edit-mode .grid-stack-item .grid-stack-item-content {
    outline: 2px dashed var(--accent-color);
    cursor: move;
}

.edit-mode .grid-stack-item:hover .grid-stack-item-content {
    outline: 2px solid var(--accent-color);
}

/* ============================================
   RESIZE HANDLE STYLES - INVISIBLE HANDLES
   ============================================ */

/* Make resize handle completely invisible */
.grid-stack-item .grid-stack-item-resizable {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: transparent !important;
    border: none !important;
    opacity: 0 !important;
    cursor: se-resize;
    z-index: 100;
}

/* Make all corners trigger resize cursor */
.grid-stack-item .grid-stack-item-resizable {
    cursor: se-resize;
}

/* For bottom-left corner */
.grid-stack-item .grid-stack-item-resizable[data-type="sw"] {
    cursor: sw-resize;
    left: 0;
    right: auto;
}

/* For top-right corner */
.grid-stack-item .grid-stack-item-resizable[data-type="ne"] {
    cursor: ne-resize;
    top: 0;
    bottom: auto;
}

/* For top-left corner */
.grid-stack-item .grid-stack-item-resizable[data-type="nw"] {
    cursor: nw-resize;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
}

/* For right edge */
.grid-stack-item .grid-stack-item-resizable[data-type="e"] {
    cursor: e-resize;
    width: 10px;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
}

/* For left edge */
.grid-stack-item .grid-stack-item-resizable[data-type="w"] {
    cursor: w-resize;
    width: 10px;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
}

/* For bottom edge */
.grid-stack-item .grid-stack-item-resizable[data-type="s"] {
    cursor: s-resize;
    height: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
}

/* For top edge */
.grid-stack-item .grid-stack-item-resizable[data-type="n"] {
    cursor: n-resize;
    height: 10px;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
}

/* Never show any visual indicator for resize handles */
.grid-stack-item .grid-stack-item-resizable::before,
.grid-stack-item .grid-stack-item-resizable::after {
    display: none !important;
    content: none !important;
}

/* No hover effects, no background, no nothing */
.grid-stack-item .grid-stack-item-resizable:hover,
.grid-stack-item .grid-stack-item-resizable:active,
.edit-mode .grid-stack-item .grid-stack-item-resizable,
.grid-stack-item:hover .grid-stack-item-resizable {
    background: transparent !important;
    opacity: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Prevent overlapping during resize */
.resizing-gridstack .grid-stack-item {
    transition: none !important;
}

.grid-stack-item.ui-resizable-resizing {
    z-index: 1000 !important;
}

/* Ensure proper containment during resize */
.grid-stack {
    position: relative;
}

.grid-stack-item {
    position: absolute;
    padding: 0;
}

/* Make sure widgets don't overlap during drag/resize */
.grid-stack-item.ui-draggable-dragging,
.grid-stack-item.ui-resizable-resizing {
    opacity: 0.8;
    z-index: 1000;
}

/* The custom free-drag handler in enableCustomDrag() sets item.style.left/top
   assuming canvas-relative pixel coordinates (position:absolute behavior) — but
   our own .grid-stack-item.visual-widget:not(.ui-draggable-dragging) rule only
   EXCLUDES this state from being forced to position:static, it never explicitly
   sets it TO absolute. Without this, it fell back to the base .visual-widget
   rule (position:relative), where left/top mean something completely different
   (an offset from its own normal-flow spot, not a canvas coordinate) — which is
   why dragging felt uncontrollable instead of placing the widget where dropped. */
.grid-stack-item.visual-widget.ui-draggable-dragging {
    position: absolute !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
}

/* Ensure proper cursor on edges when in edit mode */
.edit-mode .visual-widget:hover {
    cursor: default;
}

/* Only show resize cursor on the edges in edit mode */
.edit-mode .grid-stack-item:hover {
    cursor: default;
}

/* The resize handles are invisible but the cursor changes on edges */
.edit-mode .grid-stack-item .grid-stack-item-resizable {
    cursor: se-resize;
}

/* Make the invisible resize area larger for easier grabbing */
.grid-stack-item .grid-stack-item-resizable {
    width: 15px;
    height: 15px;
}

/* For better user experience, show a subtle cursor change on widget corners in edit mode */
.edit-mode .visual-widget {
    position: relative;
}

/* This creates an invisible hot spot in the corner */
.edit-mode .visual-widget::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: se-resize;
    z-index: 101;
    pointer-events: auto;
}

/* Ensure the actual resize handle doesn't show anything */
.edit-mode .visual-widget .grid-stack-item-resizable {
    opacity: 0 !important;
    background: transparent !important;
}

/* Widget controls in edit mode */
.edit-mode .widget-actions {
    opacity: 1 !important;
}

.widget-actions {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.widget-actions:hover {
    opacity: 1;
}

/* Arrange Mode Styles */
.arrange-mode .visual-widget {
    cursor: move;
    position: relative;
    transition: all 0.2s;
}

/* Was forcing every chart to shrink-wrap to its content width at all times
   (width: auto !important) — that fought GridStack's real inline width the
   whole time you dragged a corner/edge handle, and immediately snapped it
   back the instant you released, so width resize looked like nothing but
   cropping. Tile/summary cards were never affected by this anyway (their
   own inline "!important" width always wins), so scoping this out for
   charts only removes the conflict without touching them. */
.arrange-mode .visual-widget[data-widget-type="tileCard"],
.arrange-mode .visual-widget[data-widget-type="summaryCard"] {
    box-sizing: border-box !important;
}

/* Hover preview outline — charts only, never tile/summary cards */
.arrange-mode .visual-widget:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]):hover {
    outline: 2px dashed var(--accent-color);
    outline-offset: -2px;
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Persistent dashed outline once a chart is actually clicked/selected —
   charts only, never tile/summary cards. Applied to .widget-body instead
   of the outer .visual-widget, so it hugs the real visible card instead of
   the full GridStack grid cell (which can reserve extra empty height). */
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .widget-body {
    outline: 2px dashed var(--accent-color);
    outline-offset: -2px;
}

/* Small round resize handles at the 4 corners of the selected chart.
   Real handle classes are jQuery UI's convention (.ui-resizable-se etc.),
   invisible everywhere by default — reveal just the corner ones here. */
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-se,
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-sw,
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-ne,
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-nw {
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--accent-color) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
    z-index: 200 !important;
}

.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-se {
    bottom: -6px !important;
    right: -6px !important;
}
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-sw {
    bottom: -6px !important;
    left: -6px !important;
}
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-ne {
    top: -6px !important;
    right: -6px !important;
}
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-nw {
    top: -6px !important;
    left: -6px !important;
}

/* Intentionally no outline here — this rule used to outline the whole
   .visual-widget (header included), which stayed sized to the widget's
   OLD, unresized width and showed as a separate, mismatched dashed box
   above the correctly-sized one around .widget-body (see the rule further
   up this file, on .widget-body specifically). Leaving this selector empty
   rather than deleting it, so it's easy to find if the header sizing is
   ever fixed properly and this needs restoring. */
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) {
    outline: none;
}

/* Small round resize handles at the 4 corners of the selected chart.
   Your actual handle elements use jQuery UI's class convention
   (.ui-resizable-se, .ui-resizable-sw, etc.) — NOT GridStack's
   data-type attribute, which doesn't exist on these elements at all.
   They're invisible everywhere by default; here we reveal just the
   corner ones, only for the selected chart in arrange mode. */
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-se,
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-sw,
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-ne,
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-nw {
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--accent-color) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
    z-index: 200 !important;
}

/* Nudge each dot to sit centered ON the corner point, poking half outside
   the border, like a normal resize handle in design tools — rather than
   tucked entirely inside the widget's edge. */
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-se {
    bottom: -6px !important;
    right: -6px !important;
}
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-sw {
    bottom: -6px !important;
    left: -6px !important;
}
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-ne {
    top: -6px !important;
    right: -6px !important;
}
.arrange-mode .visual-widget.selected:not([data-widget-type="tileCard"]):not([data-widget-type="summaryCard"]) .ui-resizable-nw {
    top: -6px !important;
    left: -6px !important;
}

.arrange-mode .visual-widget.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.arrange-mode .visual-widget.drag-over {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    transform: scale(1.02);
}

/* Widget Order Number Badge */
.widget-order-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-color);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 10;
    display: none;
}

.arrange-mode .widget-order-badge {
    display: block;
}

/* Responsive Grid */
.canvas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

/* Save Chart Modal Styling */
.save-chart-modal .modal {
    max-width: 450px;
}

.save-chart-preview {
    background: var(--gray-100);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.save-chart-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.save-chart-preview-item:last-child {
    border-bottom: none;
}

.save-chart-preview-icon {
    font-size: 1.2rem;
}

.save-chart-preview-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--gray-700);
}

.save-chart-preview-type {
    font-size: 0.7rem;
    color: var(--gray-500);
    background: var(--gray-200);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Saved Charts Chips Styling - Match other chips */
.saved-chart-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 8px;
    background: #e9ecef;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
}

.saved-chart-chip:hover {
    background: #dee2e6;
    transform: translateY(-1px);
}

.saved-chart-chip .remove-chip {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.saved-chart-chip .remove-chip:hover {
    background: #dc3545;
    color: white;
}

/* Save Chart Button - Matching theme color */
#saveChartBtn {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#saveChartBtn:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
}

/* Active saved chart chip styling */
.saved-chart-chip.active {
    background: var(--primary-color);
    color: white;
}

.saved-chart-chip.active .remove-chip {
    color: white;
}

.saved-chart-chip.active .remove-chip:hover {
    background: var(--danger);
    color: white;
}

/* ============================================
   CRITICAL FIXES FOR CHART VISIBILITY
   ============================================ */

/* Ensure canvas elements are visible and have proper dimensions */
.widget-body canvas {
    max-height: 250px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure widget body has proper height and doesn't clip charts */
.widget-body {
    min-height: 280px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex: 1;
}

/* Make sure visual-widget is properly sized */
.visual-widget {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 350px;
}

/* Fix for GridStack items */
.grid-stack-item-content {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    overflow: visible;
    position: relative;
    height: 100%;
    width: 100%;
}

.grid-stack-item-content .visual-widget {
    height: 100%;
    width: 100%;
    border: none;
    display: flex;
    flex-direction: column;
}

/* Ensure canvas doesn't get hidden */
canvas {
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
}

/* Fix for the canvas container in the dashboard */
.widget-body {
    position: relative;
    width: 100%;
}

/* Ensure the canvas context is properly initialized */
canvas[style*="max-height"] {
    max-height: 250px !important;
    min-height: 180px !important;
}

/* Add to the end of reports.css */

/* Improved chart resizing */
.visual-widget {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 350px;
}

.widget-body {
    padding: 1rem;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex: 1;
    position: relative;
}

.widget-body canvas {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
    display: block;
    visibility: visible;
    opacity: 1;
}

/* ===== FIX: pie/doughnut charts overflowing their canvas-editor grid
   cell and spilling onto the widget next to/below them, instead of
   sitting neatly side by side =====
   The generic ".widget-body canvas" rule above sets height: auto,
   which lets a pie/doughnut canvas grow to its own internal drawing
   size instead of the size of the card it's sitting in. Fullscreen
   mode never has this problem because it already has its own more
   specific rule (".dashboard-widget-item .widget-body canvas",
   further down this file) that uses height: 100%.
   This rule copies that same, already-working behaviour into the
   canvas editor — but ONLY for pie/doughnut widgets, matched through
   the data-widget-type attribute on their outer .visual-widget div.
   Bar/line/area/stacked charts (which use the same generic canvas
   class) are not matched by this selector, so they keep behaving
   exactly as they do today. Fullscreen mode uses a different wrapper
   element (.dashboard-widget-item, not .visual-widget), so it is
   also untouched. */
.visual-widget[data-widget-type="pie"] .widget-body canvas,
.visual-widget[data-widget-type="doughnut"] .widget-body canvas {
    height: 100% !important;
    max-height: 100% !important;
}

/* Resize handle styling */
.grid-stack-item .grid-stack-item-resizable {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background: var(--accent-color);
    border-radius: 0 0 8px 0;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
}

.grid-stack-item:hover .grid-stack-item-resizable {
    opacity: 0.5;
}

.edit-mode .grid-stack-item .grid-stack-item-resizable {
    opacity: 0.5;
}

.grid-stack-item .grid-stack-item-resizable:hover {
    opacity: 1;
    background: var(--accent-dark);
}

/* Ensure charts resize smoothly */
canvas {
    transition: width 0.1s ease, height 0.1s ease;
}

/* Remove borders from stacked bar chart columns */
canvas + canvas {
    border: none !important;
}

/* This specifically targets Chart.js canvas elements */
.chartjs-render-monitor {
    stroke: transparent !important;
}

/* Force remove borders from stacked bar charts */
canvas {
    border: none !important;
    outline: none !important;
}

/* Target Chart.js elements directly */
.chartjs-render-monitor {
    stroke: transparent !important;
}

/* Specifically target bar elements in charts */
canvas + canvas {
    border: none !important;
}

/* Force remove all borders from stacked bar charts */
canvas {
    border: none !important;
    outline: none !important;
}

.chartjs-render-monitor {
    stroke: transparent !important;
}

/* Remove any border from chart containers */
.widget-body canvas {
    border: none !important;
    box-shadow: none !important;
}

/* Target bar elements specifically */
canvas[role="img"] {
    border: none !important;
}

/* Force remove all borders and gaps from stacked bar charts */
canvas {
    border: none !important;
    outline: none !important;
}

.chartjs-render-monitor {
    stroke: transparent !important;
}

/* Remove any border from chart containers */
.widget-body canvas {
    border: none !important;
    box-shadow: none !important;
}

/* Target bar elements specifically */
canvas[role="img"] {
    border: none !important;
}

/* Remove white gaps between stacked bars */
canvas {
    background: transparent !important;
}

/* ULTIMATE FIX - Force remove all borders and gaps */
canvas {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Target the actual bars in Chart.js */
.chartjs-render-monitor {
    stroke: none !important;
    stroke-width: 0 !important;
}

/* Force remove any border on canvas contexts */
canvas[role="img"] {
    border: none !important;
}

/* Override any inline styles that might add borders */
.widget-body canvas {
    border: 0 !important;
    outline: 0 !important;
}

/* Ultimate bar border removal */
canvas, canvas * {
    stroke: none !important;
    stroke-width: 0 !important;
    border: none !important;
}

/* Completely hide resize handles but keep resizing functional */
.grid-stack-item .grid-stack-item-resizable {
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    visibility: hidden !important;   /* Hide but preserve layout */
}

/* Also hide any pseudo-elements that might create visible handles */
.grid-stack-item .grid-stack-item-resizable::before,
.grid-stack-item .grid-stack-item-resizable::after {
    display: none !important;
    content: none !important;
}

/* Prevent any hover effects from showing handles */
.grid-stack-item .grid-stack-item-resizable:hover,
.grid-stack-item .grid-stack-item-resizable:active,
.edit-mode .grid-stack-item .grid-stack-item-resizable,
.grid-stack-item:hover .grid-stack-item-resizable {
    opacity: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
}

/* Also hide the extra corner hot spot created earlier in your CSS */
.edit-mode .visual-widget::after {
    display: none !important;
}

/* Completely hide resize handle visuals, but keep them functional */
.grid-stack-item .grid-stack-item-resizable {
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    visibility: visible !important;   /* must be visible for pointer events */
    pointer-events: auto !important;  /* allows resizing via invisible area */
    cursor: se-resize !important;     /* ensures correct cursor on corner */
}

/* Hide any pseudo-elements that might become visible */
.grid-stack-item .grid-stack-item-resizable::before,
.grid-stack-item .grid-stack-item-resizable::after {
    display: none !important;
    content: none !important;
}

/* Optional: increase hit area for easier resizing (still invisible) */
.grid-stack-item .grid-stack-item-resizable {
    width: 15px !important;
    height: 15px !important;
}

/* ULTIMATE INVISIBLE RESIZE HANDLES - Keep functionality, hide all visuals */
.grid-stack-item .grid-stack-item-resizable,
.grid-stack-item .grid-stack-item-resizable[data-type],
.grid-stack-item .grid-stack-item-resizable:hover,
.grid-stack-item .grid-stack-item-resizable:active {
    background: transparent !important;
    opacity: 0 !important;
    visibility: visible !important;   /* needed for pointer events */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: se-resize !important;     /* keeps resize cursor on corners */
    pointer-events: auto !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
}

/* Hide any pseudo-elements that might become visible */
.grid-stack-item .grid-stack-item-resizable::before,
.grid-stack-item .grid-stack-item-resizable::after {
    display: none !important;
    content: none !important;
}

/* ============================================
   INVISIBLE BUT FUNCTIONAL RESIZE HANDLES
   ============================================ */

/* Make resize handles invisible but keep them functional */
.grid-stack-item .grid-stack-item-resizable,
.grid-stack-item .ui-resizable-handle,
.ui-resizable-handle {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;  /* KEY: allows clicking through invisible area */
    cursor: se-resize !important;
    /* Keep usable dimensions - DON'T set to 0 */
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Corner-specific handles */
.grid-stack-item .grid-stack-item-resizable[data-type="se"],
.grid-stack-item .grid-stack-item-resizable[data-type="sw"],
.grid-stack-item .grid-stack-item-resizable[data-type="ne"],
.grid-stack-item .grid-stack-item-resizable[data-type="nw"],
.grid-stack-item .grid-stack-item-resizable[data-type="e"],
.grid-stack-item .grid-stack-item-resizable[data-type="w"],
.grid-stack-item .grid-stack-item-resizable[data-type="s"],
.grid-stack-item .grid-stack-item-resizable[data-type="n"] {
    background: transparent !important;
    opacity: 0 !important;
    /* Keep functional dimensions */
    width: 10px !important;
    height: 10px !important;
    pointer-events: auto !important;
}

/* Edge handles need different dimensions */
.grid-stack-item .grid-stack-item-resizable[data-type="e"],
.grid-stack-item .grid-stack-item-resizable[data-type="w"] {
    width: 8px !important;
    height: 100% !important;
}

.grid-stack-item .grid-stack-item-resizable[data-type="s"],
.grid-stack-item .grid-stack-item-resizable[data-type="n"] {
    width: 100% !important;
    height: 8px !important;
}

/* Prevent hover effects from revealing handles */
.grid-stack-item .grid-stack-item-resizable:hover,
.grid-stack-item .grid-stack-item-resizable:active,
.grid-stack-item:hover .grid-stack-item-resizable {
    background: transparent !important;
    opacity: 0 !important;
    border: none !important;
}

/* Remove any pseudo-element handles */
.grid-stack-item .grid-stack-item-resizable::before,
.grid-stack-item .grid-stack-item-resizable::after,
.ui-resizable-handle::before,
.ui-resizable-handle::after {
    display: none !important;
    content: none !important;
}

/* Hide the extra corner hot spot if present */
.edit-mode .visual-widget::after {
    display: none !important;
}

/* Better tooltip for pie/doughnut charts */
.chartjs-tooltip {
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 4px !important;
    color: white !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ============================================
   CHART SPACING - PREVENT OVERLAPPING
   ============================================ */

/* Add padding/margin around each grid item */
.grid-stack-item {
    padding: 6px !important;
    box-sizing: border-box !important;
}

/* Ensure the content inside respects the padding */
.grid-stack-item-content {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Adjust cell height to accommodate spacing */
.grid-stack {
    margin: -6px !important;
    width: calc(100% + 12px) !important;
}

/* Optional: Add a subtle shadow for better visual separation */
.grid-stack-item-content .visual-widget {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}

.grid-stack-item-content .visual-widget:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ============================================
   SUMMARY CARD STYLES
   ============================================ */

.summary-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Different color variants for summary cards */
.summary-card.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.summary-card.success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.summary-card.warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.summary-card.danger {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
}

.summary-card.info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
}

/* ============================================
   SUMMARY CARD MODAL STYLES
   ============================================ */

.summary-tab-content {
    animation: fadeIn 0.2s ease-in-out;
}

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

.summary-color-option {
    padding: 0.75rem;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
}

.summary-color-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.summary-color-option.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(36, 72, 85, 0.2);
}

.summary-color-option .color-preview {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.summary-color-option .color-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-600);
}

.summary-color-option .check-mark {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 1rem;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}


/* ============================================
   SUMMARY CARDS - BORDERLESS TILES
   ============================================ */

/* Remove border, background, and shadow from summary card containers */
/*.visual-widget[data-widget-type="summaryCard"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: unset !important;
    padding: 4px !important;
}*/

/* Remove the widget header for summary cards */
.visual-widget[data-widget-type="summaryCard"] .widget-header {
    display: none !important;
}

/* Remove padding from widget body for summary cards */
.visual-widget[data-widget-type="summaryCard"] .widget-body {
    padding: 0 !important;
    min-height: unset !important;
    height: 100% !important;
}

/* Summary card hover effect */
.summary-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
}

/* Make sure summary cards fill their grid space */
/*.visual-widget[data-widget-type="summaryCard"] {
    display: flex;
    flex-direction: column;
    height: 100%;
}*/

.visual-widget[data-widget-type="summaryCard"] .widget-body {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.visual-widget[data-widget-type="summaryCard"] .widget-body > div {
    flex: 1;
    width: 100%;
}

/* ============================================
   SUMMARY CARD SIZING - OVERRIDE GRIDSTACK
   ============================================ */

/* Force summary cards to respect their size */
.visual-widget[data-widget-type="summaryCard"] .widget-body {
    height: 100% !important;
    min-height: unset !important;
    padding: 0 !important;
}

.visual-widget[data-widget-type="summaryCard"] .summary-card {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Hover effect for summary cards */
.visual-widget[data-widget-type="summaryCard"] .summary-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
}

/* ============================================
   SUMMARY CARD ANALYTICS
   ============================================ */

/* Analytics container inside summary card */
.summary-analytics-container {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Analytics tab field container */
#summaryAnalyticsFieldsContainer {
    min-height: 50px;
    transition: all 0.2s ease;
}

#summaryAnalyticsFieldsContainer:hover {
    border-color: var(--accent-color) !important;
    background: rgba(240, 176, 93, 0.05) !important;
}

/* Make the canvas responsive */
#summaryAnalyticsCanvas {
    max-height: 150px !important;
    width: 100% !important;
}

/* Summary card chart type radio labels */
input[name="summaryChartType"] + span {
    transition: all 0.2s ease;
}

input[name="summaryChartType"]:checked + span {
    color: var(--accent-color);
}

/* Hover effect for chart type labels */
label:has(input[name="summaryChartType"]) {
    cursor: pointer;
    transition: all 0.2s ease;
}

label:has(input[name="summaryChartType"]):hover {
    border-color: var(--accent-color) !important;
    background: rgba(240, 176, 93, 0.05) !important;
}

label:has(input[name="summaryChartType"]:checked) {
    border-color: var(--accent-color) !important;
    background: rgba(240, 176, 93, 0.1) !important;
}

/* ============================================
   FIX: Summary Card Chart Visibility
   ============================================ */

/* Ensure summary card body has proper height */
.visual-widget[data-widget-type="summaryCard"] .widget-body {
    /*min-height: 140px !important;*/
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Ensure summary card container fills its space */
/*.visual-widget[data-widget-type="summaryCard"] {
    min-height: 180px !important;
    height: 100% !important;
}*/

/* Force canvas to be visible */
.visual-widget[data-widget-type="summaryCard"] canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
    max-height: 120px !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure the summary card itself has proper height */
.summary-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
}

/* Fix for the chart container in summary card */
.visual-widget[data-widget-type="summaryCard"] .widget-body > div {
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
}

/* Ensure the right side chart container is visible */
.visual-widget[data-widget-type="summaryCard"] .summary-card > div > div:last-child {
    min-height: 60px !important;
    max-height: 120px !important;
    /*height: 100% !important;*/
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
}

/* ============================================
   FIX: Data Panel Z-Index Override
   ============================================ */

/* When data panel is open, ensure it's above modals */
.data-source-panel.open {
    z-index: 1001 !important;
}

.data-source-overlay.active {
    z-index: 1000 !important;
}

/* Ensure the modal overlay doesn't block clicks on the data panel */
.modal-overlay.active {
    z-index: 999;
}

/* When data panel is open, lower the modal overlay */
.data-source-panel.open ~ .modal-overlay,
.data-source-overlay.active ~ .modal-overlay {
    z-index: 500 !important;
}

/* Ensure the summary card modal is behind the data panel when open */
#summaryCardModal.active {
    z-index: 900;
}

/* Fix for the data panel to be clickable through the modal overlay */
.data-source-panel.open {
    pointer-events: auto !important;
}

.data-source-overlay.active {
    pointer-events: auto !important;
}

/* Ensure the modal body doesn't capture clicks when data panel is open */
.modal-overlay.active .modal-body {
    pointer-events: none;
}

/* But the modal footer and header should still work */
.modal-overlay.active .modal-header,
.modal-overlay.active .modal-footer {
    pointer-events: auto;
}

/* ============================================
   FIX: Modal Overlay and Z-Index Issues
   ============================================ */

/* Fix for summary card modal */
#summaryCardModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: rgba(0,0,0,0.5) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#summaryCardModal.active {
    display: flex !important;
}

#summaryCardModal .modal {
    max-height: 90vh !important;
    overflow: hidden !important;
    margin: auto !important;
    position: relative !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 10000 !important;
    width: 95% !important;
    max-width: 850px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    display: flex !important;
    flex-direction: column !important;
}

#summaryCardModal .modal-body {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    flex: 1 !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar {
    width: 6px !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar-track {
    background: var(--gray-100) !important;
    border-radius: 3px !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-400) !important;
    border-radius: 3px !important;
}

#summaryCardModal .modal-footer {
    flex-shrink: 0 !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix for data panel when modal is open */
.data-source-panel.open {
    z-index: 10001 !important;
}

.data-source-overlay.active {
    z-index: 10000 !important;
}

/* When data panel is open, ensure modal is behind it */
#summaryCardModal.active .modal {
    z-index: 9999 !important;
}

/* Fix for donut chart config visibility */
#donutChartConfig {
    display: none;
}

#donutChartConfig.active {
    display: block !important;
}

#lineChartConfig {
    display: none;
}

#lineChartConfig.active {
    display: block !important;
}

/* Fix for donut fields container */
#donutFieldsContainer {
    min-height: 50px !important;
    max-height: 150px !important;
    overflow-y: auto !important;
}

/* Donut field chip styling */
.donut-field-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    background: #e9ecef !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    color: #495057 !important;
    border-left: 3px solid var(--accent-color) !important;
    margin: 2px 0 !important;
    transition: all 0.2s !important;
}

.donut-field-chip:hover {
    background: #dee2e6 !important;
    transform: translateY(-1px) !important;
}

/* Fix for selected variable display */
#selectedVariableDisplay {
    background: var(--gray-50) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    border: 1px solid var(--gray-200) !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Add these at the end of your reports.css file */

/* ============================================
   FIX: SUMMARY CARD MODAL Z-INDEX
   ============================================ */

/* Ensure the modal overlay is always on top */
#summaryCardModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;  /* Increased from 9999 */
    background: rgba(0,0,0,0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    backdrop-filter: blur(3px) !important;
}

#summaryCardModal.active {
    display: flex !important;
}

#summaryCardModal .modal {
    max-height: 90vh !important;
    overflow: hidden !important;
    margin: auto !important;
    position: relative !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 100000 !important;  /* Increased from 10000 */
    width: 95% !important;
    max-width: 850px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

/* Ensure the modal body is scrollable */
#summaryCardModal .modal-body {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    flex: 1 !important;
}

/* Fix for the modal footer */
#summaryCardModal .modal-footer {
    flex-shrink: 0 !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
}

/* Ensure the modal tabs are clickable */
#summaryCardModal .config-tabs {
    position: relative !important;
    z-index: 100001 !important;
}

#summaryCardModal .config-tab {
    cursor: pointer !important;
    position: relative !important;
    z-index: 100002 !important;
}

/* Fix for the data panel when modal is open */
.data-source-panel.open {
    z-index: 100001 !important;
}

.data-source-overlay.active {
    z-index: 100000 !important;
}

/* When data panel is open, ensure modal is behind it but still visible */
#summaryCardModal.active .modal {
    z-index: 99999 !important;
}

/* Fix for radio buttons and checkboxes in modal */
#summaryCardModal input[type="radio"],
#summaryCardModal input[type="checkbox"] {
    cursor: pointer !important;
    pointer-events: auto !important;
}

#summaryCardModal label {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure the select fields button is clickable */
#selectFieldsForDonutBtn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100003 !important;
}

/* Fix for the donut fields container */
#donutFieldsContainer {
    min-height: 50px !important;
    max-height: 150px !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
}

/* Ensure all interactive elements in the modal work */
#summaryCardModal button,
#summaryCardModal select,
#summaryCardModal input,
#summaryCardModal .config-tab {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix for the chart type radio buttons */
#summaryCardModal input[name="summaryChartType"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#summaryCardModal input[name="summaryChartType"] + span {
    pointer-events: none !important;
}

#summaryCardModal label:has(input[name="summaryChartType"]) {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Fix for modal body scroll */
#summaryCardModal .modal-body::-webkit-scrollbar {
    width: 6px !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar-track {
    background: var(--gray-100) !important;
    border-radius: 3px !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-400) !important;
    border-radius: 3px !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure the modal animation works */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   FIX: Modal Focus and Z-Index Issues
   ============================================ */

/* Ensure the summary card modal overlay is always on top */
#summaryCardModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    backdrop-filter: blur(3px) !important;
}

#summaryCardModal.active {
    display: flex !important;
}

#summaryCardModal .modal {
    max-height: 90vh !important;
    overflow: hidden !important;
    margin: auto !important;
    position: relative !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 100000 !important;
    width: 95% !important;
    max-width: 850px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

/* Ensure the modal body is scrollable */
#summaryCardModal .modal-body {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    flex: 1 !important;
}

/* Fix for the modal footer */
#summaryCardModal .modal-footer {
    flex-shrink: 0 !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
}

/* Ensure the modal tabs are clickable */
#summaryCardModal .config-tabs {
    position: relative !important;
    z-index: 100001 !important;
}

#summaryCardModal .config-tab {
    cursor: pointer !important;
    position: relative !important;
    z-index: 100002 !important;
    pointer-events: auto !important;
}

#summaryCardModal .config-tab:hover {
    background: rgba(240, 176, 93, 0.1) !important;
}

/* Fix for the data panel when modal is open */
.data-source-panel.open {
    z-index: 100001 !important;
}

.data-source-overlay.active {
    z-index: 100000 !important;
}

/* When data panel is open, ensure modal is behind it but still visible */
#summaryCardModal.active .modal {
    z-index: 99999 !important;
}

/* Fix for radio buttons and checkboxes in modal */
#summaryCardModal input[type="radio"],
#summaryCardModal input[type="checkbox"] {
    cursor: pointer !important;
    pointer-events: auto !important;
}

#summaryCardModal label {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure the select fields button is clickable */
#selectFieldsForDonutBtn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100003 !important;
}

#selectFieldsForDonutBtn:hover {
    background: var(--accent-dark) !important;
}

/* Fix for the donut fields container */
#donutFieldsContainer {
    min-height: 50px !important;
    max-height: 150px !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
}

/* Ensure all interactive elements in the modal work */
#summaryCardModal button,
#summaryCardModal select,
#summaryCardModal input,
#summaryCardModal .config-tab {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix for the chart type radio buttons */
#summaryCardModal input[name="summaryChartType"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#summaryCardModal input[name="summaryChartType"] + span {
    pointer-events: none !important;
}

#summaryCardModal label:has(input[name="summaryChartType"]) {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Fix for modal body scroll */
#summaryCardModal .modal-body::-webkit-scrollbar {
    width: 6px !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar-track {
    background: var(--gray-100) !important;
    border-radius: 3px !important;
}

#summaryCardModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-400) !important;
    border-radius: 3px !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure the modal animation works */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fix for the line chart config visibility */
#lineChartConfig {
    display: none;
}

#lineChartConfig.active {
    display: block !important;
}

/* Donut field chip hover effect */
.donut-field-chip:hover {
    background: #dee2e6 !important;
    transform: translateY(-1px) !important;
}

/* Fix for the selected variable display */
#selectedVariableDisplay {
    background: var(--gray-50) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    border: 1px solid var(--gray-200) !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ============================================
   FIX: SAVE CANVAS MODAL
   ============================================ */

/* Ensure save canvas modal appears on top */
#saveCanvasModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    backdrop-filter: blur(3px) !important;
}

#saveCanvasModal.active {
    display: flex !important;
}

#saveCanvasModal .modal {
    max-height: 90vh !important;
    overflow: hidden !important;
    margin: auto !important;
    position: relative !important;
    background: white !important;
    border-radius: 12px !important;
    z-index: 100000 !important;
    width: 95% !important;
    max-width: 500px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

#saveCanvasModal .modal-body {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    flex: 1 !important;
}

#saveCanvasModal .modal-footer {
    flex-shrink: 0 !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
}

/* Ensure input fields in modal are focusable */
#saveCanvasModal input,
#saveCanvasModal textarea {
    pointer-events: auto !important;
    cursor: text !important;
    z-index: 100001 !important;
    position: relative !important;
}

#saveCanvasModal input:focus,
#saveCanvasModal textarea:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(240, 176, 93, 0.2) !important;
}

/* Ensure buttons in modal are clickable */
#saveCanvasModal button {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100001 !important;
    position: relative !important;
}

/* Fix for modal overlay - ensure it doesn't block clicks */
#saveCanvasModal .modal-overlay {
    pointer-events: none !important;
}

#saveCanvasModal .modal {
    pointer-events: auto !important;
}

/* ============================================
   FIX: Modal Input Focus
   ============================================ */

/* Ensure all modal inputs are above the overlay */
.modal-overlay.active .modal input,
.modal-overlay.active .modal textarea,
.modal-overlay.active .modal select {
    position: relative !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
}

/* Ensure the modal itself is above the overlay */
.modal-overlay.active .modal {
    pointer-events: auto !important;
    z-index: 100000 !important;
}

/* Fix for the save canvas modal specifically */
#saveCanvasModal.active {
    display: flex !important;
    pointer-events: auto !important;
}

#saveCanvasModal.active .modal {
    pointer-events: auto !important;
}

#saveCanvasModal.active input,
#saveCanvasModal.active textarea {
    pointer-events: auto !important;
    cursor: text !important;
}

#saveCanvasModal.active button {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ============================================
   CORRECTED WIDGET SPACING
   ============================================ */

/* Add consistent spacing between grid items */
.grid-stack-item {
    padding: 6px 8px !important;      /* Reduced from 12px 14px to shrink the gap */
    box-sizing: border-box !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Ensure the content inside respects the padding */
.grid-stack-item-content {
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}

/* Let regular charts fill their container naturally */
.visual-widget:not([data-widget-type="summaryCard"]) .widget-body {
    padding: 10px !important;         /* Reduced from 16px to shrink height */
    min-height: 180px !important;     /* Reduced from 220px to shrink the gap */
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Keep Summary Cards compact */
.visual-widget[data-widget-type="summaryCard"] .widget-body {
    min-height: 120px !important;     /* Forces Summary Cards to be compact */
    padding: 0 !important;
    height: 100% !important;
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Ensure canvas fills the available space */
.widget-body canvas {
    max-height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ============================================
   FINAL SPACING FIX - DO NOT TOUCH CHART STYLES
   ============================================ */

#canvasGrid.grid-stack {
    min-height: 400px !important;   /* floor: never smaller than this even if empty */
    flex: 1 !important;             /* was: height: auto — now grows to fill the
                                        rest of the slide page instead of leaving
                                        the canvas fill color exposed underneath */
    padding: 10px !important;
    margin-bottom: 30px !important;      /* Adds a clear 30px gap below the charts */
    background: transparent !important;  /* was painting its own gray (from the plain
                                             .grid-stack rule below) regardless of your
                                             picked canvas color — this is the box you're
                                             seeing around the chart in the screenshot */
    position: relative !important;  /* new: anchors position:absolute widgets during
                                        free-drag (see .ui-draggable-dragging rule) to
                                        THIS box's top-left corner — without it, the
                                        drag code's pixel math (measured against this
                                        same element's bounding rect) had no matching
                                        positioning context to actually apply against */
}

#savedCanvasesSection {
    margin-top: 20px !important;
    padding-top: 10px !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 2. Let the widget body flex naturally without forced minimums */
.grid-stack-item-content .widget-body {
    flex: 1 !important;
    overflow: hidden !important;
    min-height: unset !important;   /* ← REMOVES the 200px forced height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ============================================
   TILE CARD STYLES - Windows 8 Style (2.5in x 1.5in)
   ============================================ */

/* ===== BASE TILE CARD STYLES ===== */
.visual-widget[data-widget-type="tileCard"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    margin: 0 auto !important;
}

.visual-widget[data-widget-type="tileCard"] .widget-header {
    display: none !important;
}

.visual-widget[data-widget-type="tileCard"] .widget-body {
    padding: 0 !important;
    min-height: 50px !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    flex: 1 !important;
    overflow: visible !important;
}

.visual-widget[data-widget-type="tileCard"] .widget-body > div {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 50px !important;
    overflow: hidden !important;
}

/* ===== TILE CARD WIDTH & HEIGHT - sized so 6 medium tiles fit in 1400px ===== */
/* Small: ~150px wide x 90px tall */
.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="small"]) {
    width: 150px !important;
    min-width: 140px !important;
    max-width: 160px !important;
    height: 90px !important;
    min-height: 80px !important;
    max-height: 100px !important;
    flex: 0 0 150px !important;
}

.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="small"]) .grid-stack-item-content {
    width: 150px !important;
    min-width: 140px !important;
    max-width: 160px !important;
    height: 90px !important;
    min-height: 80px !important;
    max-height: 100px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.visual-widget[data-widget-type="tileCard"][data-tile-size="small"] .widget-body {
    max-height: 100px !important;
    height: 90px !important;
    min-height: 80px !important;
}

/* Medium tile card — widened from 165px → 175px to use more of the
   empty space on the right of the canvas, while keeping SIX tiles
   in a single row. 6 × (175 + 4px margins) = 1074px — fits safely
   even when the slide-panel narrows the stage to ~1150px usable.
   NOTE: Fullscreen slideshow uses CSS Grid (grid-column: span 2), so
   it is unaffected by these pixel values. */
#canvasGrid .grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="medium"]) {
    width: 175px !important;
    min-width: 170px !important;
    max-width: 185px !important;
    height: 120px !important;
    min-height: 110px !important;
    max-height: 130px !important;
    flex: 0 0 175px !important;
}

#canvasGrid .grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="medium"]) .grid-stack-item-content {
    width: 175px !important;
    min-width: 170px !important;
    max-width: 185px !important;
    height: 120px !important;
    min-height: 110px !important;
    max-height: 130px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#canvasGrid .visual-widget[data-widget-type="tileCard"][data-tile-size="medium"] .widget-body {
    max-height: 130px !important;
    height: 120px !important;
    min-height: 110px !important;
}

/* Large: ~240px wide x 160px tall */
.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="large"]) {
    width: 240px !important;
    min-width: 220px !important;
    max-width: 260px !important;
    height: 160px !important;
    min-height: 150px !important;
    max-height: 170px !important;
    flex: 0 0 240px !important;
}

.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="large"]) .grid-stack-item-content {
    width: 240px !important;
    min-width: 220px !important;
    max-width: 260px !important;
    height: 160px !important;
    min-height: 150px !important;
    max-height: 170px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.visual-widget[data-widget-type="tileCard"][data-tile-size="large"] .widget-body {
    max-height: 170px !important;
    height: 160px !important;
    min-height: 150px !important;
}

/* Canvas-only: keep tile card margins tight so six fit in one row.
   The generic tile-card rules use 2px/3px/6px in different places;
   this single canvas-scoped rule keeps everything at 2px, and because
   it lives inside #canvasGrid it never affects fullscreen. */
#canvasGrid .grid-stack-item.visual-widget[data-widget-type="tileCard"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing),
#canvasGrid .grid-stack-item:has(.visual-widget[data-widget-type="tileCard"]) {
    margin: 2px !important;
    box-sizing: border-box !important;
}

/* ===== OVERRIDE GRIDSTACK FOR TILE CARDS ===== */
.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"]) {
    display: inline-block !important;
    float: left !important;
    position: relative !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"]) .grid-stack-item-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* ===== TILE CARD HOVER EFFECT ===== */
.tile-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.tile-card:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}

.tile-card .tile-value {
    font-weight: bold !important;
    line-height: 1.1 !important;
    margin-bottom: 1px !important;
    color: white !important;
}

/* ===== TILE CARD ANIMATIONS ===== */
@keyframes tileIconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}

@keyframes tileValuePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(0.98); }
}

@keyframes tileTitleFade {
    0%, 100% { opacity: 0.92; }
    50% { opacity: 0.7; }
}

@keyframes tileCardAppear {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.tile-card {
    animation: tileCardAppear 0.3s ease-out;
}

/* ===== FRONT AND BACK SIDES FOR FLIP ===== */
.tile-front,
.tile-back {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== TILE COLOR OPTIONS IN MODAL ===== */
.tile-color-option {
    padding: 0.75rem;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
}

.tile-color-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tile-color-option .color-preview {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.tile-color-option .color-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-600);
}

.tile-color-option .check-mark {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 1rem;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    .tile-card .tile-value {
        font-size: 1.2rem !important;
    }
    .tile-card .tile-icon {
        font-size: 1.4rem !important;
    }
    
    /* Slightly smaller on mobile for better fit */
    .grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="small"]) {
        width: 130px !important;
        min-width: 120px !important;
        height: 80px !important;
        min-height: 70px !important;
        flex: 0 0 130px !important;
    }
    
    .grid-stack-item:has(.visual-widget[data-widget-type="tileCard"][data-tile-size="small"]) .grid-stack-item-content {
        width: 130px !important;
        min-width: 120px !important;
        height: 80px !important;
        min-height: 70px !important;
    }
}

/* Apply the same fix to ALL widget types (charts included), so nothing
   mixes floated cards with old percentage-positioned items and overlaps.
   :not(...) excludes the moment of actively dragging/resizing, so GridStack
   can still visually move the widget smoothly during the interaction —
   without it, position/transform were locked at all times and the widget
   only ever "jumped" to its new spot on drop instead of following the cursor. */
.grid-stack-item.visual-widget:not(.ui-draggable-dragging):not(.ui-resizable-resizing) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: left !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 6px !important;
}

/* Take tile cards out of GridStack's percentage-based column positioning
   entirely, so they sit right next to each other based on real width */
.grid-stack-item.visual-widget[data-widget-type="tileCard"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: left !important;
    display: inline-block !important;
    margin: 2px !important;
}

/* Same fix as tile cards: stop summary cards from following GridStack's
   percentage-based column math, so no more huge empty panel around them */
.grid-stack-item.visual-widget[data-widget-type="summaryCard"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: left !important;
    display: inline-block !important;
    margin: 3px !important;
}


/* ===== PowerPoint-style slide panel + slide stage ===== */
.slide-workspace {
    display: flex;
    gap: 8px;                  /* was 16px — half the space between panel and canvas */
    align-items: flex-start;
    background: #e9ebee;
    padding: 8px;              /* was 16px — half the outer frame */
    border-radius: 6px;
}

.slide-panel {
    width: 120px;              /* was 170px — shaves 50px off the left */
    flex-shrink: 0;
    background: #f3f3f3;
    border-radius: 6px;
    padding: 10px 6px;         /* was 12px 8px */
    display: flex;
    flex-direction: column;
    gap: 8px;                  /* was 10px */
    max-height: 80vh;
    overflow-y: auto;
}

.slide-thumb-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slide-thumb-number {
    font-size: 0.75rem;
    color: #888;
    width: 16px;
    text-align: right;
    flex-shrink: 0;
}

.slide-thumb {
    flex: 1;
    aspect-ratio: 16 / 9;
    background: white;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.slide-thumb:hover {
    border-color: #3498db;
}

.slide-thumb.active {
    border-color: #e74c3c;
    box-shadow: 0 0 0 1px #e74c3c;
}

.slide-thumb-label {
    font-size: 0.65rem;
    color: #888;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.slide-add-btn {
    margin-top: 4px;
    padding: 8px;
    border: 2px dashed #bbb;
    background: transparent;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    font-size: 0.8rem;
}

.slide-add-btn:hover {
    border-color: #3498db;
    color: #3498db;
}

.slide-panel-empty {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    padding: 12px 4px;
}

.slide-stage {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 6px;              /* was 20px */
    overflow: auto;
}

.dashboard-canvas {
    background: white;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 1400px;         /* was 1200px — enough for 6 medium tiles */
    /* aspect-ratio removed — it was forcing the height to 787px for
       a 1400px-wide canvas and creating an artificial empty bottom
       area. Removing it lets the canvas grow to fit its widgets. */
    min-height: 720px;         /* keep a sensible minimum */
    border-radius: 2px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ===== PowerPoint-style slide panel end ===== */


/* ===== PowerPoint-style ribbon bar ===== */
.ribbon-bar {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #d8dce1;
    border-radius: 6px;
    padding: 4px 20px;  /* Increased horizontal padding */
    gap: 0;
    margin-bottom: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-height: 62px;
    max-height: 85px;
    width: 100%;
}

.ribbon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 28px;  /* Even more padding between groups */
    border-right: 1px solid #e9ecef;
    min-width: fit-content;
    flex: 0 1 auto;
    margin: 0 6px;  /* More margin between groups */
}

.ribbon-group:first-child {
    padding-left: 4px;
}

.ribbon-group:last-child {
    border-right: none;
    padding-right: 4px;
}

.ribbon-group-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    width: 100%;
}

/* NEW: Two-row layout for Font group */
.ribbon-group-controls--wrap {
    flex-direction: column !important;
    align-items: stretch !important;
}

.ribbon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;  /* More gap between items */
    width: 100%;
}

.ribbon-row-top {
    margin-bottom: 1px;
}

.ribbon-row-bottom {
    margin-top: 1px;
}

/* Make the font dropdown and size dropdown wider */
#ribbonFontFamily {
    min-width: 130px;  /* Much wider */
    max-width: 160px;
    height: 28px;  /* Taller */
    padding: 0 8px;
    border: 1px solid #c9ced3;
    border-radius: 4px;
    background: white;
    font-size: 0.8rem;  /* Slightly larger font */
    color: #333;
    flex: 0 1 auto;
}

#ribbonFontFamily:hover {
    border-color: var(--accent-color);
}

#ribbonFontFamily:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

#ribbonFontSize {
    min-width: 70px;
    max-width: 90px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #c9ced3;
    border-radius: 4px;
    background: white;
    font-size: 0.8rem;
    color: #333;
    flex: 0 1 auto;
}

#ribbonFontSize:hover {
    border-color: var(--accent-color);
}

#ribbonFontSize:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

.ribbon-group-label {
    font-size: 0.6rem;
    color: #6c757d;
    margin-top: 2px;
    white-space: nowrap;
}

.ribbon-btn-row {
    display: flex;
    gap: 3px;
}

.ribbon-icon-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30px;  /* Wider */
    height: 30px;  /* Taller */
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #3a3f44;
    cursor: pointer;
    transition: all 0.12s;
}

.ribbon-icon-btn:hover {
    background: #f1f3f5;
    border-color: #d8dce1;
}

.ribbon-icon-btn.active {
    background: #e8edf5;
    border-color: #c3d4e8;
}

.ribbon-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.ribbon-color-btn {
    overflow: hidden;
}

.ribbon-color-btn input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ribbon-color-bar {
    position: absolute;
    bottom: 2px;
    left: 4px;
    right: 4px;
    height: 2px;
    border-radius: 1px;
    background: #e74c3c;
}

.ribbon-select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid #c9ced3;
    border-radius: 4px;
    background: white;
    font-size: 0.8rem;
    color: #333;
}

.ribbon-select:hover {
    border-color: var(--accent-color);
}

.ribbon-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

.ribbon-fill-text {
    font-size: 0.65rem;
    color: #666;
    margin-right: 4px;
}

/* FILL GROUP - Make it wider to fit icons properly */
.ribbon-group:nth-child(2) .ribbon-group-controls {
    flex-direction: row !important;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.ribbon-group:nth-child(2) .ribbon-icon-btn {
    width: 32px;
    height: 32px;
}

.ribbon-group:nth-child(2) .ribbon-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* FILTERS GROUP - Keep in single row with proper spacing */
.ribbon-group-filters .ribbon-group-controls {
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.ribbon-filter-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ribbon-filter-item label {
    font-size: 0.6rem;
    color: #888;
    text-transform: uppercase;
}

.ribbon-date-input {
    height: 26px;
    padding: 0 8px;
    border: 1px solid #c9ced3;
    border-radius: 4px;
    font-size: 0.7rem;
    background: white;
    width: 110px;  /* Wider date inputs */
}

.ribbon-date-input:hover {
    border-color: var(--accent-color);
}

.ribbon-date-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2);
}

.ribbon-apply-btn {
    align-self: center;
    height: 28px;
    padding: 0 16px;
    margin-left: 8px;
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ribbon-apply-btn:hover {
    background: var(--accent-dark);
}

/* ============================================
   SPLIT COLOR BUTTON - PowerPoint Style
   ============================================ */

.ribbon-color-split {
    display: inline-flex;
    align-items: stretch;
    border: none !important;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
    position: relative;
}

.ribbon-color-split:hover {
    border: 1px solid #c9ced3 !important;
    background: white;
}

.ribbon-color-split .ribbon-color-apply {
    border: none !important;
    border-radius: 0;
    width: 28px;
    height: 28px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
    padding: 0 4px;
}

.ribbon-color-split .ribbon-color-apply:hover {
    background: #f1f3f5;
}

.ribbon-color-split .ribbon-color-apply svg {
    width: 16px;
    height: 16px;
}

.ribbon-color-split .ribbon-color-bar {
    position: absolute;
    bottom: 2px;
    left: 4px;
    right: 4px;
    height: 3px;
    border-radius: 2px;
    background: #1a1a1a;
}

.ribbon-color-split .ribbon-color-dropdown {
    border: none !important;
    border-left: none !important;
    border-radius: 0;
    width: 16px;
    height: 28px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ribbon-color-split .ribbon-color-dropdown:hover {
    background: #f1f3f5;
}

.ribbon-color-split .ribbon-color-dropdown svg {
    width: 10px;
    height: 10px;
}

/* Color Palette Dropdown - PowerPoint Style */
.ribbon-color-palette-dropdown {
    position: fixed;   /* was: absolute — fixed lets JS place it via getBoundingClientRect(),
                           and keeps it out of any ancestor's clipped overflow box */
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 180px;
    padding: 8px;
    border: 1px solid #e9ecef;
}

.ribbon-color-palette-dropdown .color-palette-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 176px; /* fits 8 swatches (20px) + 7 gaps (2px) with a little breathing room */
}

.ribbon-color-palette-dropdown .color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.ribbon-color-palette-dropdown .color-swatch:hover {
    transform: scale(1.15);
    border-color: #333;
}

.ribbon-color-palette-dropdown .color-swatch.selected {
    border-color: var(--accent-color);
    outline: 2px solid rgba(240, 176, 93, 0.4);
}

.ribbon-color-palette-dropdown .color-palette-section {
    margin-bottom: 6px;
}

.ribbon-color-palette-dropdown .color-palette-section:last-child {
    margin-bottom: 0;
}

.ribbon-color-palette-dropdown .color-palette-label {
    font-size: 0.6rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 0 2px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}

/* Additional color options row */
.ribbon-color-palette-dropdown .color-more-options {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.ribbon-color-palette-dropdown .color-more-options button {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    background: white;
    font-size: 0.65rem;
    cursor: pointer;
    color: #666;
    transition: all 0.12s;
}

.ribbon-color-palette-dropdown .color-more-options button:hover {
    background: #f1f3f5;
    border-color: #c9ced3;
}

/* Responsive */
@media (max-width: 768px) {
    .ribbon-color-palette-dropdown {
        min-width: 160px;
    }

}

/* Ensure color palette dropdown appears on top */
.ribbon-color-palette-dropdown {
    z-index: 99999 !important;
    position: fixed;   /* was: absolute — see main rule above */
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    min-width: 180px;
    padding: 8px;
    border: 1px solid #e9ecef;
}

/* Make sure the ribbon group has position relative for proper dropdown positioning */
.ribbon-group {
    position: relative;
}


/* ===== PowerPoint-style ribbon bar - end ===== */


/* ============================================
   RESIZE HANDLES - VISIBLE IN ARRANGE MODE
   ============================================ */

/* Position resize handles on the widget-body (the actual chart area) */
.arrange-mode .visual-widget .widget-body .ui-resizable-handle {
    position: absolute !important;
    z-index: 200 !important;
}

/* Corner handles - positioned on the widget-body corners */
.arrange-mode .visual-widget .widget-body .ui-resizable-se {
    bottom: -7px !important;
    right: -7px !important;
    cursor: se-resize !important;
}

.arrange-mode .visual-widget .widget-body .ui-resizable-sw {
    bottom: -7px !important;
    left: -7px !important;
    cursor: sw-resize !important;
}

.arrange-mode .visual-widget .widget-body .ui-resizable-ne {
    top: -7px !important;
    right: -7px !important;
    cursor: ne-resize !important;
}

.arrange-mode .visual-widget .widget-body .ui-resizable-nw {
    top: -7px !important;
    left: -7px !important;
    cursor: nw-resize !important;
}

/* Make handles visible and styled - only for charts */
.arrange-mode .visual-widget:not([data-widget-type="summaryCard"]):not([data-widget-type="tileCard"]) .widget-body .ui-resizable-handle {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--accent-color) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Show handles when the widget is selected in arrange mode */
.arrange-mode .visual-widget.selected .widget-body .ui-resizable-handle {
    opacity: 1 !important;
}

/* Show handles on hover in arrange mode */
.arrange-mode .visual-widget:hover .widget-body .ui-resizable-handle {
    opacity: 0.5 !important;
}

.arrange-mode .visual-widget:hover .widget-body .ui-resizable-handle:hover {
    opacity: 1 !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 12px rgba(240, 176, 93, 0.6) !important;
}

/* Hide resize handles for summary cards and tile cards */
.visual-widget[data-widget-type="summaryCard"] .widget-body .ui-resizable-handle,
.visual-widget[data-widget-type="tileCard"] .widget-body .ui-resizable-handle {
    display: none !important;
}

/* Show the dashed outline on the selected chart's widget-body */
.arrange-mode .visual-widget.selected:not([data-widget-type="summaryCard"]):not([data-widget-type="tileCard"]) .widget-body {
    outline: 2px dashed var(--accent-color) !important;
    outline-offset: 2px !important;
}

/* Ensure the widget-body has position relative for handle positioning */
.arrange-mode .visual-widget .widget-body {
    position: relative !important;
}

/* Make the resize handles larger and more visible on the selected item */
.arrange-mode .visual-widget.selected .widget-body .ui-resizable-handle {
    width: 14px !important;
    height: 14px !important;
}

/* Add a subtle glow effect on hover for the selected item */
.arrange-mode .visual-widget.selected .widget-body .ui-resizable-handle:hover {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(240, 176, 93, 0.6) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .arrange-mode .visual-widget .widget-body .ui-resizable-handle {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ===== RESIZE HANDLES - VISIBLE IN ARRANGE MODE - end ===== */


/* ============================================
   ARRANGE MODE - DRAG AND DROP STYLES
   ============================================ */

/* Make widgets draggable in arrange mode */
.arrange-mode .grid-stack-item {
    cursor: grab !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    z-index: 1;
}

.arrange-mode .grid-stack-item:hover {
    z-index: 10;
}

/* Ghost effect when dragging */
.arrange-mode .grid-stack-item.drag-ghost {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    z-index: 1000 !important;
    cursor: grabbing !important;
}

/* Drop target highlight */
.arrange-mode .grid-stack-item.drag-over {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
    background: rgba(240, 176, 93, 0.08);
    transform: scale(1.02);
    border-radius: 8px;
    z-index: 5;
}

/* Drag handle area - make the whole widget draggable */
.arrange-mode .grid-stack-item .visual-widget {
    cursor: grab !important;
}

.arrange-mode .grid-stack-item .visual-widget:active {
    cursor: grabbing !important;
}

/* Prevent dragging from clicking buttons */
.arrange-mode .widget-action-btn,
.arrange-mode .widget-actions button {
    cursor: pointer !important;
}

/* Selection indicator in arrange mode */
.arrange-mode .visual-widget.selected {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    box-shadow: 0 0 20px rgba(240, 176, 93, 0.3);
    z-index: 50;
}

/* Resize handle indicator - visible on selected charts only */
.arrange-mode .visual-widget.selected .ui-resizable-handle {
    opacity: 1 !important;
    background: var(--accent-color) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Smooth transitions for grid items */
.grid-stack-item {
    transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.arrange-mode .grid-stack-item {
    transition: left 0.15s ease, top 0.15s ease, width 0.15s ease, height 0.15s ease;
}

/* Hide resize handles for tile and summary cards */
.visual-widget[data-widget-type="tileCard"] .ui-resizable-handle,
.visual-widget[data-widget-type="summaryCard"] .ui-resizable-handle {
    display: none !important;
}

/* Order badge in arrange mode */
.arrange-mode .widget-order-badge {
    display: block !important;
    position: absolute;
    top: -8px;
    left: -8px;
    background: var(--accent-color);
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    z-index: 20;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Responsive adjustments for arrange mode */
@media (max-width: 768px) {
    .arrange-mode .grid-stack-item {
        cursor: grab !important;
    }
    
    .arrange-mode .visual-widget.selected .ui-resizable-handle {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ===== ARRANGE MODE - DRAG AND DROP STYLES - end ===== */



/* ============================================
   DASHBOARD TOGGLE SWITCH - Canvas Header
   ============================================ */

.dashboard-toggle-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f5;
    padding: 4px 12px 4px 14px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    height: 34px;
    margin-right: 4px;
}

.dashboard-toggle-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #adb5bd;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
}

.dashboard-toggle-label.active {
    color: var(--accent-color, #f0b05d);
}

/* Toggle Switch */
.toggle-switch-dashboard {
    width: 34px;
    height: 18px;
    background: #ced4da;
    border-radius: 9px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.toggle-switch-dashboard.active {
    background: var(--accent-color, #f0b05d);
}

.toggle-slider-dashboard {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch-dashboard.active .toggle-slider-dashboard {
    transform: translateX(16px);
}

/* Hover effect */
.toggle-switch-dashboard:hover {
    opacity: 0.9;
}

/* Responsive - hide label on small screens */
@media (max-width: 768px) {
    .dashboard-toggle-container {
        padding: 4px 8px;
    }
    
    .dashboard-toggle-label {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .dashboard-toggle-container {
        padding: 3px 6px;
        gap: 4px;
    }
    
    .dashboard-toggle-label {
        font-size: 0.5rem;
    }
    
    .toggle-switch-dashboard {
        width: 28px;
        height: 16px;
    }
    
    .toggle-slider-dashboard {
        width: 12px;
        height: 12px;
        top: 2px;
        left: 2px;
    }
    
    .toggle-switch-dashboard.active .toggle-slider-dashboard {
        transform: translateX(12px);
    }
}
/* ===== DASHBOARD NAVIGATION BUTTON - end ===== */


/* ============================================
   DASHBOARD MODE STYLES - POWERPOINT SLIDESHOW
   ============================================ */

/* Full screen dashboard mode - hides ALL UI elements */
.dashboard-mode .report-builder-header,
.dashboard-mode .report-toolbar,
.dashboard-mode #ribbonBar,
.dashboard-mode #slidePanel,
.dashboard-mode .canvas-header,
.dashboard-mode #savedCanvasesSection,
.dashboard-mode #toggleDataPanelBtn,
.dashboard-mode #addVisualBtn,
.dashboard-mode #saveChartBtn,
.dashboard-mode #saveDashboardBtn,
.dashboard-mode #newDashboardBtn,
.dashboard-mode #colorPaletteContainer,
.dashboard-mode #settingsContainer,
.dashboard-mode #equationsContainer,
.dashboard-mode .ribbon-group-filters,
.dashboard-mode #selectedFieldsChips,
.dashboard-mode #selectedVisualsChips,
.dashboard-mode .dashboard-toggle-container,
.dashboard-mode .canvas-actions {
    display: none !important;
}

.dashboard-mode .slide-workspace {
    padding: 0 !important;
    background: transparent !important;
    gap: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.dashboard-mode .slide-stage {
    padding: 0 !important;
    overflow: hidden !important;
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* ============================================
   DASHBOARD SLIDESHOW - POWERPOINT STYLE
   ============================================ */

.dashboard-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
    background: #f0f2f5;
    opacity: 0;
    transition: opacity 0.8s ease;
    overflow: hidden;
}

.dashboard-slide.active {
    display: flex;
    opacity: 1;
}

/* Slide header with canvas name */
.dashboard-slide-header {
    width: 100%;
    max-width: 1400px;
    padding: 10px 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.dashboard-slide-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-color, #244855);
}

.dashboard-slide-header .slide-counter {
    font-size: 0.8rem;
    color: #6c757d;
    background: #f1f3f5;
    padding: 4px 14px;
    border-radius: 20px;
}

.dashboard-slide-header .widget-count {
    font-size: 0.7rem;
    color: #6c757d;
}

/* ===== FIXED: Widget grid container - FLEX with exact sizes ===== */
.dashboard-slide-grid {
    width: 100%;
    max-width: 1400px;
    flex: 1;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

/* ===== FIXED: Widget items - EXACT size, no auto-sizing ===== */
.dashboard-widget-item {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Size is set inline via JS for precision */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Only charts get white background and border */
.dashboard-widget-item:not(:has(.summary-card)):not(:has(.tile-card)) {
    background: white;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Cards have NO wrapper - they render directly with transparent background */
.dashboard-widget-item:has(.summary-card),
.dashboard-widget-item:has(.tile-card) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

.dashboard-widget-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.dashboard-widget-item .widget-header {
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-widget-item .widget-body {
    padding: 0.5rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    overflow: hidden;
}

.dashboard-widget-item .widget-body canvas {
    max-height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* ===== FIXED: Ensure cards fill their containers ===== */
.dashboard-widget-item #widget-\\d+ {
    width: 100% !important;
    height: 100% !important;
    min-height: 80px !important;
}

/* Progress bar for slideshow */
.dashboard-progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.08);
    z-index: 99999;
}

.dashboard-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color, #f0b05d), var(--primary-color, #244855));
    width: 0%;
    transition: width 5s linear;
    border-radius: 0 2px 2px 0;
}

/* Dashboard Mode Indicator - floating exit button */
.dashboard-mode-indicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.75rem;
    z-index: 99999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dashboard-mode-indicator:hover {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    transform: scale(1.02);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.dashboard-mode-indicator .icon {
    margin-right: 8px;
}

/* Hide GridStack layout in dashboard mode - we use custom grid */
.dashboard-mode .grid-stack {
    min-height: unset !important;
    height: 100% !important;
}

.dashboard-mode .grid-stack-item {
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
}

.dashboard-mode .grid-stack-item.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Widgets should be full height in dashboard mode */
.dashboard-mode .grid-stack-item-content {
    height: 100% !important;
    min-height: unset !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-mode .visual-widget {
    height: 100% !important;
    min-height: unset !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-mode .widget-body {
    height: 100% !important;
    min-height: unset !important;
    padding: 0 !important;
}

.dashboard-mode .widget-body canvas {
    max-height: 100% !important;
    height: 100% !important;
    width: 100% !important;
}

/* Hide notifications in dashboard mode */
.dashboard-mode .notifications-btn {
    display: none !important;
}

.dashboard-mode .notifications-panel {
    display: none !important;
}

.dashboard-mode .notifications-overlay {
    display: none !important;
}

/* Hide any floating modals in dashboard mode */
.dashboard-mode .modal-overlay {
    display: none !important;
}

.dashboard-mode .config-overlay {
    display: none !important;
}

.dashboard-mode .data-source-overlay {
    display: none !important;
}

.dashboard-mode .data-source-panel {
    display: none !important;
}

.dashboard-mode .visual-config-panel {
    display: none !important;
}

/* Dashboard mode main container */
.dashboard-mode #dashboardCanvas {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #f0f2f5 !important;
    position: relative !important;
    overflow: hidden !important;
}

.dashboard-mode #canvasGrid {
    min-height: 100vh !important;
    height: 100vh !important;
    flex: 1 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.dashboard-mode main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: #f0f2f5 !important;
}

.dashboard-mode .report-builder {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    background: #f0f2f5 !important;
}

.dashboard-mode header {
    display: none !important;
}

.dashboard-mode footer {
    display: none !important;
}

.dashboard-mode .menu-toggle {
    display: none !important;
}

.dashboard-mode .sidebar {
    display: none !important;
}

.dashboard-mode .sidebar-overlay {
    display: none !important;
}

/* ===== RESPONSIVE: On smaller screens, allow wrapping but keep sizes ===== */
@media (max-width: 992px) {
    .dashboard-slide-grid {
        gap: 10px;
        padding: 8px;
        justify-content: flex-start;
    }
    
    .dashboard-widget-item {
        /* Keep exact sizes, just allow more wrapping */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
}

@media (max-width: 768px) {
    .dashboard-slide {
        padding: 10px;
    }
    
    .dashboard-slide-grid {
        gap: 8px;
        padding: 6px;
        justify-content: center;
    }
    
    .dashboard-slide-header {
        padding: 8px 14px;
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .dashboard-slide-header h2 {
        font-size: 1rem;
    }
    
    .dashboard-slide-header .slide-counter {
        font-size: 0.7rem;
        padding: 3px 10px;
    }
    
    .dashboard-widget-item .widget-body {
        min-height: 120px;
        padding: 0.5rem;
    }
    
    .dashboard-widget-item .widget-body canvas {
        max-height: 120px !important;
    }
    
    .dashboard-mode-indicator {
        bottom: 16px;
        right: 16px;
        padding: 6px 14px;
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .dashboard-slide {
        padding: 5px;
    }
    
    .dashboard-slide-grid {
        gap: 6px;
        padding: 4px;
        justify-content: center;
    }
    
    .dashboard-slide-header {
        padding: 6px 10px;
        margin-bottom: 6px;
    }
    
    .dashboard-slide-header h2 {
        font-size: 0.85rem;
    }
    
    .dashboard-slide-header .slide-counter {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    
    .dashboard-slide-header .widget-count {
        font-size: 0.6rem;
    }
    
    .dashboard-widget-item .widget-body {
        min-height: 100px;
        padding: 0.25rem;
    }
    
    .dashboard-widget-item .widget-body canvas {
        max-height: 100px !important;
    }
    
    .dashboard-mode-indicator {
        bottom: 12px;
        right: 12px;
        padding: 5px 12px;
        font-size: 0.6rem;
    }
}

/* ============================================
   DASHBOARD MODE - REMOVE WHITE BACKGROUND ON CARDS
   ============================================ */

/* In dashboard mode, cards should have NO wrapper - they render directly */
.dashboard-mode .dashboard-slide-grid .visual-widget[data-widget-type="summaryCard"],
.dashboard-mode .dashboard-slide-grid .visual-widget[data-widget-type="tileCard"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove any white background from card containers in dashboard mode */
.dashboard-mode .dashboard-widget-item:has(.summary-card),
.dashboard-mode .dashboard-widget-item:has(.tile-card) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

/* Ensure cards fill their grid space properly */
.dashboard-mode #widget-\\d+ {
    width: 100% !important;
    height: 100% !important;
    min-height: 80px !important;
}

/* Regular charts still have white background */
.dashboard-mode .dashboard-widget-item:not(:has(.summary-card)):not(:has(.tile-card)) {
    background: white !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* ===== DASHBOARD MODE STYLES - end ===== */



/* ============================================
   SLIDE DURATION DROPDOWN STYLES
   ============================================ */

/* Style the slide duration dropdown in the canvas header */
.canvas-actions .dashboard-toggle-container select#slideDurationSelect {
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 0.7rem !important;
    min-width: 55px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background: white !important;
    color: #495057 !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

.canvas-actions .dashboard-toggle-container select#slideDurationSelect:hover {
    border-color: var(--accent-color) !important;
}

.canvas-actions .dashboard-toggle-container select#slideDurationSelect:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(240, 176, 93, 0.2) !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .canvas-actions .dashboard-toggle-container select#slideDurationSelect {
        min-width: 45px !important;
        font-size: 0.6rem !important;
        height: 22px !important;
        padding: 0 4px !important;
    }
    
    .canvas-actions .dashboard-toggle-container span:last-child {
        font-size: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .canvas-actions .dashboard-toggle-container select#slideDurationSelect {
        min-width: 40px !important;
        font-size: 0.5rem !important;
        height: 20px !important;
        padding: 0 3px !important;
    }
}
/* ===== SLIDE DURATION DROPDOWN STYLES - end ===== */

/* ============================================
   FIX: REMOVE BACKGROUND PANEL FROM SUMMARY CARDS
   Applies to: .grid-stack-item-content, .visual-widget, and inner wrappers
   ============================================ */

/* Remove white background, border, and shadow from the GridStack wrapper
   when it contains a summary card or tile card */
.grid-stack-item:has(.visual-widget[data-widget-type="summaryCard"]) .grid-stack-item-content,
.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"]) .grid-stack-item-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Make the visual-widget itself fully transparent for cards */
.visual-widget[data-widget-type="summaryCard"],
.visual-widget[data-widget-type="tileCard"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
}

/* Remove padding from the outer grid-stack-item for card types */
.grid-stack-item:has(.visual-widget[data-widget-type="summaryCard"]),
.grid-stack-item:has(.visual-widget[data-widget-type="tileCard"]) {
    padding: 4px !important;
    background: transparent !important;
    border: none !important;
}


/* ============================================
   FIX: SUMMARY CARD ROW WIDTH IN EDITING CANVAS
   Forces 2 summary cards per row (each 50% width),
   matching the fullscreen dashboard layout.
   Applies ONLY to the editing canvas (#canvasGrid),
   never to .dashboard-slide fullscreen slides.
   ============================================ */

#canvasGrid .grid-stack-item.visual-widget[data-widget-type="summaryCard"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) {
    width: calc(50% - 12px) !important;      /* 50% minus half the gap + margins */
    min-width: 0 !important;
    max-width: calc(50% - 12px) !important;
    box-sizing: border-box !important;
    margin: 6px !important;                  /* was 3px — reduces edge crowding */
    padding: 0 !important;
    float: left !important;
    display: block !important;
    position: static !important;
}

/* Same fix for tile cards so mixed rows line up cleanly */
#canvasGrid .grid-stack-item.visual-widget[data-widget-type="tileCard"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) {
    margin: 6px !important;
    box-sizing: border-box !important;
}

/* The inner widgets must fill the new width entirely */
#canvasGrid .grid-stack-item.visual-widget[data-widget-type="summaryCard"] .widget-body,
#canvasGrid .grid-stack-item.visual-widget[data-widget-type="summaryCard"] .widget-body > div,
#canvasGrid .grid-stack-item.visual-widget[data-widget-type="summaryCard"] .summary-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Also force the outer GridStack content wrapper to stretch */
#canvasGrid .grid-stack-item:has(.visual-widget[data-widget-type="summaryCard"]) .grid-stack-item-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ============================================
   FIX: SUMMARY CARD CHARTS IN FULLSCREEN DASHBOARD
   Remove the editor-time height caps so chart containers
   can grow to their real size in the slideshow.
   ============================================ */

/* In fullscreen dashboard mode ONLY, don't cap the chart container height */
.dashboard-mode .visual-widget[data-widget-type="summaryCard"] .widget-body > div,
.dashboard-mode .visual-widget[data-widget-type="summaryCard"] .summary-card > div > div:last-child {
    min-height: unset !important;
    max-height: none !important;
    height: 100% !important;
}

/* The canvas itself must not be clamped either */
.dashboard-mode .visual-widget[data-widget-type="summaryCard"] canvas {
    min-height: unset !important;
    max-height: none !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Also in the fullscreen dashboard, let the .dashboard-widget-item grow to the
   exact size we set inline via JS — the editor rules were forcing 180px tall cells */
.dashboard-mode .dashboard-widget-item {
    height: auto !important;
    min-height: unset !important;
}

.dashboard-mode .dashboard-widget-item:has(.summary-card) > div,
.dashboard-mode .dashboard-widget-item:has(.tile-card) > div {
    height: 100% !important;
    min-height: unset !important;
    width: 100% !important;
}

/* Ensure the summary-card chart canvas fills its container in fullscreen */
.dashboard-mode .dashboard-widget-item canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: block !important;
}

.dashboard-mode .visual-widget[data-widget-type="summaryCard"] .summary-card > div {
    min-height: 0 !important;
    max-height: none !important;
}

/* ===== REMOVE BACKGROUND PANEL FROM SUMMARY CARDS - end ===== */



/* ============================================
   HORIZONTAL PAGE SELECTOR (Save to Existing Canvas)
   ============================================ */

.page-selector-horizontal {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 4px 14px 4px;
    scroll-behavior: smooth;
    /* Hide default scrollbar look on WebKit but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) transparent;
}

.page-selector-horizontal::-webkit-scrollbar {
    height: 6px;
}

.page-selector-horizontal::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.page-selector-horizontal::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

.page-selector-horizontal::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Individual page thumbnail */
.page-thumb-horizontal {
    position: relative;
    flex: 0 0 auto;
    width: 110px;
    height: 62px;                    /* 16:9 aspect ratio */
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;
    overflow: hidden;
}

/* Subtle diagonal sheen on hover — professional feel */
.page-thumb-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(240, 176, 93, 0) 0%,
        rgba(240, 176, 93, 0.15) 50%,
        rgba(240, 176, 93, 0) 100%
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

.page-thumb-horizontal:hover::before {
    left: 100%;
}

/* HOVER — lift, scale, glow */
.page-thumb-horizontal:hover {
    transform: translateY(-4px) scale(1.04);
    border-color: var(--accent-color);
    box-shadow: 0 8px 20px rgba(240, 176, 93, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.08);
    background: #fffdf8;
}

/* SELECTED — keeps the glow but stays flat */
.page-thumb-horizontal.selected {
    border-color: var(--accent-color);
    background: rgba(240, 176, 93, 0.12);
    box-shadow: 0 0 0 3px rgba(240, 176, 93, 0.25),
                0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-thumb-horizontal.selected::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.75rem;
    color: white;
    background: var(--accent-color);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    animation: pageThumbCheckIn 0.3s ease-out;
}

@keyframes pageThumbCheckIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Page number badge */
.page-thumb-horizontal .page-thumb-number {
    position: absolute;
    bottom: 3px;
    left: 6px;
    font-size: 0.6rem;
    color: var(--gray-500);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 5px;
    border-radius: 8px;
    pointer-events: none;
}

/* Page name label */
.page-thumb-horizontal .page-thumb-name {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--gray-700);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
    transition: color 0.25s ease;
}

.page-thumb-horizontal:hover .page-thumb-name {
    color: var(--primary-color);
}

.page-thumb-horizontal.selected .page-thumb-name {
    color: var(--primary-color);
    font-weight: 600;
}

/* Widget count indicator (small) */
.page-thumb-horizontal .page-thumb-widget-count {
    font-size: 0.55rem;
    color: var(--gray-500);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Empty-state message inside the selector */
.page-selector-horizontal .page-selector-empty {
    color: var(--gray-400);
    font-size: 0.75rem;
    padding: 14px 0;
    width: 100%;
    text-align: center;
    font-style: italic;
}

/* Ensure the horizontal page selector is always scrollable and clickable */
#saveCanvasExistingTab .page-selector-horizontal {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    padding-bottom: 16px !important;
    /* give a little more height so the scrollbar doesn't overlap thumbnails */
}

#saveCanvasExistingTab .page-thumb-horizontal {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none;
}

/* Ensure the modal body can scroll if the existing tab content grows taller than the modal */
#saveCanvasModal .modal-body {
    overflow-y: auto !important;
    max-height: 55vh !important;
}

/* Make sure nothing inside the existing tab accidentally eats clicks */
#saveCanvasExistingTab * {
    pointer-events: auto;
}

/* ===== HORIZONTAL PAGE SELECTOR (Save to Existing Canvas) - end ===== */


/* ============================================
   AUTO-HIDE HEADER IN FULLSCREEN DASHBOARD
   Header hides after 5s of no mouse movement,
   reappears on any mouse movement.
   Visuals smoothly expand into the freed space.
   ============================================ */

/* The slide itself becomes the positioning context for the floating header */
.dashboard-slide {
    position: absolute;
}

/* Header floats OVER the grid instead of pushing it down.
   The grid's natural top edge stays at the top of the slide,
   and we control spacing via padding on the grid (see below). */
.dashboard-slide-header {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
    max-width: 1400px !important;
    margin: 0 !important;
    z-index: 50 !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    pointer-events: auto;
}

/* When idle, fade & slide the header up out of view */
body.dashboard-idle .dashboard-slide-header {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-120%) !important;
    pointer-events: none !important;
}

/* The grid keeps constant horizontal/bottom padding, and its top
   padding shrinks when idle so visuals slide up into the header space. */
.dashboard-slide-grid {
    padding: 100px 16px 10px 16px !important;
    transition: padding-top 0.4s ease !important;
    will-change: padding-top;
}

body.dashboard-idle .dashboard-slide-grid {
    padding-top: 20px !important;
}

/* Also dim the exit button when idle (hover restores it fully) */
body.dashboard-idle .dashboard-mode-indicator {
    opacity: 0.15 !important;
    transform: scale(0.9) !important;
    transition: all 0.4s ease !important;
}

body.dashboard-idle .dashboard-mode-indicator:hover {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ===== AUTO-HIDE HEADER IN FULLSCREEN DASHBOARD - end ===== */

/* ============================================================
   PIE/DOUGHNUT CANVAS FIT
   
   The generic "canvas" rules earlier in this stylesheet use
   height: auto !important, which makes Chart.js's internally-sized
   buffer mismatch its CSS box. For pie/doughnut charts that means
   the circle is drawn at the buffer's size while the CSS box is a
   different height — and since .widget-body is overflow: visible,
   the extra drawing spills out past the card.
   
   We scope this to ONLY pie/doughnut widgets (data-widget-type
   attribute), so no other chart is affected. The inline styles
   written from renderWidgetChart still take precedence over this
   rule — this just prevents the generic `canvas` rule from winning
   when there's no inline override in place.
   ============================================================ */
.visual-widget[data-widget-type="pie"] .widget-body canvas,
.visual-widget[data-widget-type="doughnut"] .widget-body canvas {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}
/* ===== PIE/DOUGHNUT CANVAS FIT - end ===== */

/* ============================================================
   NUCLEAR FIX: Hard-cap pie/doughnut canvas size
   
   Every previous attempt tried to make the container force the
   canvas to fit. Something in the layout pipeline kept winning
   that tug-of-war, so the canvas ended up bigger than the card.
   
   This rule takes the opposite approach: it caps the canvas to
   a FIXED MAXIMUM PIXEL SIZE (200×200) that is small enough to
   fit inside any card we have, regardless of card width/height.
   It cannot overflow because it physically cannot be larger
   than 200px in either direction.
   
   Scoped ONLY to pie/doughnut widgets via data-widget-type,
   so no other chart type is affected. Fullscreen mode uses a
   different wrapper (.dashboard-widget-item) so it's untouched.
   ============================================================ */
.visual-widget[data-widget-type="pie"] .widget-body,
.visual-widget[data-widget-type="doughnut"] .widget-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;   /* belt-and-suspenders: even if the
                                      canvas were somehow bigger, the
                                      container clips it instead of
                                      letting it bleed out */
}

.visual-widget[data-widget-type="pie"] .widget-body canvas,
.visual-widget[data-widget-type="doughnut"] .widget-body canvas {
    width: 450px !important;
    height: 450px !important;
    max-width: 450px !important;
    max-height: 450px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    /* Let the browser shrink it further if the card is smaller
       than 350px, but never let it grow past 350px. */
    flex: 0 0 auto !important;

    /* ============================================================
       LIFT THE CHART UP
       The widget-body is a centered flexbox, so by default the
       canvas sits in the middle. This negative margin-top pulls
       it upward without affecting anything else.
       Tweak the -35px value to move it up/down:
         more negative  → moves further up
         less negative  → moves back toward center
         positive       → moves down
       ============================================================ */
    margin-top: -80px !important;
}