/* ✅ SITEMAP STYLING - Dark Theme con StChannel Variables */

.sitemap-content .section-header {
    border-bottom: 2px solid var(--st-primary);
    padding-bottom: 1rem;
}

/* ✅ Card con design dark theme StChannel */
.page-item, .blog-item, .portfolio-item {
    transition: all var(--st-transition-normal);
    border-color: var(--st-card-border);
    background: var(--st-card-bg) !important;
    border-radius: var(--st-radius-md);
    border: 1px solid var(--st-card-border);
    cursor: pointer;
}

.page-item:hover, .blog-item:hover, .portfolio-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--st-card-hover-shadow);
    border-color: var(--st-primary);
    background: var(--st-dark-surface) !important;
}

/* ✅ Card cliccabili */
.clickable-card {
    position: relative;
}

.clickable-card:hover {
    cursor: pointer;
}

/* ✅ Blog items - Box più piccoli */
.blog-item {
    min-height: 180px;
}

.blog-item h6 {
    font-size: 0.9rem;
    line-height: 1.3;
}

.blog-item .text-muted {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ✅ Portfolio items - Box più piccoli */
.portfolio-item {
    min-height: 200px;
}

.portfolio-item h6 {
    font-size: 0.9rem;
    line-height: 1.3;
}

.portfolio-item .text-muted {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ✅ Buttons compatti per sezioni secondarie */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
}

/* ✅ Testi con colori StChannel */
.page-item h5, .blog-item h6, .portfolio-item h6 {
    color: var(--st-text-primary) !important;
    font-weight: var(--st-font-semibold);
}

.page-item .text-muted, .blog-item .text-muted, .portfolio-item .text-muted {
    color: var(--st-text-secondary) !important;
}

.page-item small, .blog-item small, .portfolio-item small {
    color: var(--st-text-muted) !important;
}

/* ✅ Badge rettangolari invece di ovali */
.badge-rect {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
    font-weight: var(--st-font-bold);
    border-radius: var(--st-radius-xs) !important; /* Rettangolari */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-rect.bg-info {
    background: var(--st-secondary-light) !important;
    color: var(--st-black) !important;
}

.badge-rect.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%) !important;
    color: var(--st-black) !important;
}

/* ✅ Badge priorità rettangolari */
.priority-alta, .priority-media, .priority-bassa {
    border-radius: var(--st-radius-xs) !important; /* Rettangolari */
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ✅ Sezioni CTA buttons */
.btn-stchannel-primary {
    background: var(--st-gradient-primary);
    border: none;
    color: var(--st-black);
    font-weight: var(--st-font-bold);
    padding: 0.75rem 1.5rem;
    border-radius: var(--st-radius-button);
    transition: all var(--st-transition-normal);
}

.btn-stchannel-primary:hover {
    background: var(--st-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--st-shadow-primary);
    color: var(--st-black);
}

/* ✅ Sezioni header migliorati */
.section-header {
    border-bottom: 2px solid var(--st-primary);
    padding-bottom: 1rem;
    margin-bottom: 2rem !important;
}

.section-header h2 {
    color: var(--st-text-primary) !important;
}

.section-header small {
    color: var(--st-text-secondary) !important;
}

.section-icon i {
    color: var(--st-primary) !important;
}

/* ✅ Badge priorità con StChannel colors */
.priority-alta {
    background: var(--st-gradient-primary) !important;
    color: var(--st-black) !important;
    font-weight: var(--st-font-bold);
    border-radius: var(--st-radius-sm);
}

.priority-media {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%) !important;
    color: var(--st-white) !important;
    font-weight: var(--st-font-bold);
    border-radius: var(--st-radius-sm);
}

.priority-bassa {
    background: var(--st-gradient-dark) !important;
    color: var(--st-text-secondary) !important;
    font-weight: var(--st-font-bold);
    border-radius: var(--st-radius-sm);
}

/* ✅ Info cards con design StChannel dark */
.info-card {
    transition: transform var(--st-transition-normal);
    background: var(--st-dark-surface) !important;
    border: 1px solid var(--st-card-border) !important;
    border-radius: var(--st-radius-md);
}

.info-card:hover {
    transform: translateY(-3px);
    background: var(--st-dark-elevated) !important;
    box-shadow: var(--st-shadow-primary);
}

.info-card h4 {
    color: var(--st-text-primary) !important;
    font-weight: var(--st-font-bold);
}

.info-card li {
    color: var(--st-text-secondary) !important;
    font-weight: var(--st-font-medium);
}

/* ✅ Statistiche con background StChannel */
.bg-primary.bg-opacity-10,
.bg-success.bg-opacity-10,
.bg-info.bg-opacity-10,
.bg-warning.bg-opacity-10 {
    background: var(--st-dark-card) !important;
    border: 1px solid var(--st-card-border) !important;
    border-radius: var(--st-radius-md) !important;
}

.bg-primary.bg-opacity-10 h4,
.bg-success.bg-opacity-10 h4,
.bg-info.bg-opacity-10 h4,
.bg-warning.bg-opacity-10 h4 {
    color: var(--st-text-primary) !important;
    font-weight: var(--st-font-bold);
}

.bg-primary.bg-opacity-10 small,
.bg-success.bg-opacity-10 small,
.bg-info.bg-opacity-10 small,
.bg-warning.bg-opacity-10 small {
    color: var(--st-text-secondary) !important;
    font-weight: var(--st-font-medium);
}

/* ✅ Icons con colori StChannel */
.bg-primary.bg-opacity-10 .text-primary {
    color: var(--st-primary) !important;
}

.bg-success.bg-opacity-10 .text-success {
    color: var(--st-green-emerald) !important;
}

.bg-info.bg-opacity-10 .text-info {
    color: var(--st-secondary-light) !important;
}

.bg-warning.bg-opacity-10 .text-warning {
    color: #ffc107 !important;
}

/* ✅ Code blocks StChannel style */
code {
    background: var(--st-dark-elevated) !important;
    color: var(--st-primary) !important;
    padding: var(--st-space-xs) var(--st-space-sm);
    border-radius: var(--st-radius-xs);
    font-weight: var(--st-font-medium);
    font-family: var(--st-font-mono);
    border: 1px solid var(--st-card-border);
}

/* ✅ Sezioni principali */
.section-header h3 {
    color: var(--st-text-primary) !important;
    font-weight: var(--st-font-bold);
}

/* ✅ Testi principali con StChannel colors */
.lead.text-muted {
    color: var(--st-text-secondary) !important;
}

small.text-muted {
    color: var(--st-text-muted) !important;
}

/* ✅ Container principale con background */
.container {
    background: transparent;
}

/* ✅ Sezioni segnalazioni con StChannel styling */
.bg-primary.bg-opacity-10:last-child {
    background: var(--st-gradient-dark-card) !important;
    border: 1px solid var(--st-primary) !important;
    border-radius: var(--st-radius-md) !important;
}

.bg-primary.bg-opacity-10:last-child h4 {
    color: var(--st-text-primary) !important;
}

.bg-primary.bg-opacity-10:last-child p {
    color: var(--st-text-secondary) !important;
}

/* ✅ Hover effects avanzati */
.hover-shadow:hover {
    box-shadow: var(--st-shadow-glow);
    transition: all var(--st-transition-normal);
}

/* ✅ Titolo principale con gradient */
.text-gradient {
    background: var(--st-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}