/* =============================
        JV Custom Theme v2
   ============================= */

:root {
    --jv-bg: #040711;
    --jv-bg-elevated: #050814;
    --jv-bg-soft: #0b1220;

    /* Brand colors */
    --jv-primary: #2DC8FF;
    --jv-primary-soft: rgba(45, 200, 255, 0.16);
    --jv-primary-strong: #7DE3FF;

    --jv-accent: #FFC533; /* secondary as accent */
    --jv-accent-soft: rgba(255, 197, 51, 0.18);

    --jv-border: rgba(45, 200, 255, 0.55);
    --jv-border-soft: rgba(45, 200, 255, 0.2);

    --jv-text-main: #E5F2FF;
    --jv-text-muted: #9CA3C7;

    --jv-radius-lg: 18px;
    --jv-radius-md: 12px;
}

/* Base */
body.jv-app {
    background: radial-gradient(circle at top left, #020617 0, #020617 45%, #000 100%) fixed;
    color: var(--jv-text-main);
    font-smooth: always;
}

/* Shell */
.jv-shell {
    background: radial-gradient(circle at top left, #020617 0, #020617 40%, #000 100%);
}

/* Topbar (niet sticky) */
.jv-topbar {
    padding: 0.75rem 0;
    background:
        radial-gradient(circle at top left, rgba(45, 200, 255, 0.28), transparent 55%),
        radial-gradient(circle at top right, rgba(255, 197, 51, 0.24), transparent 55%),
        rgba(10, 16, 32, 0.96);
    border-bottom: 1px solid rgba(15, 23, 42, 0.95);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
}

/* Brand */
.jv-logo-circle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, var(--jv-primary-strong), var(--jv-primary));
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 0 10px rgba(45, 200, 255, 0.7)
}

.jv-logo-initials {
    font-size: 0.9rem;
    font-weight: 800;
    color: #020617;
    letter-spacing: 0.08em;
}

.jv-brand-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E5F2FF;
}

.jv-brand-subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jv-text-muted);
}

/* Nav links */
.jv-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--jv-text-muted);
    border: 1px solid transparent;
    background-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.jv-nav-link:hover {
    background-color: rgba(15,23,42,0.9);
    color: var(--jv-text-main);
    transform: translateY(-1px);
}

.jv-nav-link-active {
    background: linear-gradient(135deg, var(--jv-primary-soft), rgba(15,23,42,0.98));
    border-color: var(--jv-border);
    color: #EAF8FF;
    box-shadow:
        0 0 0 1px rgba(6, 10, 24, 0.9),
        0 0px 10px rgba(0, 0, 0, 0.9)
}

/* user pill */
.jv-user-pill {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(10, 16, 32, 0.95);
    border: 1px solid rgba(51, 65, 85, 0.9);
}

.jv-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, var(--jv-primary-strong), var(--jv-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #020617;
}

.jv-user-name {
    font-size: 0.78rem;
    font-weight: 600;
}

.jv-user-email {
    font-size: 0.7rem;
    color: var(--jv-text-muted);
}

/* Page wrapper / header / main / footer */
.jv-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jv-page-header {
    padding: 1.3rem 0 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.9);
    background: radial-gradient(circle at top left, rgba(12, 21, 48, 0.95), rgba(8, 15, 35, 1));
}

.jv-page-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jv-page-subtitle {
    font-size: 0.8rem;
    color: var(--jv-text-muted);
}

.jv-main {
    padding: 1.5rem 0 2.25rem;
}

.jv-footer {
    padding: 0.75rem 0 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.9);
    background: radial-gradient(circle at bottom right, rgba(8, 15, 35, 0.98), #020617);
}

