/**
 * ========================================
 * CRITICAL FIXES - Единый файл исправлений
 * ========================================
 * 
 * Объединяет и оптимизирует:
 * - scrollbar-and-layout-fix.css
 * - messages-and-overflow-fix.css
 * - design-final-fixes.css
 * 
 * Принципы:
 * 1. !important только где реально нужно для override Bootstrap/конфликтов
 * 2. Минимум дублирования с design-system.css
 * 3. Фокус на исправлениях, а не переопределениях
 */

/* ========================================
   1. SCROLLBAR MANAGEMENT
   ======================================== */

html {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100%;
    height: auto;
    max-height: none;
    width: 100%;
    scrollbar-gutter: stable;
}

/* Body scrollbar styling */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--surface-secondary, rgba(0, 0, 0, 0.05));
}

body::-webkit-scrollbar-thumb {
    background: var(--text-muted, rgba(0, 0, 0, 0.3));
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, rgba(0, 0, 0, 0.5));
}

/* Firefox scrollbar */
body {
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted, rgba(0, 0, 0, 0.3)) var(--surface-secondary, rgba(0, 0, 0, 0.05));
}

/* Dark theme scrollbar */
[data-theme="dark"] body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] body {
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

/* ========================================
   2. MAIN CONTENT LAYOUT
   ======================================== */

.main-content,
main {
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none;
    height: auto;
    position: relative;
}

/* Content containers - no inner scrollbars */
.page-wrapper,
.content-card,
.page-body,
.content-container,
.page-container,
.container,
.container-fluid {
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Hide scrollbars for non-body elements */
*:not(html):not(body):not(.dropdown-menu):not(.mobile-menu):not(.modal-content):not(.modal-body)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

*:not(html):not(body):not(.dropdown-menu):not(.mobile-menu):not(.modal-content):not(.modal-body) {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Exceptions: modals and dropdowns can have scrollbars */
.dropdown-menu,
.mobile-menu,
.modal-content,
.modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh;
}

/* ========================================
   3. MESSAGES & ALERTS VISIBILITY
   ======================================== */

/* Ensure messages are above everything */
.messages-container,
.mt-2:has(.alert) {
    position: relative;
    z-index: var(--z-messages, 10000);
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    margin: 1rem 0;
    box-sizing: border-box;
}

/* Alert base improvements */
.alert {
    position: relative;
    z-index: calc(var(--z-messages, 10000) + 1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: alertSlideDown 0.3s ease;
    border-left: 4px solid;
    background: var(--surface-primary, #ffffff);
    backdrop-filter: blur(10px);
}

@keyframes alertSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alert color variants */
.alert-success {
    border-left-color: var(--color-success, #22c55e);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
}

.alert-danger,
.alert-error {
    border-left-color: var(--color-danger, #ef4444);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
}

.alert-warning {
    border-left-color: var(--color-warning, #f59e0b);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
}

.alert-info {
    border-left-color: var(--color-info, #3b82f6);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
}

/* ========================================
   4. RESPONSIVE CONTAINERS
   ======================================== */

.container,
.container-fluid,
.page-wrapper,
.content-card,
.page-body {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container,
    .container-fluid,
    .page-wrapper,
    .content-card,
    .page-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .container,
    .container-fluid,
    .page-wrapper,
    .content-card,
    .page-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .alert {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   5. CURSOR MANAGEMENT
   ======================================== */

/* Interactive elements */
a,
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
label[for],
.btn:not(:disabled),
.page-btn:not(:disabled),
.page-link,
[role="button"]:not(:disabled),
[onclick]:not(:disabled) {
    cursor: pointer;
}

/* Text inputs */
input[type="text"]:not(:disabled),
input[type="email"]:not(:disabled),
input[type="password"]:not(:disabled),
input[type="number"]:not(:disabled),
input[type="tel"]:not(:disabled),
input[type="url"]:not(:disabled),
input[type="search"]:not(:disabled),
textarea:not(:disabled) {
    cursor: text;
}

/* ========================================
   6. TYPOGRAPHY FIXES
   ======================================== */

/* Prevent text overflow */
p,
h1, h2, h3, h4, h5, h6,
span,
td,
th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================
   7. MEDIA ELEMENTS
   ======================================== */

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   8. TABLE RESPONSIVENESS
   ======================================== */

.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--surface-secondary, #f3f4f6);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-secondary, #cbd5e1);
    border-radius: 4px;
}

/* ========================================
   9. THEME TRANSITION OPTIMIZATION
   ======================================== */

/* Fast transitions for theme switching */
[data-theme] {
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* Disable transitions during theme switch */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: none !important;
    animation: none !important;
}

/* ========================================
   10. ACCESSIBILITY: FOCUS STATES
   ======================================== */

*:focus-visible {
    outline: 2px solid var(--brand-primary, #3b82f6);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ========================================
   11. PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Disable heavy effects on mobile */
@media (max-width: 1024px) {
    * {
        will-change: auto;
    }
    
    .card:hover,
    .content-card:hover {
        transform: none;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   12. BUTTON CLICK FIXES (Bootstrap override)
   ======================================== */

/* Ensure interactive elements are clickable - override pointer-events conflicts */
button:not(:disabled),
.btn:not(:disabled),
.page-btn:not(:disabled),
.login-btn:not(:disabled),
.auth-btn:not(:disabled),
.btn-add:not(:disabled),
.slider-arrow:not(:disabled),
.slider-dot:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
.page-link,
.register-link,
.vps-slide-card > a,
.content-card-item > a {
    pointer-events: auto !important;
    touch-action: manipulation;
}

/* Icons inside buttons don't block clicks */
button i,
button span,
.btn i,
.btn span {
    pointer-events: none;
}

/* Button pseudo-elements don't block clicks */
button::before,
button::after,
.btn::before,
.btn::after {
    pointer-events: none;
}

/* Inactive overlays shouldn't block clicks */
.overlay:not(.active),
.modal-backdrop:not(.show) {
    pointer-events: none;
    display: none;
}

/* Input icons shouldn't block clicks */
.input-icon {
    pointer-events: none;
}

/* ========================================
   13. NAVIGATION Z-INDEX HARMONY
   ======================================== */

/* Ensure navbar dropdowns work correctly */
.navbar-professional {
    z-index: 99999;
}

.navbar-professional .dropdown-menu,
.navbar-professional .user-dropdown,
.navbar-professional .vps-dropdown-menu {
    z-index: 99998;
}

/* Main content below navbar */
body > main,
body > .main-content {
    z-index: 1;
    position: relative;
}

/* ========================================
   14. BOX-SIZING RESET
   ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}