/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

html,
body {
    height: 100%;
    margin: 0;
    /* overflow: hidden; */
}

.main-container {
    display: flex;
    /*height: calc(100vh - 56px - 56px);*/
    height: calc(100vh - 59px);
    /* Adjust for navbar and footer */
    z-index: 1;
    /* Ensure content is above footer */
}

.sidebar {
    min-width: 72px;
    max-width: 72px;
}

.sidebar .nav-main {
    overflow-y: auto;
    /* Vertical scrollbar for main nav */
    overflow-x: hidden;
    /* Prevent horizontal scrollbar */
    max-height: calc(100vh - 56px - 56px - 60px);
    /* Adjust for navbar, footer, and bottom profile */
}

.sidebar .nav-bottom {
    /* margin-top: auto; */
    /* Push profile to bottom */
}

.content {
    flex-grow: 1;
    padding: 20px;
}

.pane-container {
    height: calc(100vh - 56px - 56px - 48px);
    /* Adjust for navbar, footer, header */
    display: flex;
    margin-right: 250px;
    /* Reserve space for fixed action pane */
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    border-top: 1px solid var(--bs-border-color);
    z-index: 2;
    /* Below content but above background */
}

@media (max-width: 768px) {
    .sidebar {
        z-index: 1001;
        /* Above content */
    }

    .pane-container {
        margin-right: 200px;
        /* Smaller action pane on mobile */
        height: calc(100vh - 56px - 56px - 48px);
        /* Consistent height */
    }
}

:root {
    --primary-color: #3713ec;
    --background-dark: #111827;
    --text-dark: #e5e7eb;
    --border-dark: #374151;
    --surface-dark: #1f2937;
    --background-light: #f9fafb;
    --text-light: #111827;
    --border-light: #e5e7eb;
    --surface-light: #ffffff;
    --bs-link-color-dark: #9EB3FF;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--background-dark);
    --bs-body-color: var(--text-dark);
    --bs-border-color: var(--border-dark);
    --bs-tertiary-bg: var(--surface-dark);
    --bs-secondary-color: #9ca3af;
}

[data-bs-theme="light"] .dark {
    display: none;
}

[data-bs-theme="dark"] .light {
    display: none;
}

[data-bs-theme="light"] {
    --bs-body-bg: var(--background-light);
    --bs-body-color: var(--text-light);
    --bs-border-color: var(--border-light);
    --bs-tertiary-bg: var(--surface-light);
    --bs-secondary-color: #6b7280;
}

body {
    font-family: "Space Grotesk", "Noto Sans", sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

#top-bar {
    height: 60px;
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

#sidebar {
    width: 320px;
    transition: width 0.3s ease-in-out;
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    height: calc(100vh - 60px);
}

#sidebar.collapsed {
    width: 80px;
}

#sidebar.collapsed .sidebar-text,
#sidebar.collapsed .sidebar-full-text {
    display: none;
}

#sidebar:not(.collapsed) .sidebar-icon-only {
    display: none;
}

#sidebar.collapsed .nav-link,
#sidebar.collapsed .btn-sidebar {
    justify-content: center !important;
}

#sidebar .nav-link,
#sidebar .btn-sidebar {
    color: var(--bs-secondary-color);
}

#sidebar .nav-link:hover,
#sidebar .btn-sidebar:hover {
    background-color: rgba(55, 19, 236, 0.1);
    color: var(--bs-body-color);
}

#sidebar .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

#toggle-sidebar {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    z-index: 1050;
}

#toggle-icon.rotated {
    transform: rotate(180deg);
}

.form-control,
.form-check-input,
.form-select {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.form-control:focus,
.form-check-input:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(55, 19, 236, 0.25);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-control::placeholder {
    color: var(--bs-secondary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #2f10c5;
    border-color: #2f10c5;
}

.btn-outline-secondary {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.btn-outline-secondary:hover {
    background-color: rgba(108, 117, 125, 0.5);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

#confirm-dialog {
    z-index: 10000;
}

#errorModal+.modal-backdrop {
    z-index: 1055;
    /* higher than the first backdrop (1040) */
}


/* Normal list items */
[data-bs-theme="dark"] .awesomplete>ul>li {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

em {
    font-weight: bold;
    color: rgb(var(--bs-primary-rgb));
}

/* Autocomplete awesomplete theme */

/* Keyboard-selected item */
[data-bs-theme="dark"] .awesomplete>ul>li[aria-selected="true"] {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: -2px;
    /* keeps outline snug inside the item */
}


/* Hovered item */
[data-bs-theme="dark"] .awesomplete>ul>li:hover {
    background-color: var(--bs-secondary-bg) !important;
    /* softer secondary tint */
    color: var(--bs-body-color) !important;
}

.awesomplete {
    position: relative;
    display: inherit;
    /* ensure positioning is relative to the input wrapper */
}

/* Hide Awesomplete's decorative arrow */
.awesomplete>ul::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* dropdown */
.dropdown-item-interactive {
    cursor: pointer;
}

.dropdown-item-interactive:hover,
.dropdown-item-interactive:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.25);
}

.dropdown-menu .form-check {
    padding-left: 2.25rem;
}

[contenteditable="true"][placeholder]:empty:not(:focus)::before {
    content: attr(placeholder);
    color: #aaa;
    pointer-events: none;
    display: block;
}

.tooltip-inner {
    text-align: start;
}

.table-responsive-sticky {
    max-height: 60vh;
    overflow-y: auto;
}

.badge.bg-danger-subtle {
    background-color: #3e1a20 !important;
    color: #f8d7da !important;
}

.badge.bg-warning-subtle {
    background-color: #4d380c !important;
    color: #ffe58f !important;
}

/* .invalid-feedback {
    color: #dc3545;
} */

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545;
}

a.link,
.modal-body a {
    color: var(--bs-link-color-dark);
    text-decoration: underline;
    cursor: pointer;
}