/* Blocks / cards */
.block {
    background: radial-gradient(circle at top left, rgba(8, 15, 35, 0.98), rgba(8, 15, 35, 0.96)) !important;
    border-radius: var(--jv-radius-lg) !important;
    border: 1px solid var(--jv-border-soft) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Dark header override */
.block-header-default {
    background: radial-gradient(circle at top left,
    rgba(15, 23, 42, 0.98),
    rgba(15, 23, 42, 0.96)
    ) !important;
    border-bottom: 1px solid rgba(30, 64, 175, 0.85) !important;
    color: var(--jv-text-main) !important;
}

.block-header-default .block-title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jv-text-main) !important;
}

.block-header-default .fs-xs,
.block-header-default small {
    color: var(--jv-text-muted) !important;
}

.block-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.95);
    border-color: var(--jv-border) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--jv-primary), var(--jv-primary-strong)) !important;
    border-color: transparent !important;
    color: #020617 !important;
    box-shadow: 0 10px 26px rgba(45, 200, 255, 0.55);
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(45, 200, 255, 0.7);
}

.btn-alt-secondary {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #CBD5E1 !important;
}

.btn-alt-secondary:hover {
    background-color: rgba(255,255,255,0.12) !important;
    color: #FFFFFF !important;
}

/* Reset Codebase heavy shadows */
.btn, .btn-sm, .btn-primary, .btn-alt-secondary, .btn-alt-primary {
    box-shadow: none !important;
    transform: translateZ(0);
}

/* JV micro shadow */
.jv-btn-shadow {
    transition: all .2s ease;
}

.jv-btn-shadow:hover {
    box-shadow: 0 4px 14px rgba(45, 200, 255, 0.35) !important;
    transform: translateY(-1px);
}

/* =========================================================
   JV FORMS 2.0
   ====================================================== */

/* Base fields: input + select + textarea */
.form-control,
.form-select {
    background-color: rgba(8, 15, 35, 0.98) !important;
    border: 1px solid rgba(51, 65, 85, 0.95) !important;
    color: var(--jv-text-main) !important;
    border-radius: 0.7rem !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .08s ease;
}

/* Placeholder */
.form-control::placeholder {
    color: var(--jv-text-muted) !important;
}

/* Hover */
.form-control:hover,
.form-select:hover {
    border-color: rgba(255,255,255,0.12) !important;
}

/* Focus */
.form-control:focus,
.form-select:focus {
    background-color: #0C1526 !important;
    border-color: var(--jv-primary) !important;
    box-shadow: 0 0 0 2px rgba(45,200,255,0.35) !important;
    color: #E5F2FF !important;
}

/* Disabled */
.form-control:disabled,
.form-select:disabled {
    background-color: #0A1120 !important;
    border-color: rgba(255,255,255,0.04) !important;
    opacity: 0.6;
}

/* Textareas match inputs */
textarea.form-control {
    background-color: #0A1120 !important;
}

/* Input groups */
.input-group-text {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(51, 65, 85, 0.95) !important;
    color: var(--jv-text-muted) !important;
}

/* Labels */
.form-label {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jv-text-muted) !important;
}

/* Invalid state */
.is-invalid.form-control,
.is-invalid.form-select {
    border-color: #f97373 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.55) !important;
}

.invalid-feedback {
    font-size: 0.75rem;
}

/* Small helper text */
.form-text,
.fs-xxs.text-muted {
    color: var(--jv-text-muted) !important;
}

/* Checkbox + radio base */
.form-check-input {
    background-color: #0A1120 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Checked */
.form-check-input:checked {
    background-color: var(--jv-primary) !important;
    border-color: var(--jv-primary) !important;
}

/* Focus ring */
.form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(45,200,255,0.35) !important;
}

/* Radio circles netjes */
.form-check-input[type="radio"] {
    border-radius: 999px !important;
}

/* Labels naast checkbox/radio */
.form-check-label {
    color: var(--jv-text-main) !important;
    font-size: 0.8rem;
}

/* Bootstrap 5 switch-style */
.form-switch .form-check-input {
    width: 2.4rem;
    height: 1.2rem;
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-radius: 999px;
}

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

