/*
 * CrowdCent Challenge Dark Mode Theme
 * Comprehensive dark mode overhaul integrating old dark colors and brand colors.
 * ----------------------------------------------------------------------------
 * Refactored and organized into sections for improved maintainability.
 */

/*=========================================================================
  1. Global Variables
=========================================================================*/
:root {
    /* Brand Colors */
    --brand-primary: #005380;
    --brand-primary-light: #006ba6;
    --brand-accent: #62e4fb;
    --brand-accent-light: #7bd4ff;

    /* Theme Colors */
    --bg-primary: #001926;
    /* Deep abyss */
    --bg-secondary: #01334a;
    --bg-dark-subtle: #0a2936;
    /* Slightly lighter dark for cards */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.6);
    --border-color: rgba(98, 228, 251, 0.2);
    /* Use accent with alpha */
    --border-color-translucent: rgba(255, 255, 255, 0.1);
    /* Keep for other borders */

    /* Component Colors */
    --card-bg: var(--bg-dark-subtle);
    /* Use the new subtle dark */
    --card-header-bg: var(--bg-primary);
    /* Match main background */

    /* Define a dedicated input background and text color */
    --input-bg: #ffffff;
    --input-text: #000000;

    /* Component Properties */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --transition-base: all 0.2s ease-in-out;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --card-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Defined consistent shadow */
}

/*=========================================================================
  2. Resets & Base Elements
=========================================================================*/
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/*=========================================================================
  3. Global Base Styles
=========================================================================*/
body {
    font-family: "Poppins", sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Blockquote styling for blog content */
blockquote {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--accent);
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 0.25rem;
    font-style: italic;
    position: relative;
}

blockquote p {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote strong,
blockquote b {
    color: var(--text-primary);
    font-weight: 600;
}

blockquote::before {
    content: "\201C";
    font-size: 2rem;
    position: absolute;
    left: 0.5rem;
    top: -0.5rem;
    color: var(--brand-accent);
    opacity: 0.2;
    font-family: Georgia, serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary) !important;
}

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

.text-accent {
    color: var(--brand-accent) !important;
}

.bg-accent {
    background-color: var(--brand-accent) !important;
    color: var(--bg-primary) !important;
}

.lead {
    color: var(--text-primary);
    opacity: 0.9;
}

/*=========================================================================
  4. Links
=========================================================================*/
a {
    color: var(--brand-accent);
    text-decoration: none;
}

a:hover {
    color: var(--text-primary);
}

/*=========================================================================
  5. Container & Layout
=========================================================================*/
.container.flex-grow-1 {
    flex-grow: 1;
    padding: 2rem 15px;
    background-color: var(--bg-primary);
    border-radius: 0 0 1rem 1rem;
    margin-bottom: 2rem;
}

/*=========================================================================
  6. Navigation
=========================================================================*/
.navbar {
    padding: 1rem 0;
    background-color: var(--bg-primary);
}

/* Breadcrumb styling - make separators lighter */
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-muted);
    opacity: 0.8;
}

.navbar-brand {
    padding: 0;
    margin: 0 2rem 0 0;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 2.5rem;
    width: auto;
    min-width: 120px;
    object-fit: contain;
}

