html {
    height: 100%;
    font-family: "Arial", "Helvetica", "sans-serif";
}

/* Modal sizes */
.modal-lg {
    max-width: 850px;
}

.modal-xl {
    max-width: 1000px;
}

.modal-full {
    max-width: 1250px;
}

.modal-md {
    max-width: 650px;
}

.center-horizontal {
    margin-left: auto;
    margin-right: auto;
}

.form-multi-select {
    width: 100%;
}

/* Tooltips */
.tooltip-inner {
    max-width: 350px;
    text-align: left;
}

/* Set placeholder color to current text color when the multi-select is not shown */
.form-multi-select.single-select.input-group-multi-select:not(.show) .form-multi-select-search::placeholder {
  color: currentColor;
}

/* Suggestion box for text inputs */
.suggestion-box {
    position: absolute;
    z-index: 1000; /* Ensures it appears on top of other elements */
    width: 100%; /* Match parent width exactly */
    max-height: 200px; /* Maximum height */
    overflow-y: auto; /* Enable scrolling for overflow */
    margin-top: 2px; /* Small space between the input box and suggestion box */
}

/* Container for input group + suggestion box to maintain proper positioning */
.input-suggestion-wrapper {
    position: relative;
    width: 100%;
}

/* Make sidebar-footer nav-link match regular sidebar nav-link styling */
.sidebar-footer .nav-link {
    color: var(--cui-sidebar-nav-link-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.sidebar-footer .nav-link:hover {
    color: var(--cui-sidebar-nav-link-hover-color) !important;
    background: var(--cui-sidebar-nav-link-hover-bg) !important;
}

.sidebar-footer .nav-icon {
    flex: 0 0 3.5rem;
    height: 1rem;
    font-size: 1rem;
    text-align: center;
}

/* Hide entire portal switch link when collapsed */
.sidebar-narrow-unfoldable .sidebar-footer #switch-portal {
    display: none;
}

/* Show portal switch link when hovering over collapsed sidebar */
.sidebar-narrow-unfoldable:hover .sidebar-footer #switch-portal {
    display: flex;
}

.fa-circle-question {
    color: var(--cui-gray-400);
}

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Align text left or right (because Bootstrap decided to change the names) */
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

.clear:focus,.clear:active {
    outline: none;
    box-shadow: none;
}
.dot {
    height: 15px;
    width: 15px;
    margin-top: 7px;
    background-color: #eeeeee;
    border-radius: 50%;
    display: inline-block;
}

pre {
    white-space: pre-wrap;
    padding: 5px;
    border: 2px solid #e1e1e1;
}

.statusdatatable {
    line-height: 110%;
    border: 0;
    text-align: left;
}
.statusdatatable td {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left:0;
    padding-right: 24px;
}