/* Dropdowns */
.dropdown-menu {
    background-color: rgba(8, 15, 35, 0.98) !important;
    border: 1px solid rgba(31, 41, 55, 0.95) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
    padding: 0.35rem 0;
}

.dropdown-item {
    font-size: 0.8rem;
    color: var(--jv-text-main) !important;
    padding: 0.4rem 0.9rem;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: rgba(45, 200, 255, 0.18) !important;
    color: #E5F2FF !important;
}

/* Tables (generic) */
.table {
    color: var(--jv-text-main);
}

.table thead th {
    border-bottom-color: rgba(51, 65, 85, 0.9) !important;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--jv-text-muted);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(15, 23, 42, 0.98);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(17, 24, 39, 0.92);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(45, 200, 255, 0.18);
}

/* Alerts */
.alert {
    border-radius: var(--jv-radius-md);
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.7);
    color: #BBF7D0;
}

.alert-warning {
    background-color: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.7);
    color: #FEF3C7;
}

/* Fade-in util */
.jv-fade-in {
    animation: jv-fade-in .35s ease-out;
}

@keyframes jv-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   Section Title Block
   ======================================================= */

.jv-section-title {
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--jv-primary-strong);
    margin-bottom: 0.85rem;

    position: relative;
    display: inline-block;
    padding-bottom: 0.35rem;
}

.jv-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 42%;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--jv-primary),
        var(--jv-accent)
    );

    border-radius: 4px;
    opacity: 0.9;
    transition: width .25s ease;
}

.jv-section-title:hover::after {
    width: 65%;
}

/* Feature card icons */
.jv-feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.75rem;
}

.jv-feature-icon .jv-icon {
    width: 42px;
    height: 42px;
    opacity: 0.9;
    transition: all .25s ease;
}

.block-hover:hover .jv-feature-icon .jv-icon {
    transform: translateY(-3px);
    opacity: 1;
}

.jv-icon {
    width: 42px;
    height: 42px;
    opacity: .85;
    transition: all .25s ease;
}

.block-hover:hover .jv-icon {
    opacity: 1;
    transform: translateY(-3px);
}

.icon-sm {
    width: 18px;
    height: 18px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 42px;
    height: 42px;
}

/* JV alert helper */
.jv-alert {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    animation: jv-fade-slide .4s ease;
}

@keyframes jv-fade-slide {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   JV dark table + hard override for API table
   ======================================================= */

.jv-table-dark {
    background-color: #020617;
    border-collapse: separate;
    border-spacing: 0;
}

.jv-table-dark thead tr {
    background: radial-gradient(circle at top left, rgba(45, 200, 255, 0.18), transparent);
}

.jv-table-dark thead th {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(45, 200, 255, 0.28);
}

.jv-table-dark tbody tr {
    transition: background-color .15s ease, transform .05s ease;
}

.jv-table-dark tbody tr:nth-child(2n+1) {
    background-color: rgba(15, 23, 42, 0.7);
}

.jv-table-dark tbody tr:nth-child(2n) {
    background-color: rgba(15, 23, 42, 0.9);
}

.jv-table-dark tbody tr:hover {
    background-color: rgba(45, 200, 255, 0.35);
    transform: translateY(-1px);
}

.jv-table-dark td,
.jv-table-dark th {
    border-color: rgba(15, 23, 42, 0.9) !important;
    vertical-align: middle;
}

.jv-table-dark td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.8rem;
}

/* Hard override for .table.jv-table-dark (Codebase neutralizer) */
.table.jv-table-dark {
    background-color: transparent !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table.jv-table-dark thead tr {
    background: radial-gradient(circle at top left, rgba(45, 200, 255, 0.18), transparent) !important;
}

.table.jv-table-dark thead th {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(45, 200, 255, 0.28) !important;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--jv-text-muted);
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

.table.jv-table-dark td,
.table.jv-table-dark th {
    background-color: transparent !important;
    border-color: rgba(15, 23, 42, 0.9) !important;
    color: var(--jv-text-main) !important;
    vertical-align: middle;
}

.table.jv-table-dark tbody tr:nth-child(2n+1) td {
    background-color: rgba(15, 23, 42, 0.7) !important;
}

.table.jv-table-dark tbody tr:nth-child(2n) td {
    background-color: rgba(15, 23, 42, 0.9) !important;
}

.table.jv-table-dark tbody tr:hover td {
    background-color: rgba(45, 200, 255, 0.35) !important;
    transform: translateY(-1px);
}

.table.jv-table-dark tbody tr {
    transition: background-color .15s ease, transform .05s.ease;
}

.table.jv-table-dark td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.8rem;
}

