/*
 * Standalone Cravingdagboek - Nieuw Design System
 * Implementeert de Capacitor.js hybride app look & feel.
 * Update: Stap 7 Tijdsduur Slider (Rood thema & Gradient).
 */

/* --- 1. Kleurenpalet & Variabelen --- */
:root {
    /* Brand Colors */
    --app-header-bg: #2c3e50;
    --app-primary: #3498db;
    --app-lms-green: #27ae60;
    --app-danger: #e74c3c;
    --app-warning: #f39c12;
    --app-purple: #8e44ad;
    --app-dark-gray: #34495e; 
    
    /* Backgrounds */
    --app-bg-body: #f4f7f6;
    --app-bg-card: #ffffff;
    --app-bg-light-gray: #ecf0f1;
    
    /* Typography */
    --app-text-main: #333333;
    --app-text-muted: #777777;
    
    /* Shapes & Shadows */
    --app-radius-card: 15px;
    --app-radius-header: 30px;
    --app-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    
    /* Inputs */
    --app-input-bg: #ffffff;
    --app-input-border: #dcdfe6;
}

/* --- 5. Typografie & Body --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--app-bg-body); font-family: 'Inter', sans-serif; color: var(--app-text-main); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 600; }

/* --- 2. De "Signature" Header (GECORRIGEERD MET FLEXBOX) --- */
.app-header { 
    background-color: var(--app-header-bg); 
    color: white; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 30px 20px; 
    padding-top: calc(20px + env(safe-area-inset-top)); 
    border-radius: 0 0 var(--app-radius-header) var(--app-radius-header); 
    box-shadow: var(--app-shadow); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto;
}
.header-left { flex: 0 0 auto; }
.header-center { flex-grow: 1; text-align: right; padding-left: 15px; }
.app-header h1 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.2; }
.header-right { display: none; }

/* --- DE WITTE NAVIGATIE KNOP --- */
.app-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: var(--app-header-bg) !important;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.app-back-btn:active { transform: scale(0.95); background-color: #f0f0f0; }
.app-back-btn i { font-size: 0.9rem; }

/* Layout Containers */
.page-container { padding: 15px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); width: 100%; max-width: 600px; margin: 0 auto; }
.header-action-bar { margin-bottom: 15px; }
.app-container { max-width: 600px; margin: 20px auto; background-color: transparent; }
.app-content { padding: 0; }

/* --- 3. Content Cards --- */
.card { background-color: var(--app-bg-card); border-radius: var(--app-radius-card); box-shadow: var(--app-shadow); padding: 20px; margin-bottom: 15px; }
.card h2, .card h3 { margin-top: 0; margin-bottom: 15px; color: var(--app-text-main); }
.card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.card-footer { margin-top: 20px; text-align: center; }

/* --- 4. Knoppen & Interactie --- */
.app-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.1s, box-shadow 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); -webkit-tap-highlight-color: transparent; }
.app-button:active { transform: scale(0.98); box-shadow: none; }
.app-button-primary { background: var(--app-primary); color: white !important; }
.app-button-secondary { background: var(--app-bg-light-gray); color: var(--app-text-main) !important; box-shadow: none; }
.app-button-danger { background: var(--app-danger); color: white !important; }
.app-button-success { background: var(--app-lms-green); color: white !important; }
.app-button-fullwidth { display: flex; width: 100%; }
.app-button i { margin-right: 8px; }
.app-button-small { padding: 8px 12px; font-size: 14px; }
.app-button-small i { margin-right: 0; }

.app-footer { text-align: center; padding: 20px; color: var(--white); background-color: var(--app-dark-gray); border-radius: 12px; width: 100%; max-width: 600px; margin: 50px auto 0 auto; }

/* --- INFO ACCORDION (DASHBOARD) --- */
.info-accordion {
    background-color: #69686933
    border-radius: var(--app-radius-card);
    box-shadow: var(--app-shadow);
    margin-bottom: 15px;
    overflow: hidden;
    border: none;
}
.info-accordion .accordion-header {
    padding: 18px 20px;
    background-color: #69686933;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.info-accordion .accordion-header:active {
    background-color: var(--app-bg-light-gray);
}
.info-accordion .header-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--app-header-bg);
}
.info-accordion .expand-icon {
    color: var(--app-text-muted);
    transition: transform 0.3s ease;
}
.info-accordion.active .expand-icon {
    transform: rotate(180deg);
}
.info-accordion .accordion-body {
    padding: 0 20px 20px 20px;
    display: none; /* Wordt getoond via JS slideToggle of .active */
}
.info-accordion.active .accordion-body {
    display: block;
}
.info-accordion .accordion-body p {
    font-size: 0.95rem;
    color: var(--app-text-main);
    margin: 0;
}

