/* --- Hide default triangle marker --- */
        .view-more-details-reorder>summary {
            list-style: none;
        }

        .view-more-details-reorder>summary::-webkit-details-marker {
            display: none;
        }

        /* --- Logic for swapping "View more" / "View less" text --- */
        .view-more-details-reorder .view-less-text {
            display: none;
        }

        .view-more-details-reorder[open] .view-less-text {
            display: inline;
        }

        .view-more-details-reorder[open] .view-more-text {
            display: none;
        }

        /* 
      --- CORE REORDERING LOGIC ---
      We use Flexbox to visually reorder the <summary> and the content div.
    */

        /* 1. Turn the <details> element into a column-based flex container. */
        .view-more-details-reorder {
            display: flex;
            flex-direction: column;
        }

        /* 2. Make the summary button align to the start, not stretch */
        .view-more-details-reorder>summary {
            align-self: flex-start;
        }

        /* 3. When the <details> is [open], change the visual order of its children. */
        .view-more-details-reorder[open]>.expandable-content {
            order: 1;
            /* The content div now comes first visually. */
        }

        .view-more-details-reorder[open]>summary {
            order: 2;
            /* The summary (our "button") now comes second visually. */
        }

        .summary-widget,
        .summary-widget-nested {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            text-align: left;
            cursor: pointer;
            list-style: none;
            /* Hide default triangle marker */
        }

        /* For Webkit browsers like Chrome, Safari */
        .summary-widget::-webkit-details-marker,
        .summary-widget-nested::-webkit-details-marker {
            display: none;
        }

        /* Style for nested headers */
        .summary-widget-nested {
            font-weight: 600;
            /* semibold */
            color: #374151;
            /* gray-800 */
        }

        .dark .summary-widget-nested {
            color: #e5e7eb;
            /* dark:text-gray-200 */
        }

        /* Rotate the chevron icon when the details element is open */
        .details-widget[open]>summary>.fa-chevron-down {
            transform: rotate(180deg);
        }

        /* --- Base State (for All Buttons) --- */
        .tab-btn {
            /* Shape and Internal Spacing (CRITICAL) */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            /* This creates the "pill" shape */
            padding: 0.5rem 1.25rem;
            /* vertical & horizontal padding (py-2 px-5) */

            /* Font and Text Styling */
            font-weight: 600;
            font-size: 0.875rem;
            /* text-sm */

            /* Animation */
            transition: all 200ms ease-in-out;
        }

        /* --- Inactive Button State --- */
        .tab-btn:not(.active) {
            /* Appearance: A clean, outlined button */
            background-color: #fff;
            border: 2px solid rgb(209, 213, 219);
            /* border-gray-300 */
            color: rgb(107, 114, 128);
            /* text-gray-500 */
        }

        /* --- Inactive Button Hover State --- */
        .tab-btn:not(.active):hover {
            background-color: rgb(243, 244, 246);
            /* bg-gray-100 */
            border-color: rgb(156, 163, 175);
            /* border-gray-400 */
            transform: translateY(-2px);
            /* Subtle lift effect */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        /* --- Active Button State --- */
        .tab-btn.active {
            /* Appearance: A solid, "pressed" button */
            background-color: #112432;
            /* your 'primary' color */
            color: #ffffff;
            /* text-white */
            border: 2px solid transparent;
            box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
            /* shadow-inner */

            /* Disable extra effects */
            cursor: default;
            transform: translateY(0);
        }


        /* === DARK MODE STYLES === */

        .dark .tab-btn:not(.active) {
            border-color: rgb(75, 85, 99);
            /* dark:border-gray-600 */
            color: rgb(156, 163, 175);
            /* dark:text-gray-400 */
        }

        .dark .tab-btn:not(.active):hover {
            background-color: rgba(71, 85, 105, 0.5);
            /* dark:bg-slate-700/50 */
            border-color: rgb(107, 114, 128);
            /* dark:border-gray-500 */
        }

        .dark .tab-btn.active {
            background-color: #e01321;
            /* your 'accent' color for dark mode */
            color: #ffffff;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
            /* For Chrome, Safari, and Opera */
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            /* For IE and Edge */
            scrollbar-width: none;
            /* For Firefox */
        }