/*  */
.nav-link-text { font-size: 16px; }
.nav-link-text-secondary { font-size: 13px; font-weight: 400; }
.nav-link .svg-inline--fa { height: 1.25em!important; width: 1.25em!important; }

#add-lease-deals { text-decoration: none; }
#add-lease-deals svg, #generate-script-btn svg, #add-optional-prompts svg { height: 1em; transition: all .25s linear; }
#optional-prompts[data-options-visible="false"] { display: none !important; }

.platform-icons { height: 2em!important; width: 2em!important; }
.data-sources-dropdown { position: absolute; top: 100%; left: 0; width: 100%; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 5px; z-index: 10; }
.data-sources-dropdown ul { margin: 0; padding: 0; list-style: none; }
.data-sources-dropdown .list-group-item { padding: 8px 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.2s ease-in-out; }
.data-sources-dropdown .list-group-item:last-child { border-bottom: none; }
.data-sources-dropdown .list-group-item:hover { background: #f8f9fa;}
.badge-tooltip { cursor: pointer; }

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: #2c7be5!important; }
.choices .choices__list--multiple .choices__item { background-color: var(--falcon-success)!important; color: #fff!important; }

#reportPreviewModal { background-color: var(--falcon-body-bg); }

.toggle-wizard {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.toggle-wizard:hover {
    transform: scale(1.1);
}

/* Animation for expanding/collapsing */
.wizard-content {
    transition: all 0.3s ease-in-out;
}

/* Make sure the card header has a minimum height */
#card-report-wizard .card-header {
    min-height: 50px;
}

/* When collapsed, ensure the card takes minimal space */
#card-report-wizard.collapsed {
    max-height: 50px;
    overflow: hidden;
}

/* Fix for content when expanding after being collapsed */
#card-report-wizard .wizard-content.show {
    display: block !important;
}

/**
Modal REport
**/

.sticky-header th {
    position: sticky;
    top: 0;
    background-color: var(--falcon-200);
    z-index: 1;
}
.card-footer .pagination{ justify-content: center; }
.card-footer .pagination li {
display: inline-block;
margin: 0 8px;
}

.card-footer .pagination li a {
/* Use Bootstrap's button styles */
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #fff;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: #0d6efd;
border: 1px solid #0d6efd;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.card-footer .pagination li.active a {
background-color: #0a58ca;
border-color: #0a53be;
}

.card-footer .pagination li.disabled a {
color: #fff;
pointer-events: none;
background-color: #6c757d;
border-color: #6c757d;
opacity: 0.65;
}

/* Add special styling for prev/next buttons */
.card-footer .pagination li:first-child a,
.card-footer .pagination li:last-child a {
padding: 0.25rem 0.75rem;
}
/* Add this to your CSS or in a <style> tag in the head of your layout */
/* Grid Component Styling */

/* Grid Column Styling */
[data-component-type="grid-column"] {
min-height: 100px;
background-color: rgba(248, 249, 250, 0.5);
border: 1px dashed #dee2e6;
transition: all 0.2s ease;
}

[data-component-type="grid-column"]:empty {
display: flex;
justify-content: center;
align-items: center;
}

[data-component-type="grid-column"].drag-over {
background-color: rgba(13, 110, 253, 0.08);
border: 2px dashed #0d6efd;
}

/* Grid Children */
.grid-child {
position: relative;
margin-bottom: 0.75rem;
}

.grid-child:hover {
outline: 1px solid rgba(13, 110, 253, 0.3);
}

/* Add controls for grid children */
.grid-child:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background-color: rgba(13, 110, 253, 0.1);
cursor: grab;
z-index: 10;
}

/* Delete button for grid components */
.grid-child:hover .grid-child-delete {
display: flex;
}

.grid-child-delete {
display: none;
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
cursor: pointer;
z-index: 10;
color: #dc3545;
font-size: 12px;
}

.grid-child-delete:hover {
background-color: #dc3545;
color: white;
}

/* Empty grid notification */
.grid-empty {
color: #6c757d;
text-align: center;
padding: 1rem;
font-style: italic;
}

.metric-card {
position: relative;
transition: all 0.3s ease;
}

/* Add these styles to your application */
.metric-item {
cursor: pointer;
transition: all 0.2s;
}

.metric-item:hover {
background-color: rgba(44, 123, 229) !important;
transform: scale(1.02);
}

/* Animation for card highlight */
@keyframes card-highlight {
0% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0); }
50% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.5); }
100% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0); }
}

.highlight-animation {
animation: card-highlight 1s ease;
}


