/* =========================================================
   01. Trendition Section Shell
   File: wwwroot/css/trendeer-trendition-section.css
   ========================================================= */

.tx-section {
    margin: 28px 0;
}

.tx-section-card {
    background: #111827 !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px !important;
    color: #f5f7fb;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.tx-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(circle at top right, rgba(139,92,246,.18), transparent 42%), linear-gradient(90deg, rgba(139,92,246,.10), rgba(17,24,39,1));
}

.tx-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tx-section-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(139,92,246,.16);
    border: 1px solid rgba(139,92,246,.35);
    flex: 0 0 auto;
}

    .tx-section-icon .mud-icon-root {
        color: #c4b5fd;
        font-size: 28px;
    }

.tx-section-title h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.tx-section-title p {
    margin: 5px 0 0;
    color: #9ca3af;
    font-size: 13px;
}

.tx-section-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

    .tx-section-actions .mud-icon-button {
        color: #d1d5db !important;
    }

        .tx-section-actions .mud-icon-button:hover {
            background: rgba(139,92,246,.12) !important;
        }

    .tx-section-actions .mud-button {
        text-transform: none;
        font-weight: 700;
        color: #c4b5fd !important;
    }

.tx-section-body {
    padding: 22px;
}

    /* Modernise common legacy inner content without changing old models */

    .tx-section-body .container {
        max-width: none;
        width: 100%;
        padding: 0;
    }

    .tx-section-body .rounded.bg-white,
    .tx-section-body .card,
    .tx-section-body .newspaper-article,
    .tx-section-body .e-card {
        background: #192133 !important;
        color: #f5f7fb !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 18px !important;
        box-shadow: none !important;
    }

    .tx-section-body a {
        color: #c4b5fd;
        text-decoration: none;
    }

        .tx-section-body a:hover {
            color: white;
            text-decoration: underline;
        }

    .tx-section-body .text-black,
    .tx-section-body .text-dark {
        color: #f5f7fb !important;
    }

    .tx-section-body .text-muted,
    .tx-section-body .text-gray-600 {
        color: #9ca3af !important;
    }

    .tx-section-body img {
        border-radius: 14px;
    }

    .tx-section-body hr {
        border-color: rgba(255,255,255,.08);
    }

    /* Syncfusion/Radzen soft dark overrides inside modern sections */

    .tx-section-body .e-grid,
    .tx-section-body .e-tab,
    .tx-section-body .rz-card,
    .tx-section-body .rz-panel {
        background: #192133 !important;
        color: #f5f7fb !important;
        border-color: rgba(255,255,255,.08) !important;
    }

    .tx-section-body .e-headercell,
    .tx-section-body .e-rowcell {
        background: #192133 !important;
        color: #f5f7fb !important;
        border-color: rgba(255,255,255,.08) !important;
    }

    .tx-section-body .e-tab-header,
    .tx-section-body .e-toolbar {
        background: #111827 !important;
        border-color: rgba(255,255,255,.08) !important;
    }

@media(max-width: 768px) {
    .tx-section {
        margin: 18px 0;
    }

    .tx-section-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .tx-section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .tx-section-body {
        padding: 16px;
    }

    .tx-section-title h2 {
        font-size: 19px;
    }
}