/* --- DASHBOARD SPECIFIEK --- */
.card.dashboard-actions-card { padding: 15px; }
.dashboard-actions-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.dashboard-actions-grid .app-button { padding: 12px 5px; font-size: 14px; white-space: nowrap; }
.dashboard-recent-entries { display: flex; flex-direction: column; gap: 10px; }
.app-button-recent { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; background-color: var(--app-bg-light-gray); color: var(--app-text-main) !important; justify-content: start; text-align: left; }
.app-button-recent .recent-entry-date { font-weight: 600; }
.app-button-recent .recent-entry-status { font-weight: 600; font-size: 0.9em; padding: 4px 8px; border-radius: 6px; color: white; }
.app-button-recent .status-success { background-color: var(--app-lms-green); }
.app-button-recent .status-danger { background-color: var(--app-danger); }
.dashboard-grid-dark { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dashboard-grid-dark .app-button { background-color: var(--app-dark-gray); color: white !important; }
.feature-list { list-style: none; padding: 0; text-align: left; }
.feature-list li { display: flex; align-items: start; gap: 10px; margin-bottom: 10px; }
.feature-list i { margin-top: 5px; color: var(--app-lms-green); }
.feature-list li.warning-item i { color: var(--app-warning); }
.account-prompt { margin-top: 15px; }

/* --- VIEW ENTRIES & DETAIL SPECIFIEK --- */
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 15px 20px; }
.detail-list dt { font-weight: 600; color: var(--app-text-muted); }
.detail-list dd { font-weight: 600; }
.badge { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.badge.success { background-color: var(--app-lms-green); color: white; }
.badge.danger { background-color: var(--app-danger); color: white; }
.entry-list-full { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.entry-list-full a { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; padding: 15px; background-color: var(--app-bg-light-gray); border-radius: 12px; text-decoration: none; color: var(--app-text-main); align-items: center; }
.entry-list-full .entry-main .entry-date { font-weight: 600; }
.entry-list-full .entry-main .entry-activity { color: var(--app-text-muted); font-size: 0.9rem; }
.entry-list-full .entry-details { grid-column: 1 / 2; display: flex; gap: 15px; align-items: center; color: var(--app-text-muted); font-size: 0.9rem; }
.entry-list-full .entry-status { grid-column: 2 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.entry-list-full .entry-status i { color: var(--app-text-muted); margin-top: 5px; }
.entry-list-full .entry-actions { padding-right: 15px; }

/* --- HELPING ACTIONS SPECIFIEK --- */
.actions-list-full { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.actions-list-full li { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--app-bg-light-gray); border-radius: 12px; }
.actions-list-full .action-info { display: flex; flex-direction: column; text-align: left; }
.actions-list-full .action-description { font-weight: 600; }
.actions-list-full .action-usage { font-size: 0.8rem; color: var(--app-text-muted); }

/* --- AI TIPS SPECIFIEK --- */
.accordion-container { max-width: 800px; margin: 0 auto; }
.accordion-item { border: none; border-radius: 12px; margin-bottom: 10px; overflow: hidden; background-color: var(--app-bg-light-gray); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; cursor: pointer; background-color: var(--app-bg-light-gray); }
.accordion-item.active .accordion-header { background-color: #69686933; }
.accordion-header .header-text { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.accordion-header .header-text i { color: var(--app-purple); }
.accordion-header .expand-icon { transition: transform 0.3s ease; }
.accordion-item.active .expand-icon { transform: rotate(180deg); }
.accordion-body { padding: 20px; border-top: 1px solid var(--border-color); display: none; line-height: 1.7; background-color: var(--app-bg-card); }
.accordion-body p { margin: 0; }

/* --- NEW ENTRY WIZARD (RESTYLED) --- */
.form-step .step-description { color: var(--app-text-muted); margin-bottom: 30px; margin-top: -10px; }
.form-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 30px; }
.form-actions .app-button { flex-grow: 1; }
.form-actions.align-right { justify-content: flex-end; }
.form-actions-final { display: flex; flex-direction: column; gap: 10px; }
.toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toggle-group label { position: relative; }
.toggle-group input[type="radio"] { opacity: 0; position: absolute; width: 100%; height: 100%; }
.toggle-group span { display: block; text-align: center; padding: 14px; background-color: var(--app-bg-light-gray); border-radius: 12px; font-weight: 600; transition: all 0.2s; }
.toggle-group input[type="radio"]:checked + span { background-color: var(--app-primary); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.toggle-group.large-visual span { padding: 20px; }
.toggle-group.large-visual i { display: block; font-size: 2rem; margin-bottom: 10px; }
.toggle-group.large-visual label:has(#gave_in_yes:checked) span { background-color: var(--app-warning); color: white; }
.toggle-group.large-visual label:has(#gave_in_no:checked) span { background-color: var(--app-lms-green); color: white; }
.strength-display-box { text-align: center; font-weight: 700; font-size: 1.2rem; padding: 15px; border-radius: 12px; color: white; margin-bottom: 20px; transition: background-color 0.2s; }

/* GECORRIGEERD: Milde rode box voor duration */
.duration-display-box { 
    background-color: #ff6b6b !important; 
    color: white !important;
}

.slider-container { position: relative; margin-top: 30px; }
.slider-value-indicator { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-weight: bold; background: var(--app-header-bg); color: white; padding: 2px 8px; border-radius: 5px; font-size: 0.8rem; opacity: 0; transition: opacity 0.2s; }
.custom-slider:active + .slider-value-indicator { opacity: 1; }
.custom-slider { -webkit-appearance: none; width: 100%; height: 12px; background: var(--app-bg-light-gray); border-radius: 6px; outline: none; }
.custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; background: var(--app-primary); border-radius: 50%; cursor: pointer; border: 4px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* GECORRIGEERD: Rode gradient track voor duration slider */
.duration-slider {
    background: linear-gradient(to right, #ffcccc, #cc0000) !important;
}
/* Thumb voor de rode slider */
.duration-slider::-webkit-slider-thumb {
    background: #990000 !important;
}

.slider-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--app-text-muted); margin-top: 10px; width: 100%; }
.checkbox-group .checkbox-label { display: flex; align-items: center; gap: 10px; background-color: var(--app-bg-light-gray); padding: 12px; border-radius: 12px; }
.action-tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
.action-tag { padding: 8px 14px; background-color: #e9ecef; border: none; border-radius: 20px; cursor: pointer; }
.input-group { display: flex; gap: 10px; }
.input-group input { flex-grow: 1; }
.input-group .app-button { padding: 14px; }
#todays_actions_list { display: flex; flex-direction: column; gap: 15px; }
.action-item { background-color: var(--app-bg-light-gray); padding: 15px; border-radius: 12px; }
.action-item__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.action-item__text { font-weight: 600; }
.action-item__remove-btn { background: none; border: none; color: var(--app-text-muted); font-size: 1.2rem; cursor: pointer; }
.effectiveness-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.effectiveness-button { background-color: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.2s; }
.effectiveness-button.active { color: white; border-color: transparent; }
.effectiveness-button[data-value="1"].active { background-color: var(--app-danger); }
.effectiveness-button[data-value="2"].active { background-color: var(--app-warning); }
.effectiveness-button[data-value="3"].active { background-color: var(--app-primary); }
.effectiveness-button[data-value="4"].active { background-color: var(--app-lms-green); }
.form-actions-final { display: flex; flex-direction: column; gap: 10px; }
.form-step-error { color: var(--app-danger); font-weight: 600; margin-bottom: 15px; }

/* --- FORM CONTROL STYLING (UPDATED) --- */
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 10px; font-size: 0.95rem; color: var(--app-text-main); }
.form-control { width: 100%; padding: 15px; background-color: var(--app-input-bg); border: 1px solid var(--app-input-border); border-radius: var(--app-radius-card); font-size: 16px; font-family: 'Inter', sans-serif; color: var(--app-text-main); transition: all 0.2s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.form-control:focus { outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15); background-color: #fff; }
textarea.form-control { min-height: 120px; resize: vertical; line-height: 1.5; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; }

/* --- AI FEEDBACK SPECIFIEK --- */
.ai-feedback-page .feedback-footer { padding: 20px; text-align: center; border-top: 1px solid #eee; }
.ai-feedback-page .feedback-footer a.app-button { display: inline-block; width: auto; }
.ai-feedback-page .ai-response { background-color: var(--app-bg-light-gray); border-left: 5px solid var(--app-primary); padding: 20px; border-radius: 8px; }
.ai-feedback-page .error-details { background-color: #f8d7da; border-left: 5px solid #721c24; padding: 15px; border-radius: 8px; font-family: monospace; color: #721c24; }

/* --- SPINNER OVERLAY (DEFINITIEVE FIX) --- */
.spinner-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); z-index: 9999; visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out, visibility 0.2s; }
.spinner-overlay.is-visible { visibility: visible; opacity: 1; }
.spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 8px solid #f3f3f3; border-top: 8px solid var(--app-primary); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }