/* ============================================ */
/* تنظیمات ریسپانسیو برای صفحه داستان‌ها (stories.php) */
/* ============================================ */

/* حالت تاریک برای همه صفحات */
body.dark-mode .category-box,
body.dark-mode .golden-card,
body.dark-mode .story-card,
body.dark-mode .stat-card,
body.dark-mode .mission-card,
body.dark-mode .author-card,
body.dark-mode .profile-card,
body.dark-mode .panel-card,
body.dark-mode .comment-box,
body.dark-mode .episode-content,
body.dark-mode .story-header,
body.dark-mode .author-section,
body.dark-mode .comments-section,
body.dark-mode .form-container,
body.dark-mode .modal-content {
    background: #eeeeee !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    
}

body.dark-mode p,
body.dark-mode span:not(.badge):not(.btn) {
    color: #cbd5e0 !important;
}

body.dark-mode .text-muted,
body.dark-mode .story-meta,
body.dark-mode .comment-date {
    color: #a0aec0 !important;
}

body.dark-mode .border,
body.dark-mode hr,
body.dark-mode .divider {
    border-color: #4a5568 !important;
}

body.dark-mode .btn-outline {
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .btn-outline:hover {
    background: #4a5568 !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #718096 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode .table {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .table th {
    background: #1a202c !important;
    
}

body.dark-mode .table td {
    border-color: #4a5568 !important;
}

body.dark-mode .badge {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .badge-primary {
    background: #667eea !important;
}

body.dark-mode .badge-success {
    background: #48bb78 !important;
}

body.dark-mode .badge-warning {
    background: #ecc94b !important;
    color: #1a202c !important;
}

body.dark-mode .badge-danger {
    background: #f56565 !important;
}

body.dark-mode .alert {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .alert-success {
    background: #276749 !important;
    border-color: #2f855a !important;
}

body.dark-mode .alert-warning {
    background: #744210 !important;
    border-color: #975a16 !important;
}

body.dark-mode .alert-danger {
    background: #742a2a !important;
    border-color: #9b2c2c !important;
}

body.dark-mode .alert-info {
    background: #1a4b6d !important;
    border-color: #2c5282 !important;
}

/* استایل‌های ریسپانسیو قبلی با اضافه شدن حالت تاریک */

@media screen and (max-width: 1200px) {
    .container {
        padding: 0 15px;
    }
    
    .category-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .golden-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 992px) {
    .stories-hero h1 {
        font-size: 42px;
    }
    
    .stories-hero p {
        font-size: 16px;
        padding: 0 20px;
    }
    
    .stats-banner {
        gap: 30px;
    }
    
    .stat-badge {
        padding: 12px 25px;
        font-size: 16px;
    }
    
    body.dark-mode .stat-badge {
        background: #2d3748 !important;
    }
}

@media screen and (max-width: 768px) {
    /* هدر */
    .stories-hero {
        padding: 50px 0;
    }
    
    .stories-hero h1 {
        font-size: 32px;
    }
    
    .stories-hero p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .stats-banner {
        flex-direction: column;
        gap: 15px;
    }
    
    .stat-badge {
        width: 100%;
        text-align: center;
        font-size: 15px;
    }
    
    /* چهار باکس */
    .category-boxes {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .category-box {
        padding: 30px 20px;
    }
    
    .category-icon {
        font-size: 48px;
    }
    
    .category-title {
        font-size: 20px;
    }
    
    .category-count {
        font-size: 16px;
    }
    
    /* باکس طلایی */
    .golden-title h2 {
        font-size: 28px;
    }
    
    .golden-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .golden-card {
        max-width: 100%;
    }
    
    .golden-card-image {
        height: 180px;
    }
    
    /* همه داستان‌ها */
    .section-header h2 {
        font-size: 28px;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
    }
    
    .story-card {
        max-width: 100%;
    }
    
    .story-image {
        height: 200px;
    }
    
    .story-title {
        font-size: 18px;
    }
    
    .story-meta {
        font-size: 13px;
        flex-wrap: wrap;
    }
    
    .story-stats {
        font-size: 12px;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 576px) {
    .stories-hero h1 {
        font-size: 26px;
    }
    
    .stories-hero p {
        font-size: 13px;
    }
    
    .category-box {
        padding: 25px 15px;
    }
    
    .category-icon {
        font-size: 40px;
    }
    
    .category-title {
        font-size: 18px;
    }
    
    .category-count {
        font-size: 14px;
    }
    
    .golden-title h2 {
        font-size: 24px;
    }
    
    .golden-card-image {
        height: 160px;
    }
    
    .story-card {
        margin: 0;
    }
    
    .story-image {
        height: 180px;
    }
    
    .story-badge {
        padding: 4px 12px;
        font-size: 11px;
    }
    
    .story-type-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* ============================================ */
/* تنظیمات ریسپانسیو برای صفحه داستان (story.php) */
/* ============================================ */

@media screen and (max-width: 992px) {
    .story-wrapper {
        padding: 0 15px;
    }
    
    .story-header {
        padding: 30px;
    }
    
    .story-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 768px) {
    .story-wrapper {
        margin: 20px auto;
    }
    
    .story-header {
        padding: 25px;
    }
    
    .story-title {
        font-size: 24px;
    }
    
    .story-meta {
        gap: 10px;
    }
    
    .story-meta-item {
        padding: 6px 15px;
        font-size: 13px;
    }
    
    .stats-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }
    
    .stat-item {
        justify-content: flex-start;
        padding: 8px 0;
    }
    
    .rating-section {
        width: 100%;
        justify-content: center;
    }
    
    .save-button {
        width: 100%;
        justify-content: center;
    }
    
    .episodes-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .episode-selector {
        width: 100%;
        justify-content: space-between;
    }
    
    .episode-selector select {
        flex: 1;
        margin-left: 10px;
    }
    
    .episode-content {
        padding: 20px;
    }
    
    .episode-title {
        font-size: 20px;
    }
    
    .episode-text {
        font-size: 15px;
        line-height: 1.8;
    }
    
    .author-section {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    
    .author-avatar {
        width: 120px;
        height: 120px;
    }
    
    .author-stats {
        justify-content: center;
    }
    
    .comments-section {
        padding: 25px;
    }
    
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comment-author {
        margin-bottom: 5px;
    }
    
    .comment-content {
        margin-right: 0;
    }
    
    .comment-content::before {
        display: none;
    }
}

@media screen and (max-width: 576px) {
    .story-header {
        padding: 20px;
    }
    
    .story-title {
        font-size: 22px;
    }
    
    .story-meta-item {
        width: 100%;
        justify-content: center;
    }
    
    .rating-section {
        flex-wrap: wrap;
    }
    
    .stars-container {
        width: 100%;
        justify-content: center;
    }
    
    .rating-form {
        width: 100%;
        flex-direction: column;
    }
    
    .rating-stars-input {
        justify-content: center;
    }
    
    .episode-count-badge {
        font-size: 12px;
    }
    
    .episode-selector select {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .episode-title {
        font-size: 18px;
    }
    
    .episode-text {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .author-avatar {
        width: 100px;
        height: 100px;
    }
    
    .author-info h3 {
        font-size: 20px;
    }
    
    .author-bio {
        font-size: 14px;
        padding: 15px;
    }
    
    .author-stat-number {
        font-size: 22px;
    }
    
    .comments-header h3 {
        font-size: 20px;
    }
    
    .comment-form {
        padding: 20px;
    }
    
    .comment-form input,
    .comment-form textarea {
        padding: 12px;
        font-size: 14px;
    }
    
    .comment-author-name {
        font-size: 14px;
    }
    
    .comment-date {
        font-size: 11px;
    }
}

/* ============================================ */
/* تنظیمات ریسپانسیو برای پنل کاربری (panel.php) */
/* ============================================ */

@media screen and (max-width: 1200px) {
    .panel-wrapper {
        padding: 0 15px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .missions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .authors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .panel-header {
        padding: 25px;
    }
    
    .welcome-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .user-avatar {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
    
    .welcome-text h1 {
        font-size: 24px;
    }
    
    .level-badge {
        justify-content: center;
    }
    
    .level-card {
        padding: 20px;
    }
    
    .current-level {
        font-size: 22px;
        flex-direction: column;
        gap: 5px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .missions-section {
        padding: 20px;
    }
    
    .missions-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .missions-grid {
        grid-template-columns: 1fr;
    }
    
    .mission-card {
        padding: 20px;
    }
    
    .critic-section {
        padding: 20px;
    }
    
    .authors-grid {
        grid-template-columns: 1fr;
    }
    
    .hall-of-fame {
        padding: 30px 20px;
    }
    
    .fame-grid {
        grid-template-columns: 1fr;
    }
    
    .tabs {
        justify-content: center;
        gap: 5px;
    }
    
    .tab {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    .stories-section {
        padding: 20px;
    }
    
    .story-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .story-info h3 {
        font-size: 16px;
    }
    
    .story-meta {
        gap: 10px;
        font-size: 12px;
        flex-wrap: wrap;
    }
    
    .story-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .edit-section {
        padding: 20px;
    }
    
    .edit-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .episode-selector-small {
        width: 100%;
        margin-top: 10px;
    }
    
    .episode-selector-small select {
        width: 100%;
    }
    
    .new-story-section {
        padding: 20px;
    }
    
    .status-options {
        flex-direction: column;
    }
    
    .status-option {
        width: 100%;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button,
    .form-actions a {
        width: 100%;
        text-align: center;
    }
    
    .image-upload-area {
        padding: 20px;
    }
    
    /* مودال */
    .modal-content {
        width: 95%;
        padding: 20px;
    }
    
    .avatar-preview {
        width: 120px;
        height: 120px;
    }
}

@media screen and (max-width: 576px) {
    .panel-header {
        padding: 20px;
    }
    
    .welcome-text h1 {
        font-size: 20px;
    }
    
    .level-badge {
        font-size: 13px;
        padding: 6px 15px;
    }
    
    .level-icon {
        font-size: 20px;
    }
    
    .current-level {
        font-size: 18px;
    }
    
    .xp-info {
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    .mission-icon {
        font-size: 28px;
    }
    
    .mission-title {
        font-size: 16px;
    }
    
    .mission-desc {
        font-size: 12px;
    }
    
    .mission-reward {
        font-size: 11px;
        padding: 3px 10px;
    }
    
    .author-card {
        padding: 20px;
    }
    
    .author-name {
        font-size: 16px;
    }
    
    .author-stats {
        font-size: 12px;
    }
    
    .vote-btn {
        padding: 6px 15px;
        font-size: 12px;
    }
    
    .fame-card {
        padding: 20px;
    }
    
    .fame-name {
        font-size: 18px;
    }
    
    .fame-title {
        font-size: 12px;
    }
    
    .tab {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .btn-view,
    .btn-edit {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .edit-header h2 {
        font-size: 18px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .form-control {
        padding: 10px;
        font-size: 13px;
    }
    
    .btn-submit,
    .btn-cancel {
        padding: 12px;
        font-size: 14px;
    }
}

/* ============================================ */
/* تنظیمات ریسپانسیو برای پروفایل نویسنده (author-profile.php) */
/* ============================================ */

@media screen and (max-width: 992px) {
    .profile-wrapper {
        padding: 0 15px;
    }
    
    .profile-name {
        font-size: 32px;
    }
}

@media screen and (max-width: 768px) {
    .profile-cover {
        height: 150px;
    }
    
    .profile-card {
        padding: 25px;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
        margin-top: -80px;
    }
    
    .profile-avatar {
        width: 150px;
        height: 150px;
    }
    
    .profile-name {
        font-size: 28px;
    }
    
    .profile-badge {
        font-size: 14px;
        padding: 6px 20px;
    }
    
    .profile-bio {
        font-size: 14px;
    }
    
    .profile-actions {
        justify-content: center;
    }
    
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .profile-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .tab {
        font-size: 14px;
        padding: 8px 20px;
    }
    
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .story-image {
        height: 120px;
    }
    
    .story-content {
        padding: 15px;
    }
    
    .story-title {
        font-size: 14px;
    }
    
    .followers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .follower-card {
        padding: 15px;
    }
    
    .follower-avatar {
        width: 50px;
        height: 50px;
    }
    
    .follower-info h4 {
        font-size: 14px;
    }
    
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .achievement-card {
        padding: 20px;
    }
    
    .achievement-icon {
        font-size: 32px;
    }
    
    .achievement-title {
        font-size: 14px;
    }
}

@media screen and (max-width: 576px) {
    .profile-card {
        padding: 20px;
    }
    
    .profile-avatar {
        width: 120px;
        height: 120px;
    }
    
    .profile-name {
        font-size: 24px;
    }
    
    .profile-badge {
        font-size: 13px;
        padding: 5px 15px;
    }
    
    .profile-actions .btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .stat-box {
        padding: 20px;
    }
    
    .profile-tabs .tab {
        width: 100%;
        text-align: center;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
    }
    
    .story-image {
        height: 160px;
    }
    
    .followers-grid {
        grid-template-columns: 1fr;
    }
    
    .follower-card {
        flex-direction: column;
        text-align: center;
    }
    
    .follower-avatar {
        margin-bottom: 10px;
    }
    
    .achievements-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* تنظیمات عمومی برای همه صفحات */
/* ============================================ */

@media screen and (max-width: 480px) {
    /* تنظیمات فونت */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 26px !important;
    }
    
    h2 {
        font-size: 22px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    /* حاشیه‌ها و فاصله‌ها */
    .container,
    .wrapper,
    .panel-wrapper,
    .profile-wrapper,
    .story-wrapper {
        margin: 15px auto;
    }
    
    /* دکمه‌ها */
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-danger {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* فرم‌ها */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-control {
        padding: 10px;
        font-size: 14px;
    }
    
    /* جدول‌ها */
    table {
        font-size: 12px;
    }
    
    td, th {
        padding: 8px;
    }
    
    /* آلرت‌ها */
    .alert {
        padding: 12px 15px;
        font-size: 13px;
    }
}

/* ============================================ */
/* حالت افقی گوشی (لنداسکیپ) */
/* ============================================ */

@media screen and (max-width: 992px) and (orientation: landscape) {
    .stories-hero {
        padding: 40px 0;
    }
    
    .stories-hero h1 {
        font-size: 36px;
    }
    
    .category-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .golden-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .profile-header {
        margin-top: -60px;
    }
    
    .profile-avatar {
        width: 120px;
        height: 120px;
    }
    
    .quick-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .panel-header {
        padding: 30px;
    }
    
    .welcome-section {
        flex-direction: row;
        text-align: right;
    }
    
    .user-avatar {
        margin: 0;
    }
}

/* ============================================ */
/* رفع مشکلات لمسی برای گوشی */
/* ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* حذف hover effects */
    .category-box:hover,
    .golden-card:hover,
    .story-card:hover,
    .stat-card:hover,
    .mission-card:hover,
    .author-card:hover,
    .follower-card:hover,
    .achievement-card:hover {
        transform: none !important;
    }
    
    /* بزرگتر کردن ناحیه کلیک */
    .tab,
    .btn,
    .story-card,
    .follower-card,
    .vote-btn,
    .story-actions a,
    .theme-toggle {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* جلوگیری از اسکرول افقی */
    body {
        overflow-x: hidden;
    }
    
    .container,
    .wrapper,
    .panel-wrapper,
    .profile-wrapper,
    .story-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* انیمیشن transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* رفع مشکل چشمک زدن در لود اولیه */
.no-transition * {
    transition: none !important;
}