.selected-metric {
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.4);
position: relative;
z-index: 5;
}

.updated-card {
animation: highlight 1s ease;
}

@keyframes highlight {
0% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0); }
50% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.8); }
100% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0); }
}

/* Custom tooltip style */
.metric-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
white-space: nowrap;
}

.metric-tooltip.visible {
opacity: 1;
}

.metric-item {
position: relative;
}

/* Native Drag and Drop Styling */

/* Draggable metric items */
.metric-item[draggable="true"] {
cursor: grab;
transition: all 0.2s ease;
user-select: none;
position: relative;
z-index: 10;
}

.metric-item[draggable="true"]:active {
cursor: grabbing;
}

.metric-item[draggable="true"]:hover {
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.metric-item.dragging {
opacity: 0.7;
}

/* Droppable areas */
.droppable-area {
position: relative;
min-height: 40px;
transition: all 0.2s ease;
border-radius: 4px;
}

/* Add support for tab item droppable areas */
h5.droppable, 
.nav-link .droppable-area {
min-height: 25px;
}

.droppable-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
border-radius: 4px;
transition: all 0.2s ease;
}

.droppable-area.drag-over::before {
background-color: rgba(13, 110, 253, 0.08);
border: 2px dashed #0d6efd;
}

/* Empty droppable areas */
.droppable-area:empty::after {
content: 'Drag metric here';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #6c757d;
font-style: italic;
opacity: 0.6;
pointer-events: none;
}

/* Successful drop animation */
@keyframes dropPulse {
0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.drop-success {
animation: dropPulse 1s forwards;
}

/* Drag avatar (the element shown while dragging) */
.drag-avatar {
pointer-events: none;
position: absolute;
z-index: 1000;
opacity: 0.8;
transform: scale(0.85);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Metrics container */
#available-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem;
background-color: #f8f9fa;
border-radius: 4px;
border: 1px solid #dee2e6;
margin-bottom: 1rem;
}

/* Mobile touch support improvements */
@media (max-width: 768px) {
.metric-item[draggable="true"] {
    padding: 0.5rem 0.75rem;
}

.droppable-area {
    min-height: 50px;
}

.droppable-area::after {
    font-size: 0.875rem;
}
}

/* Add this to your CSS styles */

#component-preview-container {
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border: 1px solid #dee2e6;
transition: opacity 0.2s ease;
pointer-events: auto;
z-index: 1050;
background-color: #f8f9fa;
overflow: hidden;
}

#component-preview-container::before {
content: 'Preview';
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.05);
color: #6c757d;
font-size: 10px;
padding: 2px 5px;
text-align: center;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}

.component-preview {
padding: 20px 10px 10px 10px;
}

/* Animation for preview appearance */
@keyframes preview-fade-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}

#component-preview-container {
animation: preview-fade-in 0.2s ease-out;
}
.choices__inner { @apply border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:ring-opacity-50; }
    .choices__list--dropdown { @apply bg-white border border-gray-300 rounded-md shadow-md; }
    .choices__item { @apply text-gray-800 bg-gray-200 rounded px-2 py-1 m-1; }

/* Add this style for hidden metrics */
.metric-item.hidden {
display: none !important;
}

/* Tooltip styles */
.metric-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
white-space: nowrap;
}

.metric-tooltip.visible {
opacity: 1;
}

.metric-item {
position: relative;
}

/* Animation for newly created metrics */
@keyframes newMetricPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.new-metric { animation: newMetricPulse 0.5s; }
/* Custom metric badge styling */
.metric-item[data-custom="true"] { position: relative; }
.metric-item[data-custom="true"] .delete-custom-metric { opacity: 0; transition: opacity 0.2s; }
.metric-item[data-custom="true"]:hover .delete-custom-metric { opacity: 1;}
/* Field validation styles */
.field-error { border-color: #dc3545; }
.error-message { color: #dc3545; font-size: 0.8rem; margin-top: 2px; }
/* Collapsible section styles */
.section-header { cursor: pointer; position: relative; }
.collapsible-section { overflow: hidden; transition: max-height 0.3s ease-out; max-height: 0; }
.collapsible-section.show { max-height: 2000px; }                        
/* Search container */
.search-container { position: relative; margin-bottom: 0.75rem; }
/* Search input style */
.search-container input { padding-right: 2.5rem; background-color: #f8f9fa; border: 1px solid #dee2e6; transition: all 0.2s ease; }
.search-container input:focus { background-color: #fff; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }
.search-container input { padding-left: 30px; }

.editing-buttons-container {
    display: none;
}