/* Neuronex Main Stylesheet */

@keyframes pulseSlow {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

html, body {
    overflow: hidden;
}

#main {
    position: relative;
    will-change: transform;
}

#main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('/img/bg.jpg'); */
    /* background-image: url("https://images.pexels.com/photos/2563854/pexels-photo-2563854.jpeg"); */
    background-image: url("https://images.pexels.com/photos/16781013/pexels-photo-16781013.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    --focal-point-x: 85%;
    --focal-point-y: 23%;
    background-position: var(--focal-point-x) var(--focal-point-y);
    animation-name: pulseSlow;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center;
    z-index: -1;
}

/* Neuronex custom font */
.neuronex-font {
    font-family: 'Yusei Magic', sans-serif;
}

/* Footer links */
.footer-links {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
}
.footer-links a {
    color: #5d809f;
    text-decoration: none;
    margin: 0 1rem;
    cursor: pointer;
}
.footer-links a:hover {
    color: #c1d5ea;
    text-decoration: underline;
}

/* Dark modal theme */
.modal-dark .modal-content {
    background-color: #212529;
    color: #adb5bd;
    border: 1px solid #495057;
}
.modal-dark .modal-header {
    border-bottom: 1px solid #495057;
}
.modal-dark .modal-footer {
    border-top: 1px solid #495057;
}
.modal-dark .btn-close {
    filter: invert(1);
}
.modal-dark h1, .modal-dark h2, .modal-dark h3, .modal-dark h5 {
    color: #f8f9fa;
}
.modal-dark a {
    color: #6ea8fe;
}
.modal-dark a:hover {
    color: #9ec5fe;
}
.modal-dark .company-info {
    background-color: #343a40;
    border: 1px solid #495057;
}

/* Slide-up animation for modals */
.modal.slide-up .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}
.modal.slide-up.show .modal-dialog {
    transform: translateY(0);
}

/* Scrollable modal body */
.modal-body-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

/* HTMX loading states */
.htmx-request {
    opacity: 0.5;
    transition: opacity 200ms ease-in;
}
.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Role badges */
.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}
.role-admin {
    background: #dc3545;
    color: #fff;
}
.role-user {
    background: #0d6efd;
    color: #fff;
}
.role-guest {
    background: #6f42c1;
    color: #fff;
}

/* Status indicators */
.status-active {
    color: #10b981;
}
.status-inactive {
    color: #ef4444;
}

/* Clickable element cursor */
.clickable {
    cursor: pointer;
}

/* Fullscreen iframe for tools modal */
.tool-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #fff;
}

/* Dark mode sidebar active state */
[data-bs-theme="dark"] .list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .list-group-item:hover:not(.active):not(.disabled) {
    background-color: #343a40 !important;
}

/* Dark mode form elements */
[data-bs-theme="dark"] .form-label {
    color: #dee2e6;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #212529;
    border-color: #495057;
    color: #dee2e6;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #2b3035;
    border-color: #0d6efd;
    color: #fff;
}
[data-bs-theme="dark"] .form-check-label {
    color: #dee2e6;
}

/* Form fields turn light when touched (dirty state) */
[data-bs-theme="dark"] .form-control.is-dirty,
[data-bs-theme="dark"] .form-select.is-dirty {
    background-color: #fff !important;
    border-color: #0d6efd !important;
    color: #212529 !important;
}
[data-bs-theme="dark"] .form-control.is-dirty::placeholder {
    color: #6c757d;
}

/* Documentation modal styling */
#docModalContent {
    font-size: 0.95rem;
    line-height: 1.7;
}

#docModalContent .doc-markdown {
    color: #dee2e6;
}

#docModalContent .doc-markdown h1,
#docModalContent .doc-markdown h2,
#docModalContent .doc-markdown h3,
#docModalContent .doc-markdown h4,
#docModalContent .doc-markdown h5,
#docModalContent .doc-markdown h6 {
    color: #f8f9fa;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#docModalContent .doc-markdown h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid #495057;
    padding-bottom: 0.5rem;
}

#docModalContent .doc-markdown h3 {
    font-size: 1.25rem;
}

#docModalContent .doc-markdown code {
    background: #343a40;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    color: #79c0ff;
    font-family: 'Courier New', monospace;
}

#docModalContent .doc-markdown pre {
    background: #1a1d23;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto;
    border: 1px solid #495057;
}

#docModalContent .doc-markdown pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

#docModalContent .doc-markdown blockquote {
    border-left: 4px solid #495057;
    padding-left: 1rem;
    margin-left: 0;
    color: #adb5bd;
    font-style: italic;
}

#docModalContent .doc-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    border: 1px solid #495057;
}

#docModalContent .doc-markdown th {
    background: #343a40;
    color: #f8f9fa;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid #495057;
}

#docModalContent .doc-markdown td {
    padding: 0.75rem;
    border-bottom: 1px solid #495057;
}

#docModalContent .doc-markdown tr:hover {
    background: #2b3035;
}

#docModalContent .doc-markdown a {
    color: #79c0ff;
    text-decoration: none;
}

#docModalContent .doc-markdown a:hover {
    color: #9ec5fe;
    text-decoration: underline;
}

#docModalContent .doc-markdown ul,
#docModalContent .doc-markdown ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

#docModalContent .doc-markdown li {
    margin-bottom: 0.5rem;
}

#docModalContent .doc-markdown hr {
    border-color: #495057;
    margin: 1.5rem 0;
}

#docModalContent .doc-error {
    background: #842029;
    border: 1px solid #dc3545;
    color: #f8d7da;
    padding: 1rem;
    border-radius: 5px;
    margin: 1rem 0;
}

#docModalContent .doc-loading {
    text-align: center;
    color: #adb5bd;
    padding: 2rem;
}