/* modals.css */

/* Full Recipe Modal Width Adjustment */
#recipeModal .modal-dialog,
#newRecipeModal .modal-dialog,
#draftEditorModal .modal-dialog {
    max-width: 850px;
    width: 85%;
}

#draftEditorModal .modal-dialog {
    max-width: 900px; /* Slightly wider for the two text areas */
    width: 90%;
}

/* Define the primary application color scheme */
:root {
    --app-primary-color: #4A7C9F;
    --app-primary-hover: #38617d; /* Darker shade of your primary color */
    --app-success-color: var(--app-primary-color); /* Use primary for success/save */
    --app-danger-color: #A03C3C; /* A toned-down red for safe deletion warnings */
}

/* General Modal Content Overrides */
.modal {
    /* Hidden by default in HTML, shown by JS */
    /* When shown (display: block), these styles apply: */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Must be higher than everything else */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */


    /* Center the modal content using flex or grid if desired,
       but the margin auto approach on .modal-content usually suffices. */
}

/* Enable cursor change for the drag handle */
.modal-header {
    cursor: move;
}

/* Custom style to apply blur effect to the official Bootstrap backdrop */
.modal-backdrop {
    backdrop-filter: blur(3px);
    /* Note: You might need -webkit- for better browser support */
}

/* Modal content should be centered */
/* Base modal content (can be removed if all modals are specialized) */
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 450px; /* Keep as a general fallback for non-specialized modals */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* --- FIX for EDITABLE NAME FIELD --- */
#modalRecipeName {
    margin-top: 0;
    color: #4A7C9F;
    text-align: center;
    /* New styles for input/contenteditable element */
    border: none;
    background: transparent;
    font-size: 1.8em;
    font-weight: bold;
    padding: 5px 0;
    width: 100%; /* Ensure it spans the modal width */
    box-sizing: border-box;
}

#modalRecipeName:focus {
    outline: none;
    box-shadow: 0 0 0 1px #4A7C9F; /* Subtle blue outline on focus */
}

/* Textarea in the View/Edit Modal */
#modalRecipeContent {
    width: 100%;
    min-height: 400px;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.9em;
    resize: vertical;
    box-sizing: border-box;
}

/* New Recipe Modal Input Styles */
#newRecipeModal input[type="text"],
#newRecipeModal textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em;
}

#newRecipeModal label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

#newRecipeModal textarea {
    min-height: 250px;
    resize: vertical;
}

/* 2. Modernized Modal Content for Login/Register */
/* MODIFIED: Standardize Login/Register/Settings Modals */
#loginModal .modal-content,
#registerModal .modal-content,
#userSettingsModal .modal-content {
    background: linear-gradient(145deg, #ffffff, #f9f9f9);
    margin: 10% auto; /* Standardized margin for vertical center */
    padding: 30px;
    max-width: 450px; /* 🛑 FIX: Standardize all three to 450px */
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

/*
#loginModal .modal-content,
#registerModal .modal-content {
    max-width: 450px; /* Standardize the width for a login form */
    margin: 10% auto; /* Centers the box */
}
*/


/* Draft Editor Modal Styles */
#draftRecipeName {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1.2em;
    font-weight: bold;
    color: #4A7C9F;
}

#draftInstructionsTextarea {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 1em;
    resize: vertical;
    box-sizing: border-box;
}

/* Container for grouping the ingredient/instruction fields */
.draft-fields-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.draft-fields-grid > div {
    flex: 1;
}

/* Ensure mobile layout stacks the fields */
@media (max-width: 768px) {
    .draft-fields-grid {
        flex-direction: column;
    }
}

/* Responsive adjustments for all modals */
@media (max-width: 600px) {
    .modal-content {
        margin: 5% auto;
        width: 95%;
        padding: 10px;
    }
}

/* DIVIDERS
/* Ensure the .divider element for GSI is styled */
.divider {
    text-align: center;
    margin: 15px 0;
    border-bottom: 1px solid #ddd;
    line-height: 0.1em;
    font-size: 0.9em;
    color: #888;
}
.divider span {
    background: #fefefe;
    padding: 0 10px;
}

/* 3. Input Styling for Auth Forms */
#registerForm input[type="text"],
#registerForm input[type="email"],
#registerForm input[type="password"],
#loginForm input[type="text"],
#loginForm input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Focus State */
#registerForm input:focus,
#loginForm input:focus {
    border-color: #4A7C9F; /* Highlight color on focus */
    box-shadow: 0 0 0 3px rgba(74, 124, 159, 0.2);
    outline: none;
}

/* 4. Heading Styling */
#registerModal h2, #loginModal h2 {
    color: #4A7C9F; /* Match your existing blue tone */
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}

/* 5. Button Styling (Requires your button classes: .btn, .btn-primary) */
.btn-primary {
    /* Assuming a blue theme */
    background-color: #4A7C9F;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%; /* Make the primary button full width */
}

.btn-primary:hover {
    background-color: #38617d;
}

/* 6. Footer Links */
.modal-footer-links {
    text-align: center;
    margin-top: 15px;
}
.modal-footer-links a {
    color: #4A7C9F;
    text-decoration: none;
    font-size: 0.9em;
}
.modal-footer-links a:hover {
    text-decoration: underline;
}