/* public/css/pages/request.css - Styles spécifiques aux pages de demandes */

/* ===== GRILLE DES DEMANDES ===== */
.requests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacer-6);
    padding: var(--spacer-6);
}

.requests-grid .empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.request-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.request-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.request-content {
    padding: var(--spacer-4);
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacer-3);
}

.request-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    margin: 0;
}

.request-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
}

.request-detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacer-2);
}

.request-detail-item .budget {
    font-weight: var(--font-weight-bold);
    color: var(--primary-green);
}

/* Styles spécifiques à la page de détail demande */
.request-show-page .request-details-section {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacer-4);
}

.request-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacer-4);
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--spacer-3);
}

.request-details-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    margin: 0;
}

.request-details-header .budget {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-green);
    background: var(--gray-100);
    padding: var(--spacer-2) var(--spacer-3);
    border-radius: var(--border-radius-sm);
}

.request-details-body {
    padding: var(--spacer-3);
}

.request-details-section .details-section {
    margin-bottom: var(--spacer-4);
}

.request-details-section .details-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
    margin-bottom: var(--spacer-2);
    display: flex;
    align-items: center;
    gap: var(--spacer-1);
}

.request-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacer-2);
}

.request-info-item {
    display: flex;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2);
    background: var(--gray-100);
    border-radius: var(--border-radius);
}

.request-info-item-icon {
    font-size: var(--font-size-lg);
    color: var(--primary-green);
}

.request-info-item-content {
    display: flex;
    flex-direction: column;
}

.request-info-item-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--spacer-1) 0;
}

.request-info-item-value {
    font-size: var(--font-size-sm);
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.request-response-section {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacer-3);
    margin-top: var(--spacer-3);
}

.request-response-item {
    padding: var(--spacer-2);
    border-bottom: 1px solid var(--gray-200);
}

.request-response-item:last-child {
    border-bottom: none;
}

.request-response-item .response-user {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.request-response-item .response-message {
    color: var(--gray-700);
    margin: var(--spacer-2) 0;
}

.request-response-item .response-price {
    font-weight: var(--font-weight-bold);
    color: var(--primary-green);
}

/* Formulaire de réponse */
.request-response-form {
    margin-top: var(--spacer-4);
    background: var(--gray-100);
    padding: var(--spacer-3);
    border-radius: var(--border-radius-lg);
}

/* Styles pour la page de création */
.request-create-page .card {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.request-create-page .card-header {
    background: var(--primary-green);
    color: var(--white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacer-3);
}

.request-create-page .card-body {
    padding: var(--spacer-4);
}

/* Responsive */
@media (max-width: 768px) {
    .requests-grid {
        grid-template-columns: 1fr;
        gap: var(--spacer-4);
        padding: var(--spacer-4);
    }

    .request-show-page .request-details-section {
        padding: var(--spacer-3);
    }

    .request-details-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacer-2);
    }

    .request-details-header h2 {
        font-size: var(--font-size-xl);
    }

    .request-details-header .budget {
        font-size: var(--font-size-lg);
    }

    .request-info-grid {
        grid-template-columns: 1fr;
    }

    .request-create-page .card-body {
        padding: var(--spacer-3);
    }
}

@media (max-width: 480px) {
    .request-title {
        font-size: var(--font-size-base);
    }

    .request-details-header h2 {
        font-size: var(--font-size-lg);
    }

    .request-details-section .details-section-title {
        font-size: var(--font-size-sm);
    }
}