/* Browse Problems Page Styles */

/* Page Container */
.browse-container {
    background: #FAFAFA;
    min-height: 100vh;
}

/* Ensure equal height cards in grid */
.browse-container .row {
    display: flex;
    flex-wrap: wrap;
}

.browse-container .row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* Logo */
.browse-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Search Wrapper */
.search-wrapper {
    position: relative;
}

.search-wrapper .input-group-text {
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: white;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
}

.search-wrapper .form-control {
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #ced4da;
    border-left: none;
    padding: 0.75rem 1rem;
}

.search-wrapper .form-control:focus {
    border-color: #86b7fe;
    box-shadow: none;
    outline: 0;
}

.search-wrapper .input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: 12px;
}

.search-wrapper .input-group:focus-within .input-group-text {
    border-color: #86b7fe;
}

.search-wrapper .input-group:focus-within .form-control {
    border-color: #86b7fe;
}

/* Clear button */
.search-wrapper .btn-outline-secondary {
    border: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 12px 12px 0;
    background: white;
    color: #6c757d;
    padding: 0.75rem 1rem;
}

.search-wrapper .btn-outline-secondary:hover {
    background: #f8f9fa;
    color: #495057;
    border-color: #ced4da;
}

/* RTL Support for Arabic */
html[dir="rtl"] .search-wrapper .input-group {
    flex-direction: row-reverse !important;
    direction: rtl;
}

html[dir="rtl"] .search-wrapper .input-group > * {
    float: none;
}

html[dir="rtl"] .search-wrapper .input-group-text {
    border-left: none;
    border-right: 1px solid #ced4da;
    border-radius: 0 12px 12px 0;
    order: 3;
}

html[dir="rtl"] .search-wrapper .form-control {
    border-right: none;
    border-left: 1px solid #ced4da;
    border-radius: 0;
    text-align: right;
    direction: rtl;
    order: 2;
}

html[dir="rtl"] .search-wrapper .btn-outline-secondary {
    border-right: none;
    border-left: 1px solid #ced4da;
    border-radius: 12px 0 0 12px;
    order: 1;
}

html[dir="rtl"] .search-wrapper .input-group:focus-within {
    border-radius: 12px;
}

/* HTMX Loading Indicator */
.htmx-indicator {
    display: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.htmx-indicator.htmx-request {
    display: inline-block;
}

/* RTL indicator position */
html[dir="rtl"] .htmx-indicator {
    right: auto;
    left: 15px;
}

/* Problem Cards */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: auto;
}

.card-link:hover {
    text-decoration: none;
    color: inherit;
}

.problem-card {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #FFFFFF;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;

}

.problem-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    overflow: hidden;
}

.problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--brand-accent);
}