.navbar-dark .navbar-nav {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 0.9em;
    gap: 0.5rem;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav button.nav-link {
    padding: 0.25rem 0.75rem;
    color: var(--text-primary);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav button.nav-link:hover {
    color: var(--brand-accent) !important;
    opacity: 1 !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #24aac2 !important;
    opacity: 1;
}

.navbar-dark.bg-primary {
    background-color: var(--bg-primary) !important;
}

/* Mobile navigation styles */
@media (max-width: 991.98px) {

    /* Align navbar items to right side for thumb accessibility */
    .navbar-collapse {
        padding-top: 0.5rem;
        text-align: right;
    }

    /* Make both nav menus align to the right */
    .navbar-dark .navbar-nav {
        gap: 0;
        justify-content: flex-end;
    }

    /* Override me-auto class in mobile view to prevent left alignment */
    .navbar-nav.me-auto {
        margin-right: 0 !important;
    }

    /* Right-align nav item text */
    .navbar-dark .navbar-nav .nav-item {
        display: flex;
        justify-content: flex-end;
    }

    /* Reduce vertical padding on nav links */
    .navbar-dark .navbar-nav .nav-link,
    .navbar-dark .navbar-nav button.nav-link {
        padding: 0.35rem 0.75rem;
    }

    /* Remove first-child specific margin since we're using collapse padding */
    .navbar-nav>li:first-child {
        margin-top: 0;
    }

    /* Make divider spacing more consistent with nav items and align right */
    .navbar-collapse .border-top {
        margin: 0.35rem 0;
        border-top-width: 1px !important;
        opacity: 0.25 !important;
    }
}

/*=========================================================================
  7. Buttons
=========================================================================*/
.btn {
    transition: var(--transition-base);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Primary and Accent Buttons - consolidated */
.btn-primary,
.btn-accent,
.btn-primary-alt {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--bg-primary) !important;
}

.btn-primary,
.btn-accent,
.btn-primary-alt {

    &:hover,
    &:focus,
    &:active,
    &.active,
    &:active:focus {
        background-color: var(--text-primary) !important;
        border-color: var(--text-primary) !important;
        color: var(--bg-primary) !important;
        box-shadow: var(--shadow-sm) !important;
    }
}

/* Small button variant */
.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    font-weight: 500;
}

/* Ensure icons in small buttons are properly sized */
.btn-sm i {
    font-size: 0.875rem;
}

/* Outline Primary Buttons */
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: var(--text-primary) !important;
        border-color: var(--text-primary) !important;
        color: var(--bg-primary) !important;
        box-shadow: var(--shadow-sm) !important;
    }
}

/* Accent Link Button Styles */
.btn-accent-link {
    background: transparent;
    border: none;
    color: var(--brand-accent);
    text-decoration: none;
    padding: 0;
    margin: 0.5rem 0;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;

    &::after {
        content: " \2192";
        /* Unicode right arrow */
        margin-left: 0.5rem;
        transition: color 0.2s ease;
    }

    &:hover {
        color: #ffffff;
    }
}

/*=========================================================================
  8. Cards & Modals
=========================================================================*/
.card,
.modal-content {
    border: 1px solid var(--border-color);
    /* Use the new accent-based border */
    transition: none;
    /* Ensure no transitions applied here */
    /* backdrop-filter: blur(8px); - Removed for sharper look */
    /* -webkit-backdrop-filter: blur(8px); - Removed */
    background-color: var(--card-bg);
    /* Use the new subtle dark */
    box-shadow: var(--card-shadow);
    /* Apply consistent shadow */
    border-radius: 0 !important;
    /* Maintain brutalist edge */
    margin-bottom: 1.5rem;
    /* Consistent spacing */
}

/* New modifier class for accented border */
.card-accent-border {
    border-left: 3px solid var(--brand-accent) !important;
}

/* Override modal-content specifics if needed, otherwise it inherits */
.modal-content {
    border-left: 1px solid var(--border-color);
    /* Modals don't need the thick accent border */
    box-shadow: var(--shadow-md);
    /* Modals can have a deeper shadow */
}

.card:hover {
    transform: none !important;
    /* Explicitly disable movement */
    box-shadow: var(--card-shadow);
}

.card-header {
    background-color: var(--card-header-bg);
    /* Match main background */
    border-bottom: 1px solid var(--border-color);
    /* Use accent-based border */
    padding: 0.75rem 1rem;
    /* Slightly reduced padding */
    font-weight: 500;
    color: var(--text-primary);
    border-left: none;
    /* Remove duplicate left border */
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.card-title {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    /* Consistent title spacing */
}

.card-body {
    color: var(--text-primary);
    padding: 1rem;
    /* Consistent padding */
    border-left: none;
    /* Remove duplicate left border */
}

.modal-header {
    background-color: var(--card-header-bg);
    color: var(--text-primary);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1.25rem;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.modal-footer {
    border-top-color: var(--border-color);
}

/*=========================================================================
  9. Forms
=========================================================================*/
.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--border-color);
    transition: var(--transition-base);
    border-radius: 0.375rem;
    padding: 0.625rem 1rem;
}

.form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px rgba(98, 228, 251, 0.1);
}

.form-label {
    color: var(--text-primary);
}

/* Form Check & Switch Customization */
.form-check-input {
    background-color: var(--bg-secondary);
    border-color: var(--text-muted);
}

.form-check-input:checked {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23001926' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.25rem rgba(98, 228, 251, 0.25);
}

.form-text {
    color: var(--text-muted);
}

/* Switch specific styles */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 0.8)'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23001926'/%3e%3c/svg%3e");
}

/*=========================================================================
  10. Tables
=========================================================================*/
.table {
    margin-bottom: 0;
    color: var(--text-primary);
}

.table thead th {
    color: var(--text-primary);
}

.table tbody td {
    color: var(--text-primary);
}

.table-hover tbody tr {
    transition: var(--transition-base);
}

.table-hover tbody tr:hover {
    background-color: rgba(98, 228, 251, 0.05); /* Very subtle accent hover */
}

.table> :not(caption)>*>* {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-color);
}

/*=========================================================================
  11. Badges & Alerts
=========================================================================*/
.badge {
    padding: 0.4em 0.65em;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 0.25rem;
}

/* New badge styles for statistics display */
.badge-stat {
    background-color: transparent !important;
    color: var(--brand-accent) !important;
    border: 1px solid var(--brand-accent);
    border-radius: 0 !important;
    /* Angular shape */
    font-family: "Consolas", "Monaco", monospace;
    /* Monospace for data */
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.badge-metric {
    background-color: rgba(30, 40, 50, 0.8) !important;
    color: var(--brand-accent) !important;
    border-radius: 0 !important;
    /* Angular shape */
    font-family: "Consolas", "Monaco", monospace;
    /* Monospace for data */
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    letter-spacing: normal;
    position: relative;
}

.badge-metric::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--brand-accent);
}

.alert {
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.alert-success {
    background-color: rgba(98, 228, 251, 0.1);
    color: var(--brand-accent);
}

.alert-info {
    background-color: rgba(98, 228, 251, 0.1);
    border-color: var(--brand-accent);
    color: var(--text-primary);
}

.alert .btn-close {
    filter: brightness(0) invert(1) sepia(100%) saturate(1000%) hue-rotate(155deg);
    opacity: 0.9;
}

/*=========================================================================
  12. Footer
=========================================================================*/
.footer {
    padding: 5rem 0;
    background-color: var(--bg-primary);
}

.footer a {
    color: var(--text-primary);
}

.footer a:hover {
    color: var(--brand-accent) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.footer ul {
    list-style-type: none;
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.05em;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
}

.footer ul.products li a {
    text-transform: none;
    letter-spacing: 0;
}

.footer ul li a:hover {
    color: var(--brand-accent) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.footer ul li a small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}

.footer h6 {
    color: var(--text-primary);
    font-size: 0.9em;
    letter-spacing: 0.1em;
}

.footer .btn-light {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--brand-primary);
}

.footer .btn-light:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-primary);
}

.footer input[type=email] {
    border-color: var(--text-primary);
    background-color: transparent;
}

.footer input[type=email]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.footer .form-message-container {
    color: var(--text-primary);
    margin-bottom: 1em;
}

.footer .form-message-container:empty {
    margin-bottom: 0;
}

.footer .social-links ul.nav {
    margin-top: 2em;
    margin-left: -0.75em;
}

.footer .social-links ul.nav li a i {
    font-size: 1.5em;
}

/*=========================================================================
  13. List Groups
=========================================================================*/
.list-group-item {
    background-color: transparent;
    /* Inherit from card */
    border-color: var(--border-color-translucent);
    /* Lighter border for list items */
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-left: none;
    /* Align with card content */
    border-right: none;
    border-radius: 0 !important;
}

/* Ensure list items inside cards blend well */
.card>.list-group {
    margin: 0;
    /* Reset margin if any */
}

.card>.list-group .list-group-item {
    background-color: transparent;
    border-color: var(--border-color);
    /* Match card border */
    /* Remove left/right border as card provides it */
    border-left: 0;
    border-right: 0;
    padding-left: 1rem;
    /* Restore padding to match card-body */
    padding-right: 1rem;
    /* Restore padding to match card-body */
}

