/**
 * Accessibility Color Contrast Fixes
 * WCAG AA compliant colors (4.5:1 for normal text, 3:1 for large text)
 */

/* Fix low-contrast #777 colors - change to #595959 (7:1 on white) */
.btn-link[disabled]:focus,
.btn-link[disabled]:hover,
.navbar-default .navbar-brand,
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-link,
.navbar-default .btn-link {
    color: #595959;
}

/* Fix label-default background for better contrast */
.label-default {
    background-color: #595959;
}

/* Fix badge default background */
.badge {
    background-color: #595959;
}

/* Fix muted text colors */
.text-muted,
.help-block,
small.text-muted {
    color: #595959;
}

/* Fix placeholder text contrast */
::placeholder {
    color: #767676;
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #767676;
}

::-moz-placeholder {
    color: #767676;
}

/* Fix close button contrast */
.close {
    color: #333;
    opacity: 0.7;
}

.close:hover,
.close:focus {
    color: #000;
    opacity: 1;
}

/* Dark mode contrast fixes */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .help-block,
body.dark .text-muted,
body.dark .help-block {
    color: #a0a0a0;
}

[data-theme="dark"] ::placeholder,
body.dark ::placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .close,
body.dark .close {
    color: #e5e5e5;
}

/* Ensure link colors have sufficient contrast */
a:not(.btn):not(.nav-item):not(.label) {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent, #6739b7);
    outline-offset: 2px;
}

/* Skip to main content link (screen reader friendly) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--main, #6739b7);
    color: white;
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}


/* =====================================================
   CLS (Cumulative Layout Shift) Prevention
   ===================================================== */

/* Prevent body position shifts from Google Translate */
body {
    position: relative !important;
    top: 0 !important;
    min-height: 100vh;
}

body.translated {
    position: static !important;
    top: auto !important;
}

/* Fix nav-tabs CLS - reserve fixed height */
.nav.nav-tabs {
    min-height: 44px;
    contain: layout style;
    display: flex;
    flex-wrap: wrap;
}

.nav-tabs > li,
.nav-tabs > .lactive {
    min-height: 42px;
    contain: layout style;
}

/* Reserve space for list items to prevent layout shifts */
.list-group-item.small {
    min-height: 88px;
    contain: layout style paint;
}

.list-group-item.big {
    min-height: 48px;
    contain: layout style paint;
}

/* Reserve space for market result items */
.list-group-item[style*="contain"] {
    content-visibility: auto;
}

/* Prevent layout shifts from dynamic content */
.list-group {
    contain: layout;
}

/* Reserve space for main content */
#main-content {
    min-height: 200px;
    contain: layout;
}

/* Reserve space for images to prevent CLS */
img {
    height: auto;
    max-width: 100%;
}

/* Aspect ratio boxes for common image sizes */
.img-placeholder {
    aspect-ratio: 16 / 9;
    background: var(--divback, #f5f5f5);
}

/* Prevent font loading layout shifts */
body {
    font-display: swap;
}

/* Reserve space for navigation */
.nav-bottom {
    height: 60px;
    contain: layout style;
}

.md-header.top-fixed {
    height: 50px;
    contain: layout style;
}

/* Prevent shifts from Google Translate banner */
.goog-te-banner-frame,
.goog-te-banner,
.skiptranslate iframe {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    position: absolute !important;
    top: -9999px !important;
}