/* =========================================================
   CODE BLOCKS + PASTEBIN EDITOR WINDOW
   ====================================================== */

/* JV generic pre styling */
pre,
.pre-sh {
    background-color: rgba(8, 15, 35, 0.98) !important;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(30, 64, 175, 0.65);
    font-size: 0.8rem;
    overflow-x: auto;
}

/* Laat highlight.js de kleuren bepalen */
pre code,
.pre-sh code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: inherit !important;
}

/* cred-style lines wat zachter */
.pre-sh[data-lang="CREDS"] span.text-info.fw-bold {
    color: #7DE3FF !important;
}
.pre-sh[data-lang="CREDS"] span.text-danger {
    color: #FB7185 !important;
}

/* JV Code Window (Pastebin public view) */
.jv-code-window {
    background-color: #020617;
    border-radius: 0.9rem;
    border: 1px solid rgba(30, 64, 175, 0.8);
    overflow: hidden;
    /*box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85);*/
}

.jv-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.85rem;
    background: linear-gradient(135deg, #020617, #020617, #020617);
    border-bottom: 1px solid rgba(30, 64, 175, 0.85);
}

.jv-code-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jv-code-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    opacity: 0.85;
}

.jv-code-dot-red {
    background-color: #fb7185;
}

.jv-code-dot-amber {
    background-color: #facc15;
}

.jv-code-dot-green {
    background-color: #4ade80;
}

.jv-code-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.jv-code-filename {
    font-size: 0.75rem;
    color: var(--jv-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.jv-code-lang-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #E5E7EB;
}

.jv-code-body {
    padding: 0.65rem 0.9rem 0.85rem;
}

/* pre in code window -> geen extra border/padding */
.jv-code-body pre,
.jv-code-body .pre-sh {
    margin: 0;
    background-color: transparent !important;
    border: none !important;
    padding: 0;
}

/* =========================================================
   Highlight.js overrides (tegen Codebase / roze bug)
   ====================================================== */

/* Basis voor alle hljs code blocks */
code.hljs {
    display: block;
    overflow-x: auto;
    background: transparent !important;
    color: #e5e7eb !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
}

/* Commentaar / quotes */
.hljs-comment,
.hljs-quote {
    color: #6b7280 !important;
    font-style: italic;
}

/* Keywords, booleans, belangrijke dingen */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-title {
    color: #60a5fa !important;
}

/* Strings, attributen */
.hljs-string,
.hljs-doctag,
.hljs-template-tag,
.hljs-template-variable,
.hljs-attr {
    color: #a3e635 !important;
}

/* Numbers, params, types */
.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable,
.hljs-params,
.hljs-type {
    color: #fbbf24 !important;
}

/* Functions */
.hljs-function .hljs-title,
.hljs-function {
    color: #22d3ee !important;
}

/* Tags / markup */
.hljs-tag,
.hljs-tag .hljs-name {
    color: #fb7185 !important;
}

/* Operators / punctuatie */
.hljs-operator,
.hljs-punctuation {
    color: #e5e7eb !important;
}

/* Strong/emphasis */
.hljs-strong {
    font-weight: 600;
}

.hljs-emphasis {
    font-style: italic;
}

/* =========================================================
   General focus outline removal (relies on our custom glow)
   ====================================================== */

button:focus,
.btn:focus {
    box-shadow: none !important;
    outline: none !important;
}