/* =========================
   Beer report modal
   ========================= */

#reportModal .modal-body {
   overflow: auto;
}

#reportModal .form-input,
#reportModal .form-select {
   border: 2px solid var(--border-light);
   border-radius: var(--radius-xl);
   font-size: var(--text-md);
   margin: var(--space-xl);
   transition: border-color 0.25s ease;
   overflow: hidden;
   padding: var(--space-xl);
   width: -webkit-fill-available;
   background: var(--bg-white);
   color: var(--text-primary);
   font-family: inherit;
}

#reportModal .form-input:focus,
#reportModal .form-select:focus {
   outline: none;
   border-color: var(--border-purple);
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#reportModal .form-input::placeholder {
   color: var(--text-muted);
   opacity: 0.8;
}

#reportModal .form-label {
   font-weight: 600;
   color: var(--text-secondary);
   font-size: var(--text-lg);
   padding: var(--space-md);
   display: flex;
   margin-bottom: var(--space-xs);
}

#reportModal .form-group {
   margin-bottom: var(--space-lg);
}

#reportModal .form-group:last-child {
   margin-bottom: 0;
}

/* Form Validation States */
#reportModal .form-input.error,
#reportModal .form-select.error {
   border-color: var(--red);
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

#reportModal .form-input.success,
#reportModal .form-select.success {
   border-color: var(--green);
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

#reportModal .form-error-message {
   color: var(--red);
   font-size: var(--text-sm);
   margin-top: var(--space-xs);
   padding-left: var(--space-lg);
   font-weight: 500;
}

#reportModal .form-success-message {
   color: var(--green);
   font-size: var(--text-sm);
   margin-top: var(--space-xs);
   padding-left: var(--space-lg);
   font-weight: 500;
}

#reportModal .form-help-text {
   color: var(--text-muted);
   font-size: var(--text-sm);
   margin-top: var(--space-xs);
   padding-left: var(--space-lg);
   line-height: 1.4;
}

.beer-confirmed {
    display: none;
    background: #d4edda;
    border: 2px solid #28a745;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.beer-confirmed.show {
    display: block !important;
}


.beer-details-prompt-modal .modal-content {
    max-width: 380px;
    border-radius: 20px;
}

.beer-details-prompt-modal .gradient-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.beer-details-prompt-modal .modal-title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin: 0;
    color: white;
}

.beer-details-prompt-modal .prompt-message {
    padding: 1.5rem 1.5rem 1rem;
    text-align: center;
}

.beer-details-prompt-modal .prompt-text {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    color: var(--text-primary);
    margin: 0;
}

.beer-details-prompt-modal .action-buttons {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}

.beer-details-prompt-modal .btn {
    padding: clamp(0.75rem, 2vw, 1rem);
    font-size: clamp(0.9rem, 2vw, 1rem);
    font-weight: 600;
    border-radius: 12px;
}

.brewery-confirmed,
.beer-confirmed {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ======================================
   After beer report, status prompt modal
   ====================================== */

#statusPromptAfterBeerModal .modal-overlay {
   display: grid;
   gap: var(--space-md);
}

#statusPromptAfterBeerModal .status-quick-options {
   display: grid;
   gap: var(--space-md);
}