.problem-card .card-title {
    color: var(--brand-neutral-900);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;

    /* Multi-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(1.125rem * 1.5 * 2);
    min-height: calc(1.125rem * 1.5 * 2);
    max-height: calc(1.125rem * 1.5 * 2);

    /* Better word breaking */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Date & Badge Row */
.date-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

/* Creation Date */
.creation-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6B7280;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.creation-date i {
    font-size: 1rem;
    color: #9CA3AF;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.creation-date span {
    line-height: 1.5;
    display: inline-block;
}

.problem-card .card-text {
    color: var(--brand-neutral-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;

    /* Multi-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(0.9375rem * 1.6 * 2.8);
    min-height: calc(0.9375rem * 1.6 * 2.8);
    max-height: calc(0.9375rem * 1.6 * 2.8);

    /* Better word breaking */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* RTL Support for Date & Badge Row */
html[dir="rtl"] .date-badge-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .creation-date {
    flex-direction: row-reverse;
}

/* Voting Status Badge */
.voted-badge {
    background: #10B981;
    color: white;
    padding: 0.375rem 0.625rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.voted-badge i {
    font-size: 0.75rem;
}

/* Card Footer Content */
.card-footer-content {
    border-top: 1px solid #F3F4F6;
    padding-top: 1rem;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Vote Count - Fixed Height */
.card-footer-content > .d-flex.align-items-center {
    min-height: 32px;
    line-height: 1.5;
}

.card-footer-content .bi-pie-chart {
    font-size: 1rem;
}

/* Social Links */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 60px; /* Reserve space even when empty */
}

.social-links-empty {
    min-height: 60px; /* Keep same height when empty */
    visibility: hidden; /* Hide but maintain space */
}

.social-links .d-flex {
    flex-wrap: wrap;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: white;
}

.social-icon.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-icon.facebook {
    background: #1877F2;
}

.social-icon.twitter {
    background: #000000;
}

/* Vote Button */
.problem-card .btn-primary {
    background: var(--brand-accent);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 44px; /* Touch-friendly minimum size */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.problem-card .btn-primary:hover {
    background: var(--brand-accent-dark);
    transform: translateY(-1px);
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .problem-card:hover {
        transform: none;
    }

    .problem-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .social-icon:hover {
        transform: none;
    }

    .social-icon:active {
        transform: scale(0.95);
    }

    .problem-card .btn-primary:hover {
        transform: none;
    }

    .problem-card .btn-primary:active {
        transform: scale(0.98);
    }
}

/* Pagination */
.pagination {
    gap: 0.5rem;
}

.pagination .page-link {
    border-radius: 8px;
    color: var(--brand-neutral-700);
    border: 1px solid #E5E7EB;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
    background: white;
}

.pagination .page-link:hover {
    background: var(--brand-accent);
    color: white;
    border-color: var(--brand-accent);
}

.pagination .page-item.active .page-link {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: white;
}

.pagination button.page-link {
    cursor: pointer;
}

/* Empty State */
.browse-container .text-center i.bi-search {
    opacity: 0.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Header adjustments */
    .browse-container h1 {
        font-size: 1.75rem;
    }

    .browse-logo {
        width: 50px;
        height: 50px;
    }

    /* Search bar */
    .search-wrapper .input-group-lg .form-control,
    .search-wrapper .input-group-lg .input-group-text {
        font-size: 1rem;
        padding: 0.75rem;
    }

    /* Cards layout - single column on small screens */
    .browse-container .row > [class*='col-'] {
        max-width: 100%;
    }

    /* Card styling */
    .problem-card {
        margin-bottom: 1rem;
    }

    .problem-card .card-body {
        padding: 1rem;
    }

    .problem-card .card-title {
        font-size: 1.125rem;
        min-height: auto;
        line-height: 1.4;
    }

    .problem-card .card-text {
        font-size: 0.9375rem;
    }

    /* Creation date */
    .creation-date {
        font-size: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .creation-date i {
        font-size: 0.8125rem;
    }

    /* Voting badge */
    .voted-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }

    .voted-badge i {
        font-size: 0.7rem;
    }

    /* Footer content */
    .card-footer-content {
        gap: 0.625rem;
    }

    /* Vote count */
    .card-footer-content > .d-flex.align-items-center {
        min-height: 28px;
    }

    .card-footer-content .bi-pie-chart {
        font-size: 0.875rem;
    }

    /* Social icons */
    .social-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    /* Button */
    .problem-card .btn-primary {
        padding: 0.625rem 1rem;
        font-size: 0.9375rem;
    }

    /* Pagination */
    .pagination .page-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.875rem;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 576px) {
    .browse-container {
        padding-top: 1rem;
    }

    .browse-container .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .browse-container h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .browse-container p {
        font-size: 0.875rem;
    }

    /* Tighter spacing */
    .browse-container .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .browse-container .mb-5 {
        margin-bottom: 2rem !important;
    }

    /* Card grid spacing */
    .browse-container .row.g-4 {
        gap: 1rem !important;
    }

    /* Search input */
    .search-wrapper .input-group-lg .form-control {
        font-size: 0.9375rem;
    }
}

/* Landscape phones and small tablets */
@media (min-width: 576px) and (max-width: 991px) {
    .browse-container .row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}