html {
    @apply dark:text-white
}

h1 {
    color: var(--color-sf-primary) !important;
}

.e-date-icon-prev, .e-date-icon-next {
    color: var(--color-x-secondary-text-color) !important;
}
.e-btn.e-primary:disabled {
    color: var(--color-sf-secondary-text-color) !important;
}

.e-btn.e-flat:not(.x-self-color) {
    color: var(--color-x-secondary-text-color) !important;
}
.e-btn.e-flat:hover {
    color: var(--color-sf-secondary-text-color-hover) !important;
}
    .e-btn.e-flat:active {
        color: var(--color-sf-secondary-text-color-pressed) !important;
    }
    .e-btn.e-flat:focus {
        color: var(--color-sf-secondary-text-color-focus) !important;
    }

.e-btn.e-outline {
    color: var(--color-x-secondary-text-color) !important;
}
.e-multi-select-wrapper .e-chips .e-chips-close::before {
    color: var(--color-x-secondary-text-color) !important;
    -webkit-text-fill-color: var(--color-x-secondary-text-color) !important;
}
.e-treeview .e-icon-collapsible, .e-treeview .e-icon-expandable {
    color: var(--color-x-secondary-text-color) !important;
}
.e-dropdown-popup ul .e-item .e-menu-icon {
    color: var(--color-x-secondary-text-color) !important;
}
/*
.e-listview .e-icons:not(.e-primary .e-btn-icon,.e-check) {
    color: var(--color-x-secondary-text-color) !important;
}
*/
.e-btn.e-outline:hover {
    color: var(--color-sf-secondary-text-color-hover) !important;
}

    .e-btn.e-outline:active {
        color: var(--color-sf-secondary-text-color-pressed) !important;
    }

    .e-btn.e-outline:focus {
        color: var(--color-sf-secondary-text-color-focus) !important;
    }

.e-input-group-icon.e-ddl-icon, .e-input-group-icon.e-spin-down, .e-input-group-icon.e-spin-up, .e-icon-dlg-close.e-icons.e-btn-icon, .e-input-group-icon.e-date-icon.e-icons, .e-clear-icon {
    color: var(--color-x-secondary-text-color) !important;
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    color: var(--color-x-secondary-text-color) !important;
}
.e-listview .e-outline .e-icons:not(.e-primary .e-btn-icon,.e-check) {
    color: var(--color-x-secondary-text-color) !important;
}
/* MainLayout for DSODetailCore */
.dso-detail-active main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dso-detail-active main > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* NavMenu */
.nav-link.active {
    background-color: var(--color-sf-primary) !important;
    color: var(--color-sf-primary-text-color) !important;
}

.group:hover .group-hover\:text-gray-300 {
    color: inherit !important;
}

/* SfDataForm / SfDialog */
.e-dialog .e-dlg-header-content {
    background: var(--color-sf-primary) !important;
    color: var(--color-sf-primary-text-color) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-sf-primary) 72%, black) !important;
}

.e-dialog .e-dlg-header-content .e-dlg-header, 
.e-dialog .e-dlg-header-content .e-dlg-header *, 
.e-dialog .e-dlg-header-content .e-icons {
    color: var(--color-sf-primary-text-color) !important;
}

.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 4px !important;
}

.e-data-form .e-label-position-top {
    margin-top: 6px !important;
}

.e-group-title {
    width: 100% !important;
    font-weight: 700 !important;
}

