/* ==========================================================================
   OPTIONAL_ENHANCEMENTS.css — cross-cutting visual polish
   Tutto theme-aware via bs-vars / tp-vars definite in site.css: niente colori
   letterali qui, altrimenti il tema chiaro non li segue.
   ========================================================================== */

/* ----- Scrollbar ----- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--tp-scrollbar-thumb) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--tp-scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tp-scrollbar-thumb-hover);
    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: var(--tp-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    border-color: var(--tp-accent-line);
    box-shadow: var(--tp-elevation), 0 0 0 1px var(--tp-accent-soft);
}

.card-header {
    background-color: var(--tp-surface-raised);
    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: var(--tp-surface-hover);
}

::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;
}

/* ----- 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); }

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

/* ----- Folder icon depth ----- */
.fa-folder {
    filter: drop-shadow(var(--tp-icon-shadow));
}

/* ----- HTTP method badges: il fondo e' pieno in entrambi i temi, quindi il testo
   scuro/chiaro qui e' fisso e non passa dai token di tema. ----- */
.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: var(--tp-border-strong) !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: var(--tp-shadow-md);
}

.alert-success { background-color: rgba(45, 212, 168, 0.12); border-color: rgba(45, 212, 168, 0.35); color: var(--tp-success-text); }
.alert-warning { background-color: rgba(255, 181, 71, 0.12); border-color: rgba(255, 181, 71, 0.35); color: var(--tp-warning-text); }
.alert-danger  { background-color: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.35); color: var(--tp-danger-text); }
.alert-info    { background-color: rgba(78, 201, 240, 0.12); border-color: rgba(78, 201, 240, 0.35); color: var(--tp-info-text); }
.alert-secondary { background-color: var(--tp-surface-raised); border-color: var(--tp-border-subtle); 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;
}