/* AI PM Hub - Main Styles */
/* Note: Tailwind CSS is loaded via CDN for development */

/* Custom form styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Prose styles for rich text */
.prose {
    line-height: 1.75;
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    margin-bottom: 1.5em;
    text-indent: 2em;
}

.prose ul,
.prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose a {
    color: #2563eb;
    text-decoration: underline;
}

.prose a:hover {
    color: #1d4ed8;
}

.prose code {
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.prose pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
}

/* =============================================================================
   Mobile Optimizations for QA Module
   ============================================================================= */

/* Question list - responsive filter bar */
@media (max-width: 640px) {
    /* Make filter labels optional on mobile */
    .qa-filter-label {
        display: none;
    }

    /* Smaller select boxes on mobile */
    .qa-filter-select {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        min-width: 70px;
    }

    /* Stack question stats vertically on very small screens */
    .qa-question-stats {
        flex-direction: column;
        gap: 0.5rem;
        min-width: 50px;
    }

    .qa-question-stats .stat-item {
        flex-direction: row;
        gap: 0.25rem;
    }

    /* Make question title smaller on mobile */
    .qa-question-title {
        font-size: 1rem;
        line-height: 1.4;
    }

    /* Compact tag display */
    .qa-tag {
        padding: 0.125rem 0.5rem;
        font-size: 0.625rem;
    }

    /* Stack header buttons on mobile */
    .qa-header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* Make pagination more touch-friendly */
    .qa-pagination a,
    .qa-pagination span {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Markdown editor mobile optimizations */
@media (max-width: 640px) {
    /* Smaller toolbar buttons */
    .markdown-editor .toolbar-btn {
        padding: 0.25rem;
    }

    /* Hide some toolbar buttons on mobile */
    .markdown-editor .toolbar-optional {
        display: none;
    }

    /* Full-width preview on mobile */
    .markdown-editor .preview-pane {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        border-radius: 0;
    }

    /* Make textarea taller on mobile for easier editing */
    .markdown-editor textarea {
        min-height: 200px;
    }
}

/* Question detail - mobile vote buttons */
@media (max-width: 640px) {
    .qa-vote-buttons {
        flex-direction: row;
        gap: 0.5rem;
    }

    .qa-vote-btn {
        padding: 0.5rem;
    }

    .qa-vote-btn svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Stack vote count horizontally */
    .qa-vote-count {
        font-size: 1rem;
    }

    /* Author card - more compact */
    .qa-author-card {
        padding: 0.5rem;
    }

    .qa-author-avatar {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Touch-friendly targets - minimum 44px */
@media (max-width: 768px) {
    .touch-target {
        min-width: 44px;
        min-height: 44px;
    }

    /* Larger tap targets for links */
    .qa-tag-link,
    .qa-nav-link {
        padding: 0.5rem 0.75rem;
    }

    /* More spacing between interactive elements */
    .qa-action-buttons {
        gap: 0.75rem;
    }
}

/* Improve text readability on mobile */
@media (max-width: 640px) {
    .qa-content {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .qa-meta {
        font-size: 0.75rem;
    }
}

/* Hide right sidebar on mobile (handled by Tailwind, but backup) */
@media (max-width: 1023px) {
    .right-sidebar-mobile-hidden {
        display: none !important;
    }
}

/* Safe area insets for mobile browsers */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .qa-bottom-actions {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}