.e-dialog .e-data-form .e-form-group .e-group-container,
.e-dialog .e-data-form .e-form-group > .e-group-container {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

.e-dialog .e-data-form .e-form-group .e-group-title,
.e-dialog .e-data-form .e-form-group > .e-group-title {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Reusable dialog/form styling */
.x-dialog-form,
.e-dialog .dialog-content {
    padding: 0.25rem 0;
}

.x-dialog-form .x-form-row,
.e-dialog .form-row {
    margin-bottom: 1rem;
}

.x-dialog-form .x-form-row > label,
.x-dialog-form .form-field > label,
.e-dialog .form-row > label,
.e-dialog .form-field > label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.x-dialog-form .form-row-inline,
.e-dialog .form-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.x-dialog-form .form-field,
.e-dialog .form-field {
    flex: 1;
    min-width: 180px;
}

.x-dialog-form .x-form-section {
    background: color-mix(in srgb, var(--color-sf-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-sf-primary) 28%, transparent);
    border-radius: 0.75rem;
    padding: 0.9rem;
    margin-bottom: 1rem;
}

.x-dialog-form .x-form-section-title {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.dark .x-dialog-form .x-form-section-title {
    color: #ffffff;
}

.e-dark .x-dialog-form .x-form-section-title {
    color: #ffffff;
}

.x-dialog-form .x-form-section-icon {
    width: 0.95rem;
    height: 0.95rem;
    display: none;
}

/* Reuse section styling for Syncfusion DataForm groups in dialogs */
.e-dialog .e-data-form .e-form-group {
    background: color-mix(in srgb, var(--color-sf-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-sf-primary) 28%, transparent);
    border-radius: 0.75rem;
    padding: 1rem 0.9rem 0.2rem;
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.e-dialog .e-data-form .e-group-title {
    margin-bottom: 0.45rem !important;
    font-size: 0.95rem;
    font-weight: 700 !important;
    color: #111827;
    display: block;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    padding: 0 !important;
    line-height: 1.3;
}

.e-dialog .e-data-form .e-form-group .e-group-title,
.e-dialog .e-data-form .e-form-group .e-group-title * {
    background: transparent !important;
}

.dark .e-dialog .e-data-form .e-group-title {
    color: #ffffff;
}

.e-dark .e-dialog .e-data-form .e-group-title {
    color: #ffffff;
}

/* SELF: ListView Responsive */
.x-responsive-list1-2xl .e-list-parent {
    gap: 1rem !important;
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 1536px) {
    .x-responsive-list1-2xl .e-list-parent {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Hide virtualization spacer divs that interfere with grid layout */
.x-responsive-list1-2xl .e-list-parent > div[style*="height: 0px"] {
    display: none !important;
}

/* SfAccordion */
.e-accordion .e-acrdn-item .e-toggle-icon {
    color: var(--color-sf-primary) !important;
}
.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
    color: var(--color-sf-primary) !important;
}
.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons:not(.x-sec-text-color) {
    color: var(--color-sf-primary) !important;
}
.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover > .e-btn:not(:hover) .e-icons:has(.x-sec-text-color) {
    color: var(--color-sf-secondary-text-color) !important;
} .e-accordion .e-acrdn-item .e-acrdn-header {
    border-radius: 0.5rem !important;
}
/* CHART */
.altitude-chart-container .e-control.e-chart.e-lib.e-touch {
    overflow: visible !important;
}

/* Chart tooltips - ensure they appear above dialogs */
.e-chart-tooltip-wrap {
    z-index: 10001 !important;
}
.e-chart .e-tooltip-wrap {
    z-index: 10001 !important;
}

/* SIDEBAR */
.e-sidebar-overlay {
    opacity: 0.7;
    background-color: gray;
}


/* GLOBAL */

/*
/* Bigger UI Mode - Targeted approach for buttons and text only 
body.e-bigger .e-btn {
    font-size: 1.1rem !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 2.75rem !important;
}

body.e-bigger .e-btn.e-small {
    font-size: 1rem !important;
    padding: 0.5rem 1rem !important;
    min-height: 2.25rem !important;
}

body.e-bigger .e-btn.e-round {
    width: 2.75rem !important;
    height: 2.75rem !important;
}

body.e-bigger .e-btn.e-round.e-small {
    width: 2.25rem !important;
    height: 2.25rem !important;
}

/* Input controls 
body.e-bigger .e-input-group input,
body.e-bigger .e-input-group .e-input,
body.e-bigger .e-dropdownlist .e-input,
body.e-bigger .e-numerictextbox .e-input,
body.e-bigger .e-datepicker .e-input,
body.e-bigger .e-timepicker .e-input,
body.e-bigger .e-multiselect .e-input {
    font-size: 1.1rem !important;
    padding: 0.75rem !important;
    min-height: 2.75rem !important;
}

/* Labels and text 
body.e-bigger .e-float-text,
body.e-bigger .e-label,
body.e-bigger .e-field-label,
body.e-bigger .e-checkbox-wrapper .e-label,
body.e-bigger .e-radio-wrapper .e-label {
    font-size: 1.1rem !important;
}

/* Dropdown items 
body.e-bigger .e-dropdownbase .e-list-item,
body.e-bigger .e-popup .e-list-item {
    font-size: 1.1rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 2.5rem !important;
}

/* Tailwind text classes 
body.e-bigger .text-xs { font-size: 0.875rem !important; }
body.e-bigger .text-sm { font-size: 1rem !important; }
body.e-bigger .text-base { font-size: 1.125rem !important; }
body.e-bigger .text-lg { font-size: 1.25rem !important; }
body.e-bigger .text-xl { font-size: 1.375rem !important; }
body.e-bigger .text-2xl { font-size: 1.75rem !important; }
body.e-bigger .text-3xl { font-size: 2.25rem !important; }

/* Tailwind button-like elements 
body.e-bigger button:not(.e-btn) {
    font-size: 1.1rem !important;
    padding: 0.75rem 1.25rem !important;
}

/* Card headers and titles 
body.e-bigger .e-card .e-card-header,
body.e-bigger h1, body.e-bigger h2, body.e-bigger h3, 
body.e-bigger h4, body.e-bigger h5, body.e-bigger h6 {
    font-size: calc(1em * 1.15) !important;
}
    */


/* ALADIN LITE */
.aladin-location {
    top: auto !important;
    bottom: 0.2rem !important;
    left: 0.2rem !important;
}

.aladin-fov {
    bottom: 2.4rem !important;
    left: 0.2rem !important;
}

/* Sequence file dropdown: avoid truncating long relative paths */
.sequence-files-dropdown.e-input-group .e-input,
.sequence-files-dropdown.e-control-wrapper .e-input {
    text-overflow: ellipsis;
}

.sequence-files-dropdown.e-popup .e-list-item,
.sequence-files-dropdown.e-ddl.e-popup .e-list-item,
.sequence-files-dropdown.e-popup .e-list-item .e-list-text {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.2;
}