@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDk5IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTNsNTEuNiAyOS45NzQgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODc5IDg5Ljc5MjEgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* =========================
   FLIP CARD STYLES
   ========================= */
.flip-card {
    background-color: transparent;
    perspective: 1000px;
    width: 100%;
    height: 100%;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* =========================
   ITEM HIGHLIGHT EFFECTS - UPDATED WITH CLICK-TO-SELECT
   ========================= */

/* Base styles for item containers */
.item-view-container {
    transition: all 0.3s ease !important;
    border-radius: 4px !important;
    padding: 8px !important;
    margin: 2px 0 !important;
    position: relative !important;
    cursor: pointer !important;
    /* Add border for visibility during testing */
    border: 1px solid transparent !important;
}

/* Simple hover effect that should definitely work */
.item-view-container:hover {
    background-color: rgba(25, 118, 210, 0.1) !important;
    border-color: rgba(25, 118, 210, 0.3) !important;
    transform: translateX(2px) !important;
}

/* More specific selectors to override any conflicts */
ul .item-view-container:hover,
li .item-view-container:hover,
div .item-view-container:hover {
    background-color: rgba(25, 118, 210, 0.1) !important;
    border-color: rgba(25, 118, 210, 0.3) !important;
    transform: translateX(2px) !important;
}

/* Override any MudBlazor container styles */
.mud-container .item-view-container:hover,
.mud-paper .item-view-container:hover,
.mud-stack .item-view-container:hover {
    background-color: rgba(25, 118, 210, 0.1) !important;
    border-color: rgba(25, 118, 210, 0.3) !important;
    transform: translateX(2px) !important;
}

/* NEW: Selected state - persistent selection with click */
.item-view-container.selected {
    background-color: rgba(25, 118, 210, 0.2) !important;
    border: 2px solid rgba(25, 118, 210, 0.6) !important;
    border-left: 4px solid rgba(25, 118, 210, 0.8) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.25) !important;
    z-index: 1 !important;
}

/* Selected state with higher specificity */
ul .item-view-container.selected,
li .item-view-container.selected,
div .item-view-container.selected,
.mud-container .item-view-container.selected,
.mud-paper .item-view-container.selected,
.mud-stack .item-view-container.selected {
    background-color: rgba(25, 118, 210, 0.2) !important;
    border: 2px solid rgba(25, 118, 210, 0.6) !important;
    border-left: 4px solid rgba(25, 118, 210, 0.8) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.25) !important;
    z-index: 1 !important;
}

/* Selected state should override hover */
.item-view-container.selected:hover {
    background-color: rgba(25, 118, 210, 0.25) !important;
    border: 2px solid rgba(25, 118, 210, 0.7) !important;
    border-left: 4px solid rgba(25, 118, 210, 0.9) !important;
    transform: translateX(8px) !important;
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.3) !important;
}