.card>.list-group .list-group-item:first-child {
    border-top: none;
    /* Remove top border if following header */
}

.card>.list-group .list-group-item:last-child {
    border-bottom: none;
    /* Remove bottom border if it's the last element */
}


.list-group-item:hover,
.list-group-item-action:hover {
    background-color: rgba(98, 228, 251, 0.05);
    /* Very subtle accent hover */
    color: var(--text-primary);
    transform: none !important;
    /* Ensure no movement */
}

.list-group-item.active {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--bg-primary);
}

.list-group-item-action:hover {
    background-color: rgba(98, 228, 251, 0.1);
    /* Retain specific action hover */
}

/* Always keep list-group-item-action links white in all states */
a.list-group-item-action:link,
a.list-group-item-action:visited,
a.list-group-item-action:active,
a.list-group-item-action:focus {
    color: var(--text-primary) !important;
}

/*=========================================================================
  14. Code Blocks
=========================================================================*/
pre {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

code {
    color: var(--brand-accent);
}

/*=========================================================================
  15. Accordions
=========================================================================*/
.accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.accordion-button {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.accordion-button:not(.collapsed) {
    background-color: var(--card-header-bg);
    color: var(--brand-accent);
}

.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/*=========================================================================
  16. Components - Hex & Team Photos
=========================================================================*/
.hex-container {
    position: relative;
    width: 90px;
    height: 105px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.hex-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--brand-accent); */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
    opacity: 0.3;
}

.team-photo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0 !important;
}

/*=========================================================================
  17. Components - Quote Styles
=========================================================================*/
.quote-minimal {
    position: relative;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 2px solid var(--brand-accent);
    background-color: rgba(98, 228, 251, 0.03);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.quote-minimal .quote-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 0.5rem;
}

.quote-minimal .quote-text::before {
    content: "\201C";
    position: absolute;
    left: -12px;
    top: -10px;
    font-size: 2rem;
    color: var(--brand-accent);
    opacity: 0.5;
    font-family: Georgia, serif;
}

.quote-minimal .quote-author {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-align: right;
    transition: text-shadow 0.4s ease;
}

/* Quote-specific animation classes */
[data-animation="reveal-fade"] .quote-minimal {
    transition-delay: calc(var(--stagger-index, 0) * 150ms + 80ms);
}

.in-view[data-animation] .quote-minimal {
    box-shadow: 0 4px 8px rgba(0, 19, 38, 0.15);
}

/*=========================================================================
  18. Wallet Connection Styles
=========================================================================*/
/* Small tooltip class */
.small-tooltip {
    font-size: 0.8rem;
    max-width: 300px;
}

/*=========================================================================
  19. Blog Content Styles
=========================================================================*/
.blog-content p {
    margin-bottom: 1rem;
    /* Ensure consistent paragraph spacing */
}

.blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Keep as block */
    margin: 2rem auto;
    /* Keep auto margins for centering */
}

