/* Styles for "AI Dashboard Generator Tool" (/ai-dashboard-generator-app), moved out of the page content. Edit here, not in the page. */
.db-tool{
			--bg-color: #ffffff;
			--card-bg: #f8f9fa;
			--border-color: #e5e5e5;
			--text-color: #202123;
			--secondary-text: #6e6e80;
			--accent-color: #5b6af0;
			--accent-hover: #105ca3;
			
			--accent-gradient: linear-gradient(90deg, #5b6af0 0%, #3ca9ff 50%, #17d9ff 100%);
		}
.db-tool{
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            
            display: flex;
            flex-direction: column;
            margin: 0;
        }
.db-tool .chat-container{
            max-width: 960px;
            width: 100%;
            margin: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
margin-top:-80px;
        }
.db-tool .hero-title{
            font-size: 2.2rem;
            font-weight: 600;
            margin-bottom: 2rem;
            text-align: center;
            color: var(--text-color);
        }
.db-tool .mode-toggle-wrap{
            background-color: var(--card-bg);
            border-radius: 50px;
            padding: 4px;
            display: inline-flex;
            gap: 4px;
            border: 1px solid var(--border-color);
        }
.db-tool .mode-pill{
			border: none;
			background-color: transparent;
			color: var(--secondary-text);
			border-radius: 50px;
			padding: 8px 20px;
			font-weight: 600;
			font-size: 0.95rem;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			transition: all 0.25s ease;
			cursor: pointer;
		}
.db-tool .mode-pill i{
			font-size: 0.95rem;
		}
.db-tool .mode-pill:hover{
			color: var(--accent-color);
		}
.db-tool .mode-pill.active{
			background: var(--accent-gradient);
			color: #ffffff;
			box-shadow: 0 4px 12px rgba(60, 169, 255, 0.35);
		}
.db-tool .mode-pill.active:hover{
			color: #ffffff;
			opacity: 0.92;
			transform: translateY(-1px);
		}
.db-tool .mode-pill.active:active{
			transform: translateY(0);
		}
.db-tool .dropzone-container{
            width: 100%;
            background-color: var(--card-bg);
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
.db-tool .dropzone-container:hover, .db-tool .dropzone-container.dragover{
            border-color: var(--accent-color);
            background-color: rgba(68, 133, 194, 0.04);
        }
.db-tool .dropzone-icon{
            font-size: 48px;
            color: var(--accent-color);
            margin-bottom: 15px;
        }
.db-tool .file-input{
            display: none;
        }
.db-tool .status-card{
            display: none;
            width: 100%;
            margin-top: 20px;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 15px 20px;
        }
.db-tool .spinner-border{
            width: 1.2rem;
            height: 1.2rem;
            border-width: 0.15em;
        }
.db-tool .prompt-bar{
            width: 100%;
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 50px;
            padding: 8px 12px 8px 8px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
.db-tool .suggested-prompts{ width: 100%; margin-top: 12px; text-align: left; }
.db-tool .suggested-prompts .sp-label{ font-size: 0.8rem; font-weight: 600; color: var(--text-color); opacity: 0.7; margin-bottom: 6px; }
.db-tool .suggested-prompts .sp-list{ display: flex; flex-wrap: wrap; gap: 8px; }
.db-tool .suggested-prompts .sp-chip{
            background-color: #fff8d6; color: #3a3a3a; border: 1px solid #f0dc8a;
            border-radius: 20px; padding: 6px 14px; font-size: 0.82rem; line-height: 1.3; cursor: pointer;
            text-align: left; transition: background-color .15s, border-color .15s, box-shadow .15s;
        }
.db-tool .suggested-prompts .sp-chip:hover{ background-color: #e3f0ff; border-color: #8ebcf0; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.db-tool .suggested-prompts .sp-chip i{ margin-right: 6px; color: var(--accent-color); }
.db-tool .prompt-input{
            background: transparent;
            border: none;
            color: var(--text-color);
            width: 100%;
            outline: none;
        }
.db-tool .prompt-input::placeholder{
            color: var(--secondary-text);
        }
.db-tool .upload-pill{
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 50px;
            padding: 7px 16px;
            color: var(--secondary-text);
            font-size: 0.88rem;
            font-weight: 600;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }
.db-tool .upload-pill:hover{
            color: var(--accent-color);
            border-color: var(--accent-color);
        }
.db-tool .upload-pill::after{
            margin-left: 6px;
        }
.db-tool .btn-upload-icon{
            background: transparent;
            border: none;
            color: var(--secondary-text);
            cursor: pointer;
            font-size: 1.2rem;
            transition: color 0.2s;
        }
.db-tool .btn-upload-icon:hover{
            color: var(--accent-color);
        }
.db-tool .generate-pill{
            background-color: var(--accent-color);
            color: #ffffff;
            border: none;
            border-radius: 50px;
            padding: 8px 18px;
            font-weight: 700;
            font-size: 0.9rem;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s ease;
        }
.db-tool .generate-pill:hover{
            background-color: var(--accent-hover);
            color: #ffffff;
        }
.db-tool .supported-formats{
            color: var(--secondary-text);
            font-size: 0.85rem;
            margin-top: 10px;
        }
.db-tool .dashboard-actions{
            display: flex; 
            width: 100%;
            margin-top: 25px;
            gap: 10px;
            justify-content: center; 
        }
.db-tool .action-pill{
            border-radius: 50px;
            padding: 7px 16px;
            font-weight: 600;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid var(--border-color);
            background-color: #ffffff;
            color: var(--secondary-text);
            transition: all 0.2s ease;
			height:30px;
        }
.db-tool .action-pill i{
            font-size: 0.85rem;
        }
.db-tool .action-pill.btn-edit:hover{
            color: var(--accent-color);
            border-color: var(--accent-color);
        }
.db-tool .action-pill.btn-download{
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: #ffffff;
        }
.db-tool .action-pill.btn-download:hover{
            background-color: var(--accent-hover);
            border-color: var(--accent-hover);
            color: #ffffff;
        }
.db-tool .action-pill.btn-clear:hover{
            color: #d14232;
            border-color: #d14232;
        }
.db-tool .action-pill.btn-theme:hover{
            color: #71DD37;
            border-color: #71DD37;
        }
.db-tool .action-pill.btn-sample:hover{
            color: #198754;
            border-color: #198754;
        }
.db-tool #dashboard-container{
			width: 100%;
                        height:0;
			 background-color: #ffffff;  
			border-radius: 8px;
			padding: 0px;
			margin:0;
			padding-top:20px;
		}
.db-tool .editor-iframe{
            width: 100%;
            height: 75vh;
            border: none;
        }
.db-tool .theme-icon-btn{
			width: 34px;
			height: 34px;
			border-radius: 50% 50%;

			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border: none;
			transition: background-color 0.2s ease;
		}
.db-tool .theme-icon-btn i{
			color: #899cb4;
			font-size: 1rem;
		}
.db-tool .theme-icon-btn:hover{
			background-color: rgba(137, 156, 180, 0.28);
		}
.db-tool .fa-icon{color:#fffff;-webkit-text-stroke: 1px #899cb4;}
.db-tool #insights-container{
			width: 100%;
			margin: 20px 0 0;
			padding: 24px 28px;
			display: none;
			flex-direction: column;
			gap: 20px;
			background-color: #f4f8fb;
			border-radius: 14px;
			box-sizing: border-box;
		}
.db-tool .insights-heading{
			font-weight: 700;
			font-size: 1.05rem;
			color: var(--text-color);
		}
.db-tool .insight-row{
			display: flex;
			align-items: flex-start;
			gap: 12px;
		}
.db-tool .insight-row .insight-icon{
			flex-shrink: 0;
			font-size: 1rem;
			line-height: 1.65;
			width: 18px;
			text-align: center;
		}
.db-tool .insight-row.type-highlight  .insight-icon{ color: #2f6fed; }
.db-tool .insight-row.type-total      .insight-icon{ color: #6b7280; }
.db-tool .insight-row.type-comparison .insight-icon{ color: #374151; }
.db-tool .insight-row .insight-text{
			font-size: 0.95rem;
			line-height: 1.65;
			color: #1f2328;
		}
.db-tool .insight-text .hl{ font-weight: 700; }
.db-tool .insight-text .hl-blue{ color: #2f6fed; }
.db-tool .insight-text .hl-green{ color: #1a7f37; }
.db-tool .insight-text .hl-purple{ color: #7c3aed; }
.db-tool .action-pill.btn-insights.active{
			background-color: var(--accent-color);
			border-color: var(--accent-color);
			color: #ffffff;
		}
.db-tool .bootstrap-select .dropdown-menu.inner > li{
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.db-tool .bootstrap-select .dropdown-menu.inner > li::before, .db-tool .bootstrap-select .dropdown-menu.inner > li::after{
    content: none !important;
    display: none !important;
}
.db-tool .bootstrap-select .dropdown-menu.inner > li > a.dropdown-item{
    margin: 0 !important;
    padding: 5px 12px !important;
    line-height: 1.5 !important;
}
.db-tool ul.dropdown-menu.inner.show{
    padding: 5px 0 !important;
    margin-left: 5px !important;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight: 300;
    color: #6b6a6a;
}
*/ For Select Picker */
.db-tool .ai-auto{
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g fill="black"><path d="M 400 10 C 400 75 420 95 485 95 C 420 95 400 115 400 180 C 400 115 380 95 315 95 C 380 95 400 75 400 10 Z"/><path d="M 110 330 C 110 395 130 415 195 415 C 130 415 110 435 110 500 C 110 435 90 415 25 415 C 90 415 110 395 110 330 Z"/><path d="M 134 165 A 12 12 0 0 0 122 177 L 122 361 A 12 12 0 0 0 134 373 L 370 373 A 12 12 0 0 0 370 349 L 146 349 L 146 177 A 12 12 0 0 0 134 165 Z"/><rect x="162" y="270" width="36" height="79" rx="10"/><rect x="224" y="210" width="36" height="139" rx="10"/><rect x="286" y="150" width="36" height="199" rx="10"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g fill="black"><path d="M 400 10 C 400 75 420 95 485 95 C 420 95 400 115 400 180 C 400 115 380 95 315 95 C 380 95 400 75 400 10 Z"/><path d="M 110 330 C 110 395 130 415 195 415 C 130 415 110 435 110 500 C 110 435 90 415 25 415 C 90 415 110 395 110 330 Z"/><path d="M 134 165 A 12 12 0 0 0 122 177 L 122 361 A 12 12 0 0 0 134 373 L 370 373 A 12 12 0 0 0 370 349 L 146 349 L 146 177 A 12 12 0 0 0 134 165 Z"/><rect x="162" y="270" width="36" height="79" rx="10"/><rect x="224" y="210" width="36" height="139" rx="10"/><rect x="286" y="150" width="36" height="199" rx="10"/></g></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.db-tool #fileUploadDropdown li::before, .db-tool #fileUploadDropdown li::after{
    content: none !important;
}
.db-tool #fileUploadDropdown .dropdown-item{
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-tool #fileUploadDropdown .dropdown-item i{
    width: 16px;
    text-align: center;
}
.db-tool .chat-mode{
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  background-color: currentColor; 
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g fill="black"><path d="M 112 64 C 76.65 64 48 92.65 48 128 L 48 304 C 48 339.35 76.65 368 112 368 L 160 368 L 160 436 C 160 449.25 174.34 457.53 185.8 450.8 L 273.33 368 L 400 368 C 435.35 368 464 339.35 464 304 L 464 128 C 464 92.65 435.35 64 400 64 Z M 112 104 L 400 104 C 413.25 104 424 114.75 424 128 L 424 304 C 424 317.25 413.25 328 400 328 L 262.67 328 L 200 386.8 L 200 348 A 20 20 0 0 0 180 328 L 112 328 C 98.75 328 88 317.25 88 304 L 88 128 C 88 114.75 98.75 104 112 104 Z"/><circle cx="176" cy="216" r="22"/><circle cx="256" cy="216" r="22"/><circle cx="336" cy="216" r="22"/></g></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g fill="black"><path d="M 112 64 C 76.65 64 48 92.65 48 128 L 48 304 C 48 339.35 76.65 368 112 368 L 160 368 L 160 436 C 160 449.25 174.34 457.53 185.8 450.8 L 273.33 368 L 400 368 C 435.35 368 464 339.35 464 304 L 464 128 C 464 92.65 435.35 64 400 64 Z M 112 104 L 400 104 C 413.25 104 424 114.75 424 128 L 424 304 C 424 317.25 413.25 328 400 328 L 262.67 328 L 200 386.8 L 200 348 A 20 20 0 0 0 180 328 L 112 328 C 98.75 328 88 317.25 88 304 L 88 128 C 88 114.75 98.75 104 112 104 Z"/><circle cx="176" cy="216" r="22"/><circle cx="256" cy="216" r="22"/><circle cx="336" cy="216" r="22"/></g></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.db-tool .modal{
    z-index: 1060 !important;
}
.db-tool .modal-backdrop{
    z-index: 1050 !important;
}