/* ==========================================================================
   OPTIONAL_ENHANCEMENTS.css — cross-cutting visual polish
   Tutto theme-aware via bs-vars / tp-vars definite in site.css.
   ========================================================================== */

/* ----- Scrollbar (dark by default, since body is dark) ----- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ----- Cards: bordo sottile + glow su hover invece di shadow nere ----- */
.card {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--tp-border-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    border-color: rgba(124, 92, 255, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--tp-accent-soft);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--tp-border-subtle);
}

/* Header con bg-primary: gradient con accent custom invece del blu BS */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--tp-accent) 0%, #5a3fd6 100%) !important;
    border-bottom-color: transparent;
}

/* ----- Tree view (DevExpress) ----- */
::deep .dxbl-tree-view-node {
    transition: background-color 0.15s ease;
    border-radius: 4px;
    padding: 2px 4px;
}

::deep .dxbl-tree-view-node:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

::deep .dxbl-tree-view-node.dxbl-selected {
    background-color: var(--tp-accent-soft);
    border-left: 3px solid var(--tp-accent);
}

/* ----- Animazioni popup/menu DevExpress ----- */
::deep .dxbl-context-menu {
    animation: fadeInDown 0.18s ease;
}

::deep .dxbl-popup {
    animation: zoomIn 0.18s ease;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ----- Method badge animation ----- */
.method-badge {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.request-node:hover .method-badge {
    transform: translateX(-2px);
    box-shadow: 0 2px 8px var(--tp-accent-glow);
}

/* ----- Status pills (status code dots) ----- */
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-success { background-color: var(--tp-success); box-shadow: 0 0 8px var(--tp-success); }
.status-error   { background-color: var(--tp-danger);  box-shadow: 0 0 8px var(--tp-danger);  }
.status-warning { background-color: var(--tp-warning); box-shadow: 0 0 8px var(--tp-warning); }

/* ----- Welcome screen icon pulse ----- */
.api-welcome-screen i {
    animation: pulseOpacity 2.4s ease-in-out infinite;
}

@keyframes pulseOpacity {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.55; }
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .workspace-header h5 { font-size: 1rem; }
    .method-badge        { font-size: 0.6rem; min-width: 40px; }
}

/* ----- Folder icon depth ----- */
.fa-folder {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* ----- Request item indicator (left rail) ----- */
.request-node::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background-color: var(--tp-accent);
    border-radius: 2px;
    transition: height 0.2s ease;
}

.request-node:hover::before {
    height: 80%;
}

/* ----- HTTP method badges: garantire contrasto leggibile su dark ----- */
.badge.bg-primary   { background-color: var(--tp-accent) !important; color: #fff; }
.badge.bg-success   { background-color: var(--tp-success) !important; color: #0a2a23; }
.badge.bg-warning   { background-color: var(--tp-warning) !important; color: #2a1d05; }
.badge.bg-danger    { background-color: var(--tp-danger)  !important; color: #2a0808; }
.badge.bg-info      { background-color: var(--tp-info)    !important; color: #052838; }
.badge.bg-secondary { background-color: rgba(255, 255, 255, 0.12) !important; color: var(--bs-body-color); }

/* ----- Tabella: hover row subtle ----- */
.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(124, 92, 255, 0.08);
    color: inherit;
}

/* ----- Alert: bordi morbidi, ombre coerenti ----- */
.alert {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.alert-success { background-color: rgba(45, 212, 168, 0.12); border-color: rgba(45, 212, 168, 0.35); color: #6fe9c5; }
.alert-warning { background-color: rgba(255, 181, 71, 0.12); border-color: rgba(255, 181, 71, 0.35); color: #ffd089; }
.alert-danger  { background-color: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.35); color: #ff9b9b; }
.alert-info    { background-color: rgba(78, 201, 240, 0.12); border-color: rgba(78, 201, 240, 0.35); color: #92dcf5; }
.alert-secondary { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--bs-body-color); }

/* ----- Form-control focus ----- */
.form-control:focus,
.form-select:focus {
    border-color: var(--tp-accent);
    box-shadow: 0 0 0 0.2rem var(--tp-accent-soft);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Spinner border (Bootstrap) — più visibile su dark */
.spinner-border.text-primary {
    color: var(--tp-accent) !important;
}