/* Style for image captions - targets emphasized text right after images */
/* Reverted selector: targets em immediately following an img */
.blog-content img+em {
    display: block;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

/* Style for blockquote captions - targets emphasized text after blockquotes */
.blog-content blockquote+p>em {
    display: block;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: -1rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

/*=========================================================================
  20. Responsive Adjustments
=========================================================================*/
@media (max-width: 576px) {
    .footer div[class*="col-"]:not(:first-of-type) {
        padding-left: 4.75em;
    }

    .footer ul {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    /* Navbar adjustments for extra small screens */
    .navbar-brand img {
        height: 2rem;
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.1rem;
    }

    /* Simplified mobile navbar spacing */
    .navbar-toggler {
        border: none;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .card-body {
        padding: 1.25rem;
    }

    .table-responsive {
        margin: 0 -1.25rem;
        width: calc(100% + 2.5rem);
    }
}

/*=========================================================================
  21. Print Styles
=========================================================================*/
@media print {
    body {
        background-color: white;
        color: black;
    }

    .navbar,
    .footer,
    .btn {
        display: none;
    }

    a {
        text-decoration: underline;
        color: black;
    }

    .container {
        width: 100%;
        max-width: 100%;
    }
}

/*=========================================================================
  22. Error Page Styles
=========================================================================*/
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.error-message {
    background-color: rgba(0, 25, 38, 0.5);
    border-left: 4px solid var(--brand-accent);
    padding: 1.5rem;
    font-family: monospace;
}

.error-details {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1rem;
}

.error-details li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.error-details li:before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--brand-accent);
}

.error-actions {
    margin-top: 2rem;
}

.error-visual {
    position: relative;
    max-width: 100%;
    height: auto;
}

/*=========================================================================
  23. Terminal Component
=========================================================================*/
.terminal-container {
    background-color: var(--bg-primary);
    border: 1px solid rgba(98, 228, 251, 0.4);
    border-radius: 0 !important;
    overflow: hidden;
    font-family: "Consolas", "Monaco", monospace;
    box-shadow: 2px 2px 0 rgba(98, 228, 251, 0.1);
    position: relative;
    margin-bottom: 1rem;
}

.terminal-container::before {
    content: none;
}

.terminal-header {
    background-color: var(--bg-primary);
    color: var(--brand-accent);
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(98, 228, 251, 0.4);
    display: flex;
    align-items: center;
    position: relative;
}

.terminal-title {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
    opacity: 0.9;
}

.terminal-title::before {
    content: none;
}

.terminal-body {
    padding: 0.75rem;
    background-color: var(--bg-primary);
    position: relative;
}

.terminal-body::before {
    content: none;
}

.terminal-code {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    padding: 0;
}

.terminal-code code {
    color: rgba(255, 255, 255, 0.9);
    display: block;
}

.terminal-code code::before {
    content: none;
}

/* Syntax highlighting for Python code */
.terminal-code .keyword {
    color: var(--brand-accent);
    font-weight: 400;
}

.terminal-code .function {
    color: var(--brand-accent);
    opacity: 0.8;
}

.terminal-code .variable {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .terminal-container {
        margin: 1.5rem 0;
    }

    .terminal-code {
        font-size: 0.8rem;
    }
}

/*=========================================================================
  24. Brutalist Design System Elements
=========================================================================*/
/* Hexagonal Background Pattern */
.hex-pattern-bg {
    position: relative;
    overflow: hidden;
}

.hex-pattern-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--brand-accent) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: 0 0;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

/* Visible Grid System */
.grid-overlay {
    position: relative;
    overflow: visible !important;
    /* Allow grid to extend beyond */
}

.grid-overlay::before {
    content: '';
    position: absolute;
    top: -20px;
    /* Extend beyond container */
    left: -20px;
    width: calc(100% + 40px);
    /* Extend on both sides */
    height: calc(100% + 40px);
    background-image:
        linear-gradient(to right, rgba(98, 228, 251, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(98, 228, 251, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 20px 20px;
    /* Offset to align with content */
    z-index: 0;
    pointer-events: none;
}

/*=========================================================================
  25. Animation Utilities
=========================================================================*/
/* Base transition properties */
[data-animation] {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform, opacity;
}

/* Animation states - refined for better visibility */
.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

/* More pronounced transforms */
.translate-y-20 {
    transform: translateY(30px);
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-x-neg-20 {
    transform: translateX(-40px);
}

.translate-x-20 {
    transform: translateX(40px);
}

.translate-x-0 {
    transform: translateX(0);
}

.scale-95 {
    transform: scale(0.92);
}

.scale-100 {
    transform: scale(1);
}

/* Enhanced interaction states */

[data-animation] .terminal-container,
[data-animation] .btn-primary,
[data-animation] .btn-accent-link {
    transition-delay: 0.1s;
}

/* Stagger delays for groups */
[data-stagger]>* {
    transition-delay: calc(var(--stagger-index, 0) * 100ms);
}

/*=========================================================================
  X. Tab Component Styles (Landing Page)
=========================================================================*/

.tab-list {
    display: flex;
    /* Use flexbox for centering */
    justify-content: center;
    /* Center the buttons horizontally */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    gap: 0.5rem;
    /* Add some space between buttons */
}

/* Style for the active/selected tab button */
/* Apply the filled primary button styles when the button has the .selected class */
.tab-list .btn.selected {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    /* Optional: add shadow for emphasis */
}

/* Ensure inactive tabs remain outlined */
.tab-list .btn:not(.selected) {
    background-color: transparent !important;
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;
}

/* Hover styles for inactive tabs (same as btn-outline-primary hover) */
.tab-list .btn:not(.selected):hover {
    background-color: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Override Bootstrap active dropdown item color for dark dropdowns */
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active {
    background-color: var(--brand-accent) !important;
    /* Use accent color */
    color: var(--bg-primary) !important;
    /* Use dark background color for text */
}

/*=========================================================================
  XX. Custom Component Adjustments (Add new sections as needed)
=========================================================================*/

/* Custom Outline Accent Button (e.g., for Cancel buttons in dark modals) */
.btn-outline-accent {
    background-color: transparent !important;
    border-color: var(--text-primary) !important;
    /* White border */
    color: var(--text-primary) !important;
    /* White text */

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: var(--text-primary) !important;
        /* White background on hover */
        border-color: var(--text-primary) !important;
        /* White border on hover */
        color: var(--bg-primary) !important;
        /* Dark text on hover */
        box-shadow: var(--shadow-sm) !important;
    }
}

/*=========================================================================
  26. Slot Selection Styles
=========================================================================*/
/* Styles for the slot selection buttons */
.slot-used {
    position: relative;
}

/* Selected slot button styling */
.slot-btn.selected {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--bg-primary) !important;
}

/*=========================================================================
  27. Pagination Styles
=========================================================================*/
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 1rem 0;
    list-style: none;
}

.pagination .page-item .page-link {
    background-color: transparent;
    border: 1px solid var(--brand-accent);
    color: var(--brand-accent);
    margin: 0 0.25rem;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    transition: var(--transition-base);
}

.pagination .page-item .page-link:hover {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--bg-primary) !important;
}

.pagination .page-item.disabled .page-link {
    color: var(--text-muted);
    border-color: var(--text-muted);
    pointer-events: none;
}

/*=========================================================================
  28. Tufte-Inspired Data Visualization
=========================================================================*/

/* Small multiples for data visualization */
.small-multiple-container {
    position: relative;
    height: 100%;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 1px solid var(--border-color);
    background-color: rgba(0, 25, 38, 0.3);
    transition: background-color 0.2s ease;
}

.small-multiple-container:hover {
    background-color: rgba(0, 25, 38, 0.6);
}

.small-multiple-container h6 {
    font-size: 0.8rem;
    font-family: "Consolas", "Monaco", monospace;
    font-weight: normal;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

/* Sparse table design */
.table-tufte th {
    font-weight: normal;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
    padding: 0.5rem;
}

.table-tufte td {
    padding: 0.5rem;
    border: none;
}

.table-tufte tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Data value styling */
.data-value {
    font-family: "Consolas", "Monaco", monospace;
    font-size: 0.9rem;
}

.data-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

/* Range lines for data presentation */
.range-line {
    height: 1px;
    background-color: var(--text-muted);
    position: relative;
    margin: 0.5rem 0;
}

.range-line::before,
.range-line::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 1px;
    background-color: var(--text-muted);
    top: -2px;
}

.range-line::before {
    left: 0;
}

.range-line::after {
    right: 0;
}

.range-marker {
    position: absolute;
    height: 5px;
    width: 1px;
    background-color: var(--brand-accent);
    top: -2px;
}

/* Small stats display */
.stats-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0.25rem 0;
}

.stats-line span:not(:last-child) {
    margin-right: 1rem;
}

.stats-value {
    font-family: "Consolas", "Monaco", monospace;
}

/* overrides only the dark-mode tooltips */
.tooltip {
    --bs-tooltip-bg: var(--bg-dark-subtle);      /* same card background */
    --bs-tooltip-color: var(--text-primary);     /* white text */
    border: 1px solid var(--brand-accent);       /* cyan outline – optional */
}
.tooltip .tooltip-arrow::before {
    background-color: var(--bg-dark-subtle);     /* match arrow */
}