/* Custom styles for CIQ Enterprise Linux Manager */

:root {
    --sidebar-width: 250px;
}

/* https://github.com/rsms/inter/tree/v4.1 */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  src: url(../css/webfonts/Inter/Inter-Bold.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 700;
  src: url(../css/webfonts/Inter/Inter-BoldItalic.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  src: url(../css/webfonts/Inter/Inter-Italic.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  src: url(../css/webfonts/Inter/Inter-Medium.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 500;
  src: url(../css/webfonts/Inter/Inter-MediumItalic.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  src: url(../css/webfonts/Inter/Inter-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  src: url(../css/webfonts/Inter/Inter-SemiBold.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 600;
  src: url(../css/webfonts/Inter/Inter-SemiBoldItalic.woff2) format("woff2");
  font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper > .d-flex {
    display: flex;
    flex-grow: 1;
}

a {
  color: var(--quantic-fg-brand-primary);
}

a:hover {
  color: var(--quantic-fg-brand-primary);
}

.page-header {
  position: sticky;
  top: 0;
  padding: var(--quantic-spacing-3) var(--quantic-spacing-5);
  background-color: var(--quantic-bg-primary);
  z-index: 1000;
  border-bottom: 1px solid var(--quantic-border-secondary);
}

/* Navbar Styles */
.navbar {
    background-color: var(--quantic-bg-primary);
    height: 70px;
    border-bottom: 1px solid var(--quantic-border-secondary);
}

.navbar-dark .container-fluid {
    background-color: var(--quantic-bg-primary);
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar-brand {
    font-weight: bold;
    color: white !important;
    font-size: 1.5rem;
}

/* Clickable kickstart package-group tokens (render as text, not buttons). */
.ks-group-link {
    cursor: pointer;
}

.ks-group-link:hover code {
    text-decoration: underline;
}

/* Keep the package name column readable in the sync/rollback preview tables so a
   very long version string cannot scrunch it to a sliver. */
#cvSyncPreviewModal table td:first-child,
#cvSyncPreviewModal table th:first-child,
#cvRollbackModal table td:first-child,
#cvRollbackModal table th:first-child {
    min-width: 14rem;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--quantic-bg-primary) !important;
    height: auto;
    overflow-y: auto;
    font-size: 14px;
    font-weight: 400;
    border-right: 1px solid var(--quantic-border-secondary);

}

.sidebar .nav-link {
    color: var(--quantic-text-secondary) !important;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sidebar .nav-link[role="button"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar .nav-link[role="button"]::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.sidebar .nav-link[role="button"][aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.sidebar .nav-link:hover {
    color: var(--quantic-text-primary) !important;
    background-color: var(--quantic-bg-secondary);
}

/* Active state for nav items */
.sidebar .nav-link.active {
    color: var(--quantic-text-primary) !important;
    background-color: var(--quantic-bg-tertiary);
}

/* Bootstrap collapse animation */
.sidebar .collapse {
    transition: all 0.3s ease;
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    background-color: var(--quantic-bg-primary);
    color: var(--quantic-text-primary)
}

.container-fluid {
    background-color: var(--quantic-bg-primary);
    color: var(--quantic-text-primary)

}

.content-area {
    background-color: var(--quantic-bg-primary);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: var(--quantic-text-primary)
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }

    :root {
        --sidebar-width: 200px;
    }
}

/* Scrollbar Styling */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Utility Classes */
.text-muted {
    color: #6c757d;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

.sidebar {
  line-height: 12px !important;
  background-color: #2f4050;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-s {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Container Animations */
.sources-add-container,
.sources-container,
.namespaces-container,
.collection-detail-container,
.tasks-container,
.collections-container,
.users-container,
.sources-edit-container {
    animation: fadeIn 0.5s ease-in;
}

/* Toast Notifications */
.success-toast,
.error-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: slideDown 0.3s ease-out;
}

.success-toast {
    background-color: var(--quantic-fg-brand-primary);
}

.error-toast {
    background-color: #dc3545;
}



/* CodeMirror Styling - override portal.css resets */
.CodeMirror,
.CodeMirror * {
    box-sizing: content-box;
}

.CodeMirror textarea {
    border: none;
    padding: 0;
}

.CodeMirror {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    height: 220px !important;
}

code {
    color: var(--quantic-fg-brand-primary);
}

.form-control {
  border-color: var(--quantic-border-secondary);
  border-radius: var(--quantic-radius-sm);
  background-color: var(--quantic-bg-tertiary);
  color: var(--quantic-text-primary) !important;
}

.form-control:disabled {
  background-color: var(--quantic-bg-disabled);
  opacity: 1;
}

.form-select {
    background-color: var(--quantic-bg-tertiary);
    border-color: var(--quantic-border-primary);
    color: var(--quantic-text-primary);
}

.form-select:disabled {
    background-color: var(--quantic-bg-disabled);
    color: var(--quantic-text-primary);
    opacity: 1;
}

.form-select:focus, .form-control:focus {
  border-color: var(--quantic-border-primary);
  box-shadow: none;
  outline: 0px;
    background-color: var(--quantic-bg-tertiary);
}

.form-check-input {
    background-color: var(--quantic-bg-tertiary) !important;
    border-color: var(--quantic-bg-secondary) !important;
}

/* Use the app's standard green (not Bootstrap blue) for all checked inputs. */
.form-check-input:checked {
    background-color: var(--quantic-fg-brand-primary) !important;
    border-color: var(--quantic-fg-brand-primary) !important;
}

/* Native (non-Bootstrap) checkboxes/radios are tinted via accent-color. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--quantic-fg-brand-primary);
}

.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.75%29'/%3e%3c/svg%3e");
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.75%29'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: var(--quantic-fg-brand-primary) !important;
    border-color: var(--quantic-fg-brand-primary) !important;
}

.form-check-input:focus, .form-check-input:focus, .form-check-input:active {
  box-shadow: none;
  outline: 0px;
}


/* DataTables Styling */
[id$="_wrapper"] .top {
    margin-bottom: 1rem;
}

[id$="_wrapper"] .dataTables_filter {
    text-align: right;
}

[id$="_wrapper"] .dataTables_filter input {
    margin-left: 0.5rem;
    width: 250px;
}

.page-link, .page-link:hover, .page-link:focus {
    background-color: var(--quantic-bg-tertiary);
    color: var(--quantic-text-primary);
    border-color: var(--quantic-border-secondary);
    box-shadow: none;
}

.disabled > .page-link {
    background-color: var(--quantic-bg-secondary);
    color: var(--quantic-text-secondary);
    border-color: var(--quantic-border-secondary);
}

.active > .page-link {
    background-color: var(--quantic-fg-brand-primary);
    color: var(--quantic-text-primary-on-brand);
    border-color: var(--quantic-fg-brand-primary);
}

/* [id*="Table"] tbody tr:hover {
    background-color: #f5f5f5;
} */

/* User Management Styles */
.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-group-sm .btn i {
    margin-right: 0.25rem;
}

#passwordMatchError {
    color: #842029;
    font-size: 0.875rem;
}

#passwordMatchSuccess {
    color: #0f5132;
    font-size: 0.875rem;
}

/* Collection Detail Styles */
.collection-detail-container .card {
    border: 1px solid var(--quantic-border-secondary);
}

.collection-detail-container .card-header {
    border-bottom: 1px solid var(--quantic-border-secondary);
}

/* Task Styles */
.start-task-btn,
.cancel-task-btn {
    white-space: nowrap;
}

.start-task-btn:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.table-hover > tbody > tr:hover>* {
  color: var(--quantic-text-primary);
}


html table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  box-shadow: inset 0 0 0 9999px rgba(var(--quantic-bg-primary-alt-rgb), 0.15);
    color: var(--quantic-text-primary);
}

table.dataTable {
  overflow-x: auto;
    color: var(--quantic-text-primary);
}

table.dataTable:not(:first-child) {
  margin-top: var(--quantic-spacing-6);
}

table.dataTable th {
  font-size: var(--quantic-font-size-body-sm);
  font-weight: var(--quantic-font-weight-regular);
  color: var(--quantic-text-primary);
}

table.dataTable .dt-layout-start {
  color: var(--quantic-text-primary);
  font-size: var(--quantic-font-size-body-sm);
}

table.dataTable .dt-ordering-asc,
table.dataTable .dt-ordering-desc {
  color: var(--quantic-text-primary);
  font-weight: var(--quantic-font-weight-semibold);
}

table.table.dataTable>:not(caption)>*>* {
  background-color: var(--quantic-bg-primary);
  color: var(--quantic-text-primary);
}

.table > :not(caption) > * > * {
  background-color: var(--quantic-bg-primary);
  color: var(--quantic-text-primary);
}

table tr {
    color: var(--quantic-text-secondary);
   border-bottom-color: var(--quantic-border-secondary) !important;
}

.bg-body-secondary {
  background-color: var(--quantic-bg-secondary) !important;  
}

.list-group, .list-group-item {
  background-color: var(--quantic-bg-primary) !important;
  color: var(--quantic-text-primary) !important;
}

.btn {
  background-color: var(--quantic-fg-brand-primary);
    border-color: var(--quantic-fg-brand-primary);
    color: var(--quantic-text-primary-on-brand);
}

.btn-primary {
  background-color: var(--quantic-fg-brand-primary) !important;
    border-color: var(--quantic-fg-brand-primary);
    --bs-btn-active-color: var(--quantic-text-primary-on-brand);
    --bs-btn-active-border-color: var(--quantic-fg-brand-primary);
}

.btn-primary:disabled {
    border-color: var(--quantic-fg-brand-primary);
    --bs-btn-active-border-color: var(--quantic-fg-brand-primary);
    color: var(--quantic-text-primary-on-brand);
}

.bg-success {
  background-color: var(--quantic-fg-brand-primary) !important;
}

.bg-success-n {
  --bs-bg-opacity: .8;
  background-color: rgba(25, 135, 84, var(--bs-bg-opacity)) !important;
}

.btn-secondary {
  background-color: var(--quantic-fg-brand-secondary-alt) !important;
    border-color: var(--quantic-fg-brand-secondary-alt);
}

.text-danger {
    color: var(--quantic-text-error-primary) !important;
}

.text-delete {
    color: #b91c1c !important;
}

.text-dark {
    color: var(--quantic-text-primary-on-brand);
}

.text-success {
    color: var(--quantic-fg-brand-primary);
}

.alert {
    background-color: var(--quantic-bg-brand-solid);
    color: var(--quantic-text-primary-on-brand);
    border-color: var(--quantic-fg-brand-secondary);
}

.btn:hover {
  background-color: var(--quantic-fg-brand-secondary);
    border-color: var(--quantic-fg-brand-secondary);
    color: var(--quantic-text-primary-on-brand);
}

input[type=file]::file-selector-button {
  background-color: var(--quantic-fg-brand-primary);
}

.form-control::placeholder {
  color: var(--quantic-text-tertiary);
  opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--quantic-fg-brand-primary);
}

.dropdown-menu {
    background-color: var(--quantic-bg-secondary);
    color: var(--quantic-text-primary);
}

.dropdown-item {
    background-color: var(--quantic-bg-secondary);
    color: var(--quantic-text-primary);
}

.dropdown-item:hover {
    background-color: var(--quantic-bg-secondary);
    color: var(--quantic-text-primary);
}

.card {
    background-color: var(--quantic-bg-secondary);
    color: var(--quantic-text-primary);
    border: 1px solid var(--quantic-border-secondary);
}

.modal-content {
    background-color: var(--quantic-bg-secondary);
    color: var(--quantic-text-primary);
}

/* The default Bootstrap close button renders a black SVG icon that is hard to
   see against the dark modal. Recolor it to match the primary body text. */
.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Content-area tabs (e.g. group detail Hosts/Groups). The default Bootstrap
   active tab is white, which looks out of place on the dark background, so we
   recolor the tabs to match the theme. */
.content-area .nav-tabs {
    border-bottom-color: var(--quantic-border-primary);
}

.content-area .nav-tabs .nav-link {
    color: var(--quantic-text-secondary);
    background-color: transparent;
    border-color: transparent;
}

.content-area .nav-tabs .nav-link:hover,
.content-area .nav-tabs .nav-link:focus {
    color: var(--quantic-text-primary);
    border-color: var(--quantic-border-primary) var(--quantic-border-primary) transparent;
    isolation: isolate;
}

.content-area .nav-tabs .nav-link.active {
    color: var(--quantic-text-primary);
    background-color: var(--quantic-bg-primary);
    border-color: var(--quantic-border-primary) var(--quantic-border-primary) var(--quantic-bg-primary);
}

/* Keyframe Animations */
@keyframes slideDown {
    from {
        top: -50px;
        opacity: 0;
    }
    to {
        top: 20px;
        opacity: 1;
    }
}

.border {
  border-color: rgb(var(--quantic-border-primary-rgb)) !important;
  border-width: 2px;
}

.accordion-header {
    --quantic-spacing-6: 0rem;
}

.accordion-item, .accordion-button {
    border-color: rgb(var(--quantic-border-primary-rgb)) !important;
  background-color: var(--quantic-background-primary);
    color: var(--quantic-text-primary);
    padding: 0px 10px 0px 10px;
}

.accordion-button:not(.collapsed) {
  background-color: var(--quantic-background-primary);
    color: var(--quantic-text-primary);
}

.accordion-button:focus {
    border-color: rgb(var(--quantic-border-primary-rgb)) !important;
    box-shadow: none;
    outline: none;
}

.accordion-button::after {
    background-image: none;
    background-color: var(--quantic-text-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1.25rem;
    mask-size: 1.25rem;
}

/* fix select2 in modal issues */
.modal .modal-content,
.modal .modal-body {
    overflow: visible;
}

.modal .select2-container,
.modal .select2-container--open,
.modal .select2-dropdown {
    z-index: 2000 !important;
}

.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap .select2-selection--single,
.select2-container--bootstrap .select2-selection--multiple {
    background-color: var(--quantic-bg-tertiary) !important;
    border-color: var(--quantic-border-primary) !important;
    color: var(--quantic-text-primary) !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered,
.select2-container--bootstrap .select2-selection__placeholder {
    color: var(--quantic-text-primary) !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--quantic-text-secondary) !important;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.select2-container--bootstrap .select2-selection:focus,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--quantic-border-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

.select2-container--bootstrap .select2-dropdown,
.select2-container--bootstrap .select2-results,
.select2-container--bootstrap .select2-results__options {
    background-color: var(--quantic-bg-secondary) !important;
    border-color: var(--quantic-border-primary) !important;
    color: var(--quantic-text-primary) !important;
}

.select2-container--bootstrap .select2-results__option {
    background-color: transparent !important;
    color: var(--quantic-text-primary) !important;
}

.select2-container--bootstrap .select2-results__option[aria-selected=true] {
    background-color: rgba(var(--quantic-bg-primary-alt-rgb), 0.2) !important;
    color: var(--quantic-text-primary) !important;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected=true] {
    background-color: rgba(var(--quantic-bg-primary-alt-rgb), 0.35) !important;
    color: var(--quantic-text-primary) !important;
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    background-color: var(--quantic-bg-tertiary) !important;
    border-color: var(--quantic-border-primary) !important;
    color: var(--quantic-text-primary) !important;
}