/* ============================================
   КОМПЛЕКСНА АДАПТАЦІЯ ПІД РІЗНІ ПРИСТРОЇ
   KuBeyond - Responsive Design System
   ============================================ */

/* ============================================
   ЗАГАЛЬНІ НАЛАШТУВАННЯ
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   DESKTOP - Великі екрани > 1200px
   ============================================ */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: 3rem !important;
    }
    
    .section-title {
        font-size: 2.5rem !important;
    }
}

/* ============================================
   LAPTOP - Екрани 992px - 1199px
   ============================================ */

@media (max-width: 1199px) and (min-width: 992px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    /* Модальні вікна */
    .modal-content,
    .auth-modal-content,
    .unified-auth-content {
        max-width: 90% !important;
        margin: 2% auto !important;
    }
}

/* ============================================
   TABLET - Екрани 768px - 991px
   ============================================ */

@media (max-width: 991px) and (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 15px;
    }
    
    /* Заголовки */
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    
    .section-title,
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
    
    /* Навігація */
    header {
        padding: 15px 0 !important;
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    nav a {
        font-size: 0.95rem !important;
        padding: 8px 15px !important;
    }
    
    /* Сітки */
    .features-grid,
    .specialists-grid,
    .vacancies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Картки */
    .specialist-card,
    .vacancy-item,
    .feature-card {
        padding: 20px !important;
    }
    
    /* Форми */
    .form-group {
        margin-bottom: 18px !important;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 1rem !important;
        padding: 12px !important;
    }
    
    /* Кнопки */
    .btn,
    .auth-btn,
    .search-button {
        font-size: 1rem !important;
        padding: 12px 24px !important;
        min-height: 44px !important;
    }
    
    /* Модальні вікна */
    .modal-content,
    .auth-modal-content,
    .unified-auth-content,
    .specialist-info-modal-content {
        max-width: 85% !important;
        margin: 5% auto !important;
        padding: 25px !important;
    }
    
    .modal-title {
        font-size: 1.5rem !important;
    }
    
    /* Dashboard */
    .dashboard-container {
        flex-direction: column !important;
    }
    
    .sidebar {
        width: 100% !important;
        max-width: none !important;
        position: relative !important;
    }
    
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Footer */
    footer {
        padding: 30px 0 !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .footer-contacts {
        margin-left: 0 !important;
        justify-content: center !important;
    }
}

/* ============================================
   MOBILE - Екрани < 768px
   ============================================ */

@media (max-width: 767px) {
    html {
        font-size: 14px;
    }
    
    body {
        padding-top: 100px !important;
        padding-bottom: 80px !important;
    }
    
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    /* ========== ЗАГОЛОВКИ ========== */
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
    }
    
    .section-title,
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
    }
    
    p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* ========== НАВІГАЦІЯ ========== */
    header {
        padding: 10px 0 !important;
        flex-wrap: wrap !important;
    }
    
    nav {
        width: 100% !important;
        padding: 10px !important;
    }
    
    nav ul {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    nav li {
        width: 100% !important;
    }
    
    nav a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 1rem !important;
        padding: 12px 15px !important;
    }
    
    .logo-container {
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
    
    .logo-text {
        font-size: 1.5rem !important;
    }
    
    /* ========== КОНТРОЛИ ========== */
    .controls {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 10px !important;
    }
    
    .theme-switcher,
    .language-switcher,
    .auth-buttons {
        margin: 5px !important;
    }
    
    .change-bg-button {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
    
    /* ========== СІТКИ ========== */
    .features-grid,
    .specialists-grid,
    .vacancies-grid,
    .stats-grid,
    .favorites-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* ========== КАРТКИ ========== */
    .specialist-card,
    .vacancy-item,
    .feature-card,
    .stat-card,
    .application-item {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .specialist-card .specialist-photo {
        width: 80px !important;
        height: 80px !important;
    }
    
    .specialist-name {
        font-size: 1.1rem !important;
    }
    
    .specialist-occupation {
        font-size: 0.9rem !important;
    }
    
    .specialist-details {
        font-size: 0.85rem !important;
    }
    
    .skill-tag,
    .skill {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
    }
    
    /* ========== КНОПКИ ========== */
    .btn,
    .auth-btn,
    .search-button,
    .filter-btn,
    .apply-btn,
    .reset-btn {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 14px 20px !important;
        margin-bottom: 10px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .cta-buttons .btn {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .specialist-actions,
    .vacancy-actions,
    .application-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .specialist-actions button,
    .vacancy-actions button,
    .application-actions button {
        width: 100% !important;
    }
    
    /* ========== ФОРМИ ========== */
    .form-group {
        margin-bottom: 15px !important;
    }
    
    .form-group label {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select,
    .settings-form-control {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }
    
    /* Великі текстові поля — лише з класом .large-textarea (не глобально для textarea) */
    .large-textarea,
    textarea.large-textarea {
        min-height: 120px !important;
        resize: vertical;
    }

    /* Чат composer — не успадковує min-height форм; компактний idle ~44px */
    #messages textarea#chat-input,
    textarea#chat-input {
        min-height: 0 !important;
        max-height: 120px !important;
        height: 44px;
        resize: none !important;
        box-sizing: border-box !important;
    }
    
    .form-row {
        flex-direction: column !important;
    }
    
    .form-row .form-group {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    /* ========== ФІЛЬТРИ ========== */
    .filters-section,
    .filter-section {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .filter-select {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 12px !important;
    }
    
    /* ========== МОДАЛЬНІ ВІКНА ========== */
    .modal-content,
    .auth-modal-content,
    .unified-auth-content,
    .specialist-info-modal-content,
    #vacancy-modal .modal-content,
    .payment-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .modal-header {
        padding: 15px !important;
        flex-wrap: wrap !important;
    }
    
    .modal-title {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }
    
    .modal-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.5rem !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .modal-footer {
        padding: 15px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
    }
    
    /* ========== DASHBOARD ========== */
    .dashboard-container {
        flex-direction: column !important;
    }
    
    .sidebar {
        width: 100% !important;
        max-width: none !important;
        position: relative !important;
        min-height: auto !important;
    }
    
    .sidebar-header {
        padding: 20px 15px !important;
    }
    
    .sidebar-menu {
        padding: 0 !important;
    }
    
    .sidebar-menu a {
        padding: 15px 20px !important;
        font-size: 1rem !important;
    }
    
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 15px !important;
    }
    
    .dashboard-header {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .header-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stat-card {
        padding: 15px !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
    
    /* ========== ПАНЕЛІ ========== */
    .panel-section {
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
    }
    
    .search-columns {
        flex-direction: column !important;
    }
    
    .search-column {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* ========== ТАБЛИЦІ ========== */
    table {
        display: block !important;
        overflow-x: auto !important;
        font-size: 0.85rem !important;
    }
    
    th,
    td {
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
    }
    
    /* ========== СПЕЦІАЛЬНІ ЕЛЕМЕНТИ ========== */
    .special-offer {
        padding: 15px !important;
        margin: 15px 0 !important;
    }
    
    .offer-badge {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
    }
    
    .offer-text {
        font-size: 0.9rem !important;
    }
    
    .language-flags {
        max-height: 300px !important;
    }
    
    .language-option {
        padding: 12px !important;
        font-size: 1rem !important;
    }
    
    /* ========== FOOTER ========== */
    footer {
        padding: 20px 0 !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .footer-section {
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
        text-align: center !important;
    }
    
    .footer-bottom p {
        font-size: 0.9rem !important;
    }
    
    .footer-contacts {
        margin-left: 0 !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .footer-contacts a {
        display: block !important;
        padding: 10px !important;
        font-size: 0.95rem !important;
    }
    
    /* ========== ПАГІНАЦІЯ ========== */
    .pagination {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    .pagination a {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        min-width: 40px !important;
    }
    
    /* ========== РЕЗЮМЕ ТА ПОРТФОЛІО ========== */
    .resume-upload-container,
    .portfolio-upload-container {
        padding: 15px !important;
    }
    
    .resume-file-info,
    .portfolio-item {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    /* ========== ГЛОБУС ========== */
    .globe-container {
        width: 200px !important;
        height: 200px !important;
    }
    
    .mini-globe {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================
   SMALL MOBILE - Екрани < 480px
   ============================================ */

@media (max-width: 479px) {
    html {
        font-size: 13px;
    }
    
    body {
        padding-top: 120px !important;
    }
    
    /* Ще менші заголовки */
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .section-title,
    h1 {
        font-size: 1.3rem !important;
    }
    
    h2 {
        font-size: 1.15rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
    
    p,
    span,
    label {
        font-size: 0.9rem !important;
    }
    
    /* Дуже компактні кнопки */
    .btn,
    .auth-btn,
    .search-button {
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
    }
    
    /* Компактні інпути */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 0.95rem !important;
        padding: 12px !important;
    }
    
    /* Модальні вікна на весь екран */
    .modal-content,
    .auth-modal-content,
    .unified-auth-content {
        width: 98% !important;
        margin: 5px auto !important;
        padding: 15px !important;
    }
    
    .modal-title {
        font-size: 1.1rem !important;
    }
    
    /* Компактні картки */
    .specialist-card,
    .vacancy-item {
        padding: 12px !important;
    }
    
    .specialist-photo {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Дуже компактна навігація */
    nav a {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }
    
    /* Компактний footer */
    .footer-bottom p {
        font-size: 0.8rem !important;
    }
    
    .footer-contacts a {
        font-size: 0.85rem !important;
        padding: 8px !important;
    }
}

/* ============================================
   LANDSCAPE ОРІЄНТАЦІЯ ДЛЯ МОБІЛЬНИХ
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
    .modal-content,
    .auth-modal-content,
    .unified-auth-content {
        max-height: 95vh !important;
        overflow-y: auto !important;
    }
    
    .hero {
        min-height: 400px !important;
    }
    
    .sidebar {
        max-height: 400px !important;
        overflow-y: auto !important;
    }
}

/* ============================================
   ПОКРАЩЕННЯ СЕНСОРНОГО ІНТЕРФЕЙСУ
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Збільшені області натискання для сенсорних пристроїв */
    button,
    .btn,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Видалення hover-ефектів на сенсорних пристроях */
    *:hover {
        transform: none !important;
    }
}

/* ============================================
   ВИСОКА РОЗДІЛЬНА ЗДАТНІСТЬ (Retina)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    img,
    .specialist-photo,
    .company-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================
   ТЕМНА ТЕМА - АДАПТАЦІЯ
   ============================================ */

@media (max-width: 767px) {
    body.light-theme {
        background: #f5f7fa !important;
    }
    
    body:not(.light-theme) {
        background: #1a2130 !important;
    }
    
    body.light-theme .modal-content,
    body.light-theme .specialist-card,
    body.light-theme .vacancy-item {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ============================================
   ДОСТУПНІСТЬ
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
        outline-width: 2px !important;
    }
    
    .btn,
    .auth-btn {
        border: 2px solid currentColor !important;
    }
}

/* ============================================
   ПЕЧАТЬ
   ============================================ */

@media print {
    .sidebar,
    .controls,
    .footer-contacts,
    .btn,
    .auth-buttons,
    .theme-switcher,
    .language-switcher,
    .change-bg-button {
        display: none !important;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
    
    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }
}