/* Mobile-first responsive styles for ProtDoc */

/* ========================================
   БАЗОВЫЕ НАСТРОЙКИ
   ======================================== */

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Уменьшаем базовый размер шрифта на мобильных */
@media (max-width: 767px) {
    html {
        font-size: 14px;
    }
}

/* ========================================
   КОНТЕЙНЕРЫ
   ======================================== */

.container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden;
}

/* Main content containers */
.max-w-6xl,
.max-w-7xl,
.max-w-4xl,
.max-w-2xl {
    max-width: 100% !important;
    overflow-x: hidden;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .max-w-2xl {
        max-width: 42rem !important;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .max-w-4xl {
        max-width: 56rem !important;
    }
    
    .max-w-6xl {
        max-width: 72rem !important;
    }
    
    .max-w-7xl {
        max-width: 80rem !important;
    }
}

/* ========================================
   HEADER / НАВИГАЦИЯ
   ======================================== */

/* Base header styles - force sticky everywhere */
header,
body header,
html body header {
    width: 100%;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}

/* Desktop - full sticky header with navigation */
@media (min-width: 768px) {
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
    }
}

/* Mobile when NOT logged in - also sticky with mobile menu */
@media (max-width: 767px) {
    body:not(.logged-in) header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
    }
    
    /* Show mobile menu button when not logged in */
    body:not(.logged-in) #mobile-menu-btn {
        display: block !important;
    }
}

header nav {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    max-width: 100%;
}

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

header .text-2xl {
    font-size: 1.25rem !important;
}

/* Mobile menu styles */
#mobile-menu {
    animation: slideDown 0.2s ease-out;
}

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

.mobile-nav-link {
    font-size: 1rem;
    font-weight: 500;
}

/* Desktop - hide mobile menu button */
@media (min-width: 768px) {
    #mobile-menu-btn {
        display: none !important;
    }
    
    #mobile-menu {
        display: none !important;
    }
}

/* Mobile LOGGED IN - hide entire header (bottom nav takes over) */
@media (max-width: 767px) {
    body.logged-in header {
        display: none !important;
    }
}

/* ========================================
   ФОРМЫ - ГЛАВНОЕ ИСПРАВЛЕНИЕ
   ======================================== */

/* Generate page container */
#generate-page .max-w-4xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Data form container */
#data-form {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 767px) {
    #data-form {
        padding: 1.25rem !important;
    }
    
    #data-form h3 {
        font-size: 1.125rem !important;
    }
}

/* Основной контейнер формы */
#document-form {
    width: 100%;
    padding: 0;
}

/* Поля формы */
#document-form input,
#document-form textarea,
#document-form select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Предотвращает zoom на iOS */
    padding: 0.75rem !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
}

#document-form textarea {
    min-height: 120px;
}

/* Labels */
#document-form label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: block;
}

/* Контейнер поля */
#document-form > div {
    margin-bottom: 1.25rem !important;
}

/* Submit button */
#document-form button[type="submit"] {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    margin-top: 1.5rem !important;
}

@media (min-width: 768px) {
    #document-form input,
    #document-form textarea,
    #document-form select {
        padding: 0.625rem 1rem !important;
    }
}

/* ========================================
   КАРТОЧКИ ШАБЛОНОВ
   ======================================== */

/* Адаптивная сетка шаблонов */
#templates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    #templates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    #templates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Карточки шаблонов */
#templates-container > div,
.template-card {
    padding: 1.25rem !important;
    margin-bottom: 0 !important;
}

#templates-container .text-xl {
    font-size: 1.125rem !important;
    line-height: 1.4;
}

#templates-container .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.5;
}

#templates-container .btn-primary,
#templates-container button {
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
}

@media (min-width: 768px) {
    #templates-container > div,
    .template-card {
        padding: 1.5rem !important;
    }
    
    #templates-container .text-xl {
        font-size: 1.25rem !important;
    }
    
    #templates-container button {
        padding: 0.75rem 1.5rem !important;
    }
}

/* ========================================
   ИСТОРИЯ ДОКУМЕНТОВ
   ======================================== */

#documents-container > div {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

#documents-container h3 {
    font-size: 1rem !important;
}

#documents-container .flex.gap-2 {
    flex-wrap: wrap !important;
}

#documents-container button {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* Мобильное меню документов */
@media (max-width: 767px) {
    /* Карточка документа на мобильных */
    #documents-container > div {
        padding: 1rem !important;
    }
    
    /* Заголовок документа */
    #documents-container h3 {
        font-size: 0.95rem !important;
        line-height: 1.3;
    }
    
    /* Описание документа */
    #documents-container p {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Меню с тремя точками */
    #documents-container [id^="doc-menu-"] {
        animation: slideDown 0.2s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (min-width: 768px) {
    #documents-container > div {
        padding: 1.5rem !important;
    }
    
    #documents-container h3 {
        font-size: 1.25rem !important;
    }
}

/* ========================================
   ПАГИНАЦИЯ
   ======================================== */

#pagination-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#pagination-container .flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#pagination-container button {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #pagination-container button {
        min-width: 2.5rem;
        padding: 0.5rem !important;
    }
    
    #pagination-container button svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* ========================================
   МОДАЛЬНЫЕ ОКНА
   ======================================== */

.modal-content {
    width: 95% !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    overflow-y: auto;
}

@media (min-width: 640px) {
    .modal-content {
        width: 90% !important;
    }
}

/* ========================================
   DASHBOARD / СТАТИСТИКА
   ======================================== */

/* Welcome Section */
#home-page .relative.overflow-hidden {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (max-width: 767px) {
    #home-page .max-w-6xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Кнопка "Создать документ" на мобильных */
    #home-page a[href="#/templates"] {
        font-size: 16px !important;
        padding: 10px 20px !important;
    }
    
    /* Заголовок welcome section */
    #home-page h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }
    
    #home-page p.text-xl {
        font-size: 1rem !important;
        line-height: 1.5;
    }
}

#stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    #stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #stats-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    padding: 1rem !important;
}

.stat-card .text-3xl {
    font-size: 1.875rem !important;
}

@media (max-width: 640px) {
    .stat-card .text-3xl {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   ПРОФИЛЬ / НАСТРОЙКИ
   ======================================== */

/* Профиль - общий контейнер */
#profile-page {
    max-width: 100%;
}

/* Removed max-width restriction - now using max-w-6xl from HTML */

/* Профиль - форма */
#profile-page .bg-white {
    padding: 1.25rem !important;
    margin-bottom: 1rem;
}

#profile-page h2 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
}

#profile-page input {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 0.75rem !important;
}

#profile-page label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
}

#profile-page button {
    width: 100% !important;
    padding: 0.875rem !important;
    font-size: 1rem !important;
}

@media (min-width: 768px) {
    #profile-page .bg-white {
        padding: 2rem !important;
    }
    
    #profile-page h2 {
        font-size: 1.5rem !important;
    }
    
    #profile-page button {
        width: auto !important;
        padding: 0.75rem 2rem !important;
    }
}

/* ========================================
   PREVIEW ДОКУМЕНТОВ
   ======================================== */

#document-preview {
    font-size: 0.875rem !important;
    padding: 1rem !important;
    max-height: 60vh;
    overflow-y: auto;
}

@media (min-width: 768px) {
    #document-preview {
        font-size: 1rem !important;
        padding: 1.5rem !important;
    }
}

/* ========================================
   TOAST УВЕДОМЛЕНИЯ
   ======================================== */

#toast-container {
    right: 1rem !important;
    left: 1rem !important;
    top: 5rem !important;
}

.toast {
    width: 100% !important;
}

@media (min-width: 640px) {
    #toast-container {
        left: auto !important;
        width: auto !important;
    }
    
    .toast {
        width: auto !important;
        min-width: 300px;
    }
}

/* ========================================
   УТИЛИТЫ
   ======================================== */

/* Скрытие на мобильных */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Скрытие на десктопе */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Текст */
.text-responsive {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .text-responsive {
        font-size: 1rem;
    }
}

/* ========================================
   СПЕЦИФИЧНЫЕ ИСПРАВЛЕНИЯ
   ======================================== */

/* Исправление переполнения */
img {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

@media (min-width: 768px) {
    table {
        display: table;
    }
}

/* Предотвращение горизонтального скролла */
.overflow-hidden {
    overflow: hidden;
}

/* Улучшение читаемости на маленьких экранах */
@media (max-width: 640px) {
    p, li {
        line-height: 1.6;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
    }
}

/* ========================================
   TOUCH IMPROVEMENTS
   ======================================== */

/* Увеличение области клика на мобильных */
@media (max-width: 767px) {
    button,
    a {
        min-height: 44px; /* Рекомендация Apple для touch targets */
        min-width: 44px;
    }
    
    /* Tooltip иконки - больше область клика */
    [style*="cursor: help"] {
        padding: 0.5rem !important;
        margin: -0.5rem !important;
    }
}

/* Улучшение скролла на iOS */
.scroll-smooth {
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Уменьшаем отступы в landscape режиме */
    header nav {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    #document-form > div {
        margin-bottom: 0.75rem !important;
    }
    
    #document-form input,
    #document-form textarea,
    #document-form select {
        padding: 0.5rem !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    header,
    #toast-container,
    button {
        display: none !important;
    }
    
    #document-preview {
        max-height: none !important;
    }
}
/* Дополнительные стили для адаптации шаблонов и профиля */

/* ========================================
   ШАБЛОНЫ (TEMPLATES PAGE)
   ======================================== */

/* Templates page container */
#templates-page .max-w-6xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (max-width: 767px) {
    #templates-page h2 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }
    
    #templates-page p.text-xl {
        font-size: 1rem !important;
    }
}

/* Основная сетка шаблонов */
#templates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0;
    width: 100%;
}

@media (min-width: 640px) {
    #templates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    #templates-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Карточки шаблонов */
.template-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.template-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

@media (max-width: 639px) {
    .template-card {
        padding: 1.25rem;
    }
    
    .template-card h3 {
        font-size: 1.125rem !important;
    }
    
    .template-card p {
        font-size: 0.875rem !important;
        line-height: 1.5;
    }
    
    .template-card button {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
}

/* Заголовок страницы шаблонов */
#templates-page h1,
#templates-page h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    #templates-page h1,
    #templates-page h2 {
        font-size: 2rem !important;
        margin-bottom: 1.5rem;
    }
}

/* ========================================
   ПРОФИЛЬ (PROFILE PAGE)
   ======================================== */

#profile-page {
    max-width: 100%;
    padding: 0;
}

/* Removed max-width restriction - now using max-w-6xl from HTML */

/* Форма профиля */
#profile-form input {
    width: 100%;
    font-size: 16px !important;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: border-color 0.2s;
}

#profile-form input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#profile-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

#profile-form > div {
    margin-bottom: 1.25rem;
}

/* Кнопки профиля */
#profile-form button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

@media (max-width: 767px) {
    #profile-form button {
        width: 100%;
    }
    
    #profile-form .flex.gap-4 {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    #profile-form button {
        min-width: 150px;
    }
}

/* Аватар профиля (если будет) */
.profile-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

@media (min-width: 768px) {
    .profile-avatar {
        width: 100px;
        height: 100px;
    }
}

/* ========================================
   ГЛАВНАЯ СТРАНИЦА (HOME/DASHBOARD)
   ======================================== */

/* Карточки статистики */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background: white;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

@media (max-width: 639px) {
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card .text-3xl {
        font-size: 1.75rem !important;
    }
    
    .stat-card .text-sm {
        font-size: 0.8rem !important;
    }
}

/* Кнопка "Создать документ" на главной */
.create-doc-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .create-doc-btn {
        width: auto;
        font-size: 1.25rem;
    }
}

/* ========================================
   LANDING PAGE
   ======================================== */

/* Landing page container */
#landing-page {
    max-width: 100%;
}

/* Hero section */
.hero-section,
#landing-page section.relative {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100%;
}

.hero-section {
    padding: 3rem 1rem;
    text-align: center;
}

.hero-section h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-section p {
    font-size: 1rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .hero-section {
        padding: 5rem 2rem;
    }
    
    .hero-section h1 {
        font-size: 3rem;
    }
    
    .hero-section p {
        font-size: 1.25rem;
    }
}

@media (max-width: 767px) {
    #landing-page h1 {
        font-size: 1.875rem !important;
        line-height: 1.2;
    }
    
    #landing-page p.text-xl,
    #landing-page p.text-2xl {
        font-size: 1rem !important;
    }
    
    /* Stats grid on landing */
    #landing-page .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    #landing-page .text-3xl {
        font-size: 1.5rem !important;
    }
}

/* Features сетка */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    padding: 1.5rem;
    text-align: center;
}

@media (max-width: 767px) {
    .feature-card h3 {
        font-size: 1.125rem !important;
    }
    
    .feature-card p {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   ПОИСК И ФИЛЬТРЫ
   ======================================== */

.search-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .search-filters {
        flex-direction: row;
        align-items: end;
    }
}

.search-filters input,
.search-filters select {
    width: 100%;
    font-size: 16px !important;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

@media (min-width: 768px) {
    .search-filters input,
    .search-filters select {
        width: auto;
        min-width: 200px;
    }
}

.search-filters button {
    width: 100%;
    padding: 0.75rem 1.5rem;
}

@media (min-width: 768px) {
    .search-filters button {
        width: auto;
    }
}

/* ========================================
   ЗАГРУЗЧИК / LOADER
   ======================================== */

#loader {
    font-size: 1.25rem !important;
}

@media (min-width: 768px) {
    #loader {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   АДАПТИВНЫЕ MARGIN И PADDING
   ======================================== */

/* Уменьшаем отступы на мобильных */
@media (max-width: 767px) {
    .py-8, .py-12, .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .mb-8, .mb-12 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-8, .mt-12 {
        margin-top: 1.5rem !important;
    }
    
    .gap-8 {
        gap: 1.5rem !important;
    }
}

/* ========================================
   BREADCRUMBS (ХЛЕБНЫЕ КРОШКИ)
   ======================================== */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .breadcrumbs {
        font-size: 0.75rem;
    }
}

/* ========================================
   EMPTY STATES (ПУСТЫЕ СОСТОЯНИЯ)
   ======================================== */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state .text-6xl {
    font-size: 3rem !important;
}

.empty-state .text-xl {
    font-size: 1.125rem !important;
}

@media (min-width: 768px) {
    .empty-state {
        padding: 4rem 2rem;
    }
    
    .empty-state .text-6xl {
        font-size: 4rem !important;
    }
    
    .empty-state .text-xl {
        font-size: 1.25rem !important;
    }
}