/* common.css - Shared styles for the entire application */
:root {
    --primary-bg: #f4f7f6; --header-color: #003B46; --text-color: #333;
    --border-color: #e0e0e0; --accent-color: #07575B; --button-hover: #66A5AD;
    --cancel-color: #7f8c8d; --delete-color: #c0392b; --warning-color: #e74c3c;
    --info-color: #2980b9; --modal-overlay: rgba(0, 0, 0, 0.6);
    --edit-color: #f39c12; --approve-color: #27ae60;
}

html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-color);
}

.hidden { display: none !important; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

header {
    text-align: center; padding: 20px 0;
    color: var(--header-color); margin-bottom: 20px;
}
header h1 { font-size: 2.5em; margin: 0; }

.page-controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; flex-wrap: wrap; gap: 15px;
}

.nav-button {
    display: inline-block; color: white; padding: 8px 15px; border: none;
    border-radius: 5px; text-decoration: none; font-weight: bold;
    cursor: pointer; transition: background-color 0.2s;
}
.nav-button:hover { background-color: var(--button-hover); }

/* --- Reusable Modal Styles --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--modal-overlay); display: flex;
    justify-content: center; align-items: center; z-index: 1000;
    padding: 20px; box-sizing: border-box; overflow-y: auto;
}
.modal-content {
    background-color: white; padding: 25px; border-radius: 8px;
    width: 90%; max-width: 500px; position: relative;
    margin: auto; /* Helps with vertical centering in scrollable overlays */
}
.modal-close-btn {
    position: absolute; top: 10px; right: 15px; font-size: 1.5em;
    font-weight: bold; cursor: pointer; border: none; background: none;
}

/* --- Reusable Form Styles --- */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 8px; border: 1px solid #ccc;
    border-radius: 4px; box-sizing: border-box;
}
.form-actions {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
}
#auth-error {
    color: var(--warning-color); font-size: 0.9em; margin-top: 8px; display: none;
}

/* --- Suggestion Dot Styles --- */
.suggestion-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-color: #3498db; /* Blue color for accepted suggestions */
    border-radius: 50%;
    border: 2px solid white;
    display: none; /* Hidden by default */
    animation: pulse-blue 1.5s infinite;
}

.home-menu-item.has-accepted-suggestion .suggestion-dot {
    display: block;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}