/* Search inputs */
.uppy-ProviderBrowser-searchInput {
    background-color: var(--cui-input-bg, #ffffff);
    color: var(--cui-input-color, #212121);
    border-color: var(--cui-input-border-color, #dee2e6);
}

/* Override uppy.min.css search input styles */
.uppy-ProviderBrowser-searchInput:focus {
    background-color: var(--cui-input-bg, #ffffff);
}

/* Apply white background to all form input elements */
.uppy-ProviderBrowser-searchInput {
    background-color: var(--cui-input-bg, #ffffff);
    color: var(--cui-input-color, #212121);
    border-color: var(--cui-input-border-color, #dee2e6);
}

select, .form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--cui-input-bg, #ffffff);
    color: var(--cui-input-color, #212121);
    border-color: var(--cui-input-border-color, #dee2e6) !important;
}

/* Ensure dropdown menus also have white background */
.select2-container--default .select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--cui-input-bg, #ffffff);
    color: var(--cui-input-color, #212121);
    border-color: var(--cui-input-border-color, #dee2e6);
}

/* Sidebar */
.simplebar-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.header .container-fluid {
    min-height: 2.5rem !important; /* Match the header height */
}

/* Custom SimpleBar scrollbar styling */
.simplebar-scrollbar::before {
    background-color: rgba(var(--cui-body-color-rgb, 33, 33, 33), 0.5) !important;
    opacity: 0.7 !important;
}

.wrapper {
    width: 100%;
    padding-left: var(--cui-sidebar-occupy-start, 0);
    padding-right: var(--cui-sidebar-occupy-end, 0);
    will-change: auto;
    transition: padding 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .wrapper {
        transition: none;
    }
}

.header > .container-fluid, .header > .container-sm, .header > .container-md, .header > .container-lg, .header > .container-xl, .header > .container-xxl,
.sidebar-header {
    min-height: calc(4rem + 1px);
}

.sidebar-brand-full {
    margin-left: 3px;
}

.sidebar-header .nav-underline-border {
    --cui-nav-underline-border-link-padding-x: 1rem;
    --cui-nav-underline-border-gap: 0;
}

.sidebar-header .nav-link {
    display: flex;
    align-items: center;
    min-height: calc(4rem + 1px);
}

.sidebar-narrow .sidebar-toggler,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler {
    margin-right: auto;
}

/* Global overflow handling - adds horizontal scrollbars when content exceeds container width */
.table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

/* Apply horizontal scrolling to all tables by default.
   font-size: inherit overrides the browser UA stylesheet which explicitly sets
   font-size: medium on <table>, breaking inheritance from body. */
table {
    max-width: 100%;
    font-size: inherit;
}

td, th {
    vertical-align: middle;
}

/* Add horizontal scrolling to any element that might overflow */
.overflow-container {
    overflow-x: auto;
    max-width: 100%;
}

/* Ensure iframe content is scrollable when needed */
iframe {
    max-width: 100%;
}

/* Hide sidebar logo when sidebar is collapsed/narrow */
.sidebar-narrow .sidebar-logo,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-logo,
.sidebar-unfoldable .sidebar-logo {
    display: none;
}

/* Database matches alert styling */
.alert p {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Terminal/Command output styling */
.terminal-output {
    height: 650px;
    min-height: 200px;
    max-height: 1200px;
    width: 100%;
    min-width: 300px;
    overflow: auto;
    resize: both;
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* SweetAlert2 compact dialogs */
.swal2-popup.swal-compact { --swal2-icon-zoom: 0.65; padding: 0.5rem 1.5rem 1.25rem; }
.swal2-popup.swal-compact .swal2-title { font-size: 1.1rem; padding: 0 0 0.5rem; margin: 0; }
.swal2-popup.swal-compact .swal2-html-container { font-size: 0.9rem; margin: 0 0 0.75rem; padding: 0; }
.swal2-popup.swal-compact .swal2-actions { margin: 0; }

/* SweetAlert2's own confirm/cancel colors are close enough to this app's theme to go
   unnoticed, so tie them to the real CoreUI variables in case buttonsStyling ever
   lets the default swal2 palette show through instead of the .btn-* classes. */
.swal2-popup {
    --swal2-confirm-button-background-color: var(--cui-primary);
    --swal2-confirm-button-border-radius: var(--cui-border-radius);
    --swal2-confirm-button-box-shadow: none;
    --swal2-cancel-button-background-color: var(--cui-secondary);
    --swal2-cancel-button-border-radius: var(--cui-border-radius);
    --swal2-cancel-button-box-shadow: none;
    --swal2-deny-button-background-color: var(--cui-danger);
    --swal2-deny-button-border-radius: var(--cui-border-radius);
    --swal2-deny-button-box-shadow: none;
}

/* Prevent SweetAlert2 focus outline from altering button appearance */
.swal2-popup .swal2-actions .btn:focus,
.swal2-popup .swal2-actions .btn:focus-visible {
    box-shadow: none;
    outline: none;
}

/* HTMX loading state for buttons with toggle text/loading content */
.htmx-loading-toggle .htmx-request .btn-text {
    display: none !important;
}

.htmx-loading-toggle .htmx-request .btn-loading {
    display: inline !important;
}

/* Uppy Dashboard theming — matches file-drop-zone style */
.uppy-Dashboard-inner {
    border: 2px dashed var(--cui-border-color) !important;
    border-radius: var(--cui-border-radius) !important;
    background-color: var(--cui-tertiary-bg) !important;
    width: 100% !important;
}

.uppy-Dashboard-AddFiles {
    border: none !important;
}

.uppy-Dashboard-AddFiles::before {
    pointer-events: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f0ee';
    font-size: 5rem;
    display: block;
    color: var(--cui-secondary-color);
    margin-bottom: 0.75rem;
}

.uppy-Dashboard-AddFiles-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--cui-body-color) !important;
}

.uppy-Dashboard-AddFiles-title button,
.uppy-Dashboard-browse {
    color: inherit !important;
    font: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: inherit;
}

.uppy-Dashboard-note {
    color: var(--cui-secondary-color) !important;
    font-size: 0.8rem !important;
}

/* Drag-and-drop file upload zone */
.file-drop-zone {
    border: 2px dashed var(--cui-border-color);
    border-radius: var(--cui-border-radius);
    background-color: var(--cui-tertiary-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
    width: 100%;
    min-height: 220px;
    padding: 2rem;
    text-align: center !important;
}

.file-drop-zone:hover,
.file-drop-zone--hover {
    border-color: var(--cui-primary);
    background-color: rgba(var(--cui-primary-rgb), 0.04);
}

.file-drop-zone:hover .fa-cloud-upload-alt {
    color: var(--cui-primary) !important;
}

.file-drop-zone--selected {
    border-color: var(--cui-success);
    background-color: rgba(var(--cui-success-rgb), 0.04);
}

.file-drop-zone--selected .fa-cloud-upload-alt {
    color: var(--cui-success) !important;
}