/* Descendant highlighting for selected items */
.item-view-container.descendant-selected {
    background-color: rgba(25, 118, 210, 0.08) !important;
    border-left: 3px solid rgba(25, 118, 210, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* JavaScript-based descendant highlighting */
.item-view-container.descendant-highlighted {
    background-color: rgba(25, 118, 210, 0.04) !important;
    border-left: 2px solid rgba(25, 118, 210, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhanced descendant highlighting for mobile - make it more visible */
@media (max-width: 599px) {
    .item-view-container.descendant-selected {
        background-color: rgba(25, 118, 210, 0.15) !important;
        border-left: 5px solid rgba(25, 118, 210, 0.8) !important;
        transform: translateX(3px) !important;
        box-shadow: inset 0 0 0 2px rgba(25, 118, 210, 0.2) !important;
        border-radius: 4px !important;
    }
    
    .item-view-container.descendant-highlighted {
        background-color: rgba(25, 118, 210, 0.12) !important;
        border-left: 4px solid rgba(25, 118, 210, 0.6) !important;
        transform: translateX(2px) !important;
        box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.15) !important;
        border-radius: 4px !important;
    }
}

/* Ensure descendant highlighting works with very high specificity */
ul li .item-view-container.descendant-selected,
li .item-view-container.descendant-selected,
div .item-view-container.descendant-selected,
.mud-container .item-view-container.descendant-selected,
.mud-paper .item-view-container.descendant-selected,
.mud-stack .item-view-container.descendant-selected,
.responsive-content-wrapper .item-view-container.descendant-selected {
    background-color: rgba(25, 118, 210, 0.1) !important;
    border-left: 4px solid rgba(25, 118, 210, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 4px !important;
}

ul li .item-view-container.descendant-highlighted,
li .item-view-container.descendant-highlighted,
div .item-view-container.descendant-highlighted,
.mud-container .item-view-container.descendant-highlighted,
.mud-paper .item-view-container.descendant-highlighted,
.mud-stack .item-view-container.descendant-highlighted,
.responsive-content-wrapper .item-view-container.descendant-highlighted {
    background-color: rgba(25, 118, 210, 0.06) !important;
    border-left: 3px solid rgba(25, 118, 210, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 4px !important;
}

/* Additional debug class for testing descendant highlighting */
.debug-descendant-test {
    background-color: rgba(255, 0, 0, 0.3) !important;
    border: 3px solid red !important;
    outline: 2px solid yellow !important;
    transform: translateX(5px) !important;
}

/* Desktop-only hover effects */
@media (hover: hover) and (pointer: fine) {
    /* Don't apply hover styles if item is selected */
    .item-view-container:not(.selected):hover {
        background-color: rgba(25, 118, 210, 0.08) !important;
        box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15) !important;
        transform: translateX(4px) !important;
        border-left: 3px solid rgba(25, 118, 210, 0.4) !important;
    }
    
    /* More specific targeting for non-selected items */
    ul li .item-view-container:not(.selected):hover,
    .responsive-content-wrapper .item-view-container:not(.selected):hover {
        background-color: rgba(25, 118, 210, 0.08) !important;
        box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15) !important;
        transform: translateX(4px) !important;
        border-left: 3px solid rgba(25, 118, 210, 0.4) !important;
    }
    
    /* Descendant highlighting for hover (only if not selected) */
    .item-view-container:not(.selected):hover ~ ul .item-view-container,
    .item-view-container:not(.selected):hover + ul .item-view-container {
        background-color: rgba(25, 118, 210, 0.04) !important;
        border-left: 2px solid rgba(25, 118, 210, 0.2) !important;
    }
}

/* JavaScript-based descendant highlighting */
.item-view-container.descendant-highlighted {
    background-color: rgba(25, 118, 210, 0.04) !important;
    border-left: 2px solid rgba(25, 118, 210, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile tap effects */
@media (hover: none) and (pointer: coarse) {
    .item-view-container {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .item-view-container.tapped {
        background-color: rgba(25, 118, 210, 0.12) !important;
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2) !important;
        transform: translateX(6px) !important;
        border-left: 4px solid rgba(25, 118, 210, 0.6) !important;
    }
    
    /* Don't prevent text selection in table cells on mobile */
    .item-view-container table,
    .item-view-container table *,
    table .item-view-container,
    table .item-view-container * {
        -webkit-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        user-select: auto !important;
        -webkit-touch-callout: auto !important;
    }
}

/* Active state for both desktop and mobile */
.item-view-container.active,
.item-view-container:active {
    background-color: rgba(25, 118, 210, 0.15) !important;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.25) !important;
    transform: translateX(8px) scale(1.02) !important;
    border-left: 4px solid rgba(25, 118, 210, 0.8) !important;
}

/* Ensure smooth transitions for all states */
.item-view-container,
.item-view-container.tapped,
.item-view-container.active,
.item-view-container.selected,
.item-view-container.descendant-highlighted,
.item-view-container.descendant-selected {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Prevent text selection during tap interactions on mobile for non-table content */
@media (hover: none) {
    .item-view-container:not(.in-table) {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }
}

/* Optional: Add a subtle pulse animation for tapped state */
@keyframes tapPulse {
    0% { box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2); }
    50% { box-shadow: 0 6px 16px rgba(25, 118, 210, 0.3); }
    100% { box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2); }
}

@media (hover: none) and (pointer: coarse) {
    .item-view-container.tapped {
        animation: tapPulse 0.6s ease-in-out !important;
    }
}

/* Ensure hover effects work over any background or container styles */
.mud-stack .item-view-container:not(.selected):hover,
.mud-paper .item-view-container:not(.selected):hover,
.mud-container .item-view-container:not(.selected):hover,
markdown .item-view-container:not(.selected):hover,
ul li .mud-stack .item-view-container:not(.selected):hover {
    background-color: rgba(25, 118, 210, 0.08) !important;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15) !important;
    transform: translateX(4px) !important;
    border-left: 3px solid rgba(25, 118, 210, 0.4) !important;
}

/* Debug styles for development - add these when debugging selection issues */
.debug-borders .item-view-container {
    border: 2px dashed #ff4444 !important;
    outline: 1px solid #00ff00 !important;
}

.debug-borders .item-view-container.selected {
    border: 3px solid #ff0000 !important;
    outline: 2px solid #ffff00 !important;
}

.debug-borders .item-view-container[data-item-id]:before {
    content: "ID: " attr(data-item-id);
    position: absolute;
    top: -20px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 2px;
    z-index: 1000;
}

/* Test class for manual testing */
.item-view-container[data-debug="true"] {
    border: 2px solid red !important;
}

.item-view-container[data-debug="true"]:hover {
    border: 2px solid green !important;
}

/* Force visible cursor for debugging */
.debug-borders .item-view-container {
    cursor: pointer !important;
}

/* =========================
   EMBEDDED VIDEO STYLING
   ========================= */
.embedded-video-container {
    width: 100%;
    max-width: 800px;
    margin: 1rem 0;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.direct-video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-error {
    padding: 2rem;
    text-align: center;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    color: #6c757d;
}

.video-error-details {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    color: #856404;
    text-align: left;
}

.video-error-details ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.video-error-details code {
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.video-fallback {
    padding: 2rem;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
}

.video-fallback img {
    margin-top: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
    font-style: italic;
}

.video-debug-info {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #004085;
}

@media (max-width: 768px) {
    .embedded-video-container {
        margin: 0.5rem 0;
    }
    
    .video-error,
    .video-error-details,
    .video-fallback {
        padding: 1rem;
    }
}

/* =========================
   TEXT JUSTIFICATION
   ========================= */
/* High specificity selectors to ensure text justification works */
markdown.justified-text,
.justified-text,
ul li markdown.justified-text,
div markdown.justified-text,
li markdown.justified-text {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

/* Target ALL elements within justified markdown content with very high specificity */
markdown.justified-text *,
.justified-text *,
ul li markdown.justified-text *,
div markdown.justified-text *,
li markdown.justified-text * {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

/* Specifically target paragraph and div elements that Markdig generates */
markdown.justified-text p,
.justified-text p,
markdown.justified-text div,
.justified-text div,
markdown.justified-text li,
.justified-text li,
ul li markdown.justified-text p,
div markdown.justified-text p,
li markdown.justified-text p,
ul li markdown.justified-text div,
div markdown.justified-text div,
li markdown.justified-text div,
markdown.justified-text span,
.justified-text span {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

/* Keep headers left-aligned even in justified content */
markdown.justified-text h1,
markdown.justified-text h2,
markdown.justified-text h3,
markdown.justified-text h4,
markdown.justified-text h5,
markdown.justified-text h6,
.justified-text h1,
.justified-text h2,
.justified-text h3,
.justified-text h4,
.justified-text h5,
.justified-text h6 {
    text-align: left !important;
}

/* Keep special elements properly aligned */
markdown.justified-text blockquote,
markdown.justified-text pre,
markdown.justified-text code,
.justified-text blockquote,
.justified-text pre,
.justified-text code,
markdown.justified-text table,
markdown.justified-text th,
markdown.justified-text td,
.justified-text table,
.justified-text th,
.justified-text td,
/* Additional table-specific selectors with higher specificity */
markdown.justified-text table *,
.justified-text table *,
markdown.justified-text table th,
markdown.justified-text table td,
.justified-text table th,
.justified-text table td,
.case-study-content markdown.justified-text table th,
.case-study-content markdown.justified-text table td,
.case-study-content .justified-text table th,
.case-study-content .justified-text table td,
.responsive-content-wrapper markdown.justified-text table th,
.responsive-content-wrapper markdown.justified-text table td,
.responsive-content-wrapper .justified-text table th,
.responsive-content-wrapper .justified-text table td,
ul li markdown.justified-text table th,
ul li markdown.justified-text table td,
ul li .justified-text table th,
ul li .justified-text table td {
    text-align: left !important;
    text-justify: auto !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
}

/* =========================
   ICON FALLBACK STYLING
   ========================= */
/* Hide question marks from missing icons */
/*iconify-icon:not([icon]):before,
iconify-icon:empty:before,
iconify-icon[icon=""]:before {
    content: none !important;
}*/

/* Hide iconify icons that fail to load */
/*iconify-icon:not([data-icon]):not([data-inline]) {
    display: none !important;
}*/

/* Ensure proper fallback for missing icons */
/*iconify-icon {
    display: inline-block;
}

iconify-icon:empty {
    display: none !important;
}*/

/* FontAwesome fallback styling */
.fa, .fas, .far, .fal, .fad, .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
}

.fa:before, .fas:before, .far:before, .fal:before, .fad:before, .fab:before {
    font-family: inherit;
}

/* Prevent question marks and unknown character display */
.fa:not([class*=" fa-"]):before,
.fas:not([class*=" fa-"]):before,
.far:not([class*=" fa-"]):before {
    content: none !important;
}

a.clickable:hover {
    color: #469fdf;
    text-underline-position: below;
    text-decoration: underline;
    cursor: pointer;
}

/*Checkvist Colors*/

.notMarked {
    background-color: white;
    color: black;
}

.fg1 {
    color: #E33D28;
    background-color: white;
}

.fg2 {
    color: #005BFF;
    background-color: white;
}

.fg3 {
    color: #6EC137;
    background-color: white;
}

.bg1 {
    background-color: #991113;
    color: white;
}

.bg2 {
    background-color: #001BA7;
    color: white;
}

.bg3 {
    background-color: #155600;
    color: white;
}

.bg7 {
    background-color: #BF7D23;
    color: white;
}

.bg8 {
    background-color: #D05F35;
    color: white;
}

.bg9 {
    background-color: #714490;
    color: white;
}

.notMarked > .mud-treeview-item-content:first-child {
    background-color: white;
    color: black;
}

.fg1 > .mud-treeview-item-content:first-child {
    color: #E33D28;
    background-color: white;
}

.fg2 > .mud-treeview-item-content:first-child {
    color: #005BFF;
    background-color: white;
}

.fg3 > .mud-treeview-item-content:first-child {
    color: #6EC137;
    background-color:white;
}

.bg1 > .mud-treeview-item-content:first-child {
    background-color: #991113;
    color: white;
}

.bg2 > .mud-treeview-item-content:first-child {
    background-color: #001BA7;
    color: white;
}

.bg3 > .mud-treeview-item-content:first-child {
    background-color: #155600;
    color: white;
}

.bg7 > .mud-treeview-item-content:first-child {
    background-color: #BF7D23;
    color: white;
}

.bg8 > .mud-treeview-item-content:first-child {
    background-color: #D05F35;
    color: white;
}

.bg9 > .mud-treeview-item-content:first-child {
    background-color: #714490;
    color:white;
}

/* =========================
   GENERAL LIST STYLING
   ========================= */
ul {
    margin-bottom: 20px
}

/* =========================
   CLICKABLE CARD STYLING
   ========================= */
.clickable-card {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.clickable-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.clickable-card:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* =========================
   CARD AND LAYOUT STYLING
   ========================= */
.case-study-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .case-study-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

.case-study-content {
    margin: 0 auto;
    max-width: calc(100% - 4rem); /* 2-inch gutters on each side for lg+ */
}

@media (min-width: 1200px) {
    .case-study-content {
        max-width: calc(100% - 8rem); /* Increased gutters for larger screens */
    }
}

@media (max-width: 599px) {
    .case-study-content {
        max-width: 100%;
        margin: 0;
        padding: 0 1rem; /* Small padding for mobile */
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================
   MARKDOWN STYLING
   ========================= */
markdown a {
    text-decoration: underline;
    color: #15c;
}

markdown h4, h3 {
    margin-top: 1em;
}

markdown ul li,
markdown2 ul li {
    list-style-type: circle;
}

markdown li,
markdown2 li {
    margin-left: 25px;
}

markdown ul,
markdown ol {
    margin-bottom: 2em;
}

/* Enhanced markdown paragraph spacing for proper line break handling */
.case-study-content markdown p,
.responsive-content-wrapper markdown p,
markdown p,
ul li markdown p,
div markdown p {
    margin-bottom: 1.2em !important;
    line-height: 1.6 !important;
}

/* Handle hardline breaks created by Markdig */
.case-study-content markdown br,
.responsive-content-wrapper markdown br,
markdown br,
ul li markdown br,
div markdown br {
    display: block !important;
    margin-bottom: 0.8em !important;
    line-height: 1.2 !important;
}

/* Special handling for consecutive paragraphs */
.case-study-content markdown p + p,
.responsive-content-wrapper markdown p + p,
markdown p + p {
    margin-top: 0.8em !important;
}

/* Handle line breaks within paragraphs */
.case-study-content markdown p br,
.responsive-content-wrapper markdown p br,
markdown p br {
    line-height: 1.4 !important;
    margin-bottom: 0.6em !important;
}

/* Ensure last elements don't have extra spacing */
.case-study-content markdown > *:last-child,
.responsive-content-wrapper markdown > *:last-child,
markdown > *:last-child {
    margin-bottom: 0 !important;
}

/* External link styling - add visual indicator for links that open in new tab */
.case-study-content markdown a[target="_blank"]:after {
    content: "";
    font-size: 0.8em;
    opacity: 0.7;
    text-decoration: none;
}

markdown.noMargin ul,
markdown.noMargin ol,
markdown.noMargin p {
    margin-top: 0em;
    margin-bottom: 0em;
}

.mud-treeview-item-content markdown p {
    /* No bottom margin when inside Tree View control */
    margin-bottom: 0px !important;
}

/* =========================
   TABLE STYLING AND MOBILE RESPONSIVENESS
   ========================= */

/* Markdown table styling - applies to ALL markdown tables on all screen sizes */
markdown table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

markdown th,
markdown td {
    padding: 0.75rem 1.5rem; /* Increased horizontal padding from default */
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

markdown th {
    font-weight: 600;
    background-color: #f5f5f5;
    border-bottom: 2px solid #d0d0d0;
}

markdown tr:hover {
    background-color: #f9f9f9;
}

/* Prevent wrapping in the first column */
markdown th:first-child,
markdown td:first-child {
    white-space: nowrap;
}

/* Ensure proper spacing for table cells with longer content */
markdown td p {
    margin: 0;
    line-height: 1.5;
}

/* Also apply to case-study-content and responsive-content-wrapper contexts */
.case-study-content markdown table,
.case-study-content table,
.responsive-content-wrapper table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.case-study-content markdown th,
.case-study-content markdown td,
.case-study-content table th,
.case-study-content table td,
.responsive-content-wrapper table th,
.responsive-content-wrapper table td {
    padding: 0.75rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.case-study-content markdown th,
.case-study-content table th,
.responsive-content-wrapper table th {
    font-weight: 600;
    background-color: #f5f5f5;
    border-bottom: 2px solid #d0d0d0;
}

.case-study-content markdown tr:hover,
.case-study-content table tr:hover,
.responsive-content-wrapper table tr:hover {
    background-color: #f9f9f9;
}

/* Prevent wrapping in the first column for all contexts */
.case-study-content markdown th:first-child,
.case-study-content markdown td:first-child,
.case-study-content table th:first-child,
.case-study-content table td:first-child,
.responsive-content-wrapper table th:first-child,
.responsive-content-wrapper table td:first-child {
    white-space: nowrap;
}

.case-study-content markdown td p,
.case-study-content table td p,
.responsive-content-wrapper table td p {
    margin: 0;
    line-height: 1.5;
}

/* Table responsiveness - ensure horizontal scrolling on mobile */
markdown {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Wrap markdown tables in a scrollable container */
markdown table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* Mobile-specific table styles */
@media (max-width: 599px) {
    markdown table,
    .case-study-content markdown table,
    .case-study-content table,
    .responsive-content-wrapper table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 1rem 0;
    }
    
    /* Ensure table doesn't break layout */
    markdown th,
    markdown td,
    .case-study-content markdown th,
    .case-study-content markdown td,
    .case-study-content table th,
    .case-study-content table td,
    .responsive-content-wrapper table th,
    .responsive-content-wrapper table td {
        padding: 0.5rem 1rem;
        min-width: 100px; /* Ensure minimum cell width */
    }
    
    /* First column stays visible */
    markdown th:first-child,
    markdown td:first-child,
    .case-study-content markdown th:first-child,
    .case-study-content markdown td:first-child,
    .case-study-content table th:first-child,
    .case-study-content table td:first-child,
    .responsive-content-wrapper table th:first-child,
    .responsive-content-wrapper table td:first-child {
        white-space: nowrap;
        position: sticky;
        left: 0;
        background-color: #fff;
        z-index: 1;
    }
    
    /* Header first column gets special treatment */
    markdown th:first-child,
    .case-study-content markdown th:first-child,
    .case-study-content table th:first-child,
    .responsive-content-wrapper table th:first-child {
        background-color: #f5f5f5;
    }
}

/* Ensure tables don't interfere with item interactions and support proper touch scrolling */
table, 
.mud-table,
.mud-data-grid,
.mud-table-container,
.mud-data-grid-container,
markdown table,
.case-study-content table,
.responsive-content-wrapper table {
    touch-action: pan-x pan-y !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Specific handling for MudBlazor table components */
.mud-table *,
.mud-data-grid *,
.mud-table-container *,
.mud-data-grid-container * {
    pointer-events: auto !important;
    touch-action: auto !important;
}

/* =========================
   BLOG NAVIGATION STYLING (XS SCREEN FIX)
   ========================= */
/* Ensure blog navigation buttons wrap properly on xs screens */
@media (max-width: 599px) {
    .nav-button {
        white-space: normal !important;
        text-align: left !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    
    .nav-button.next {
        text-align: right !important;
        align-items: flex-end !important;
    }
    
    .nav-button .nav-label {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
    
    .nav-button .nav-title {
        font-size: 0.875rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}