/* ==============================================================================
   FOODY HUISSTIJL
   Alle merkkleuren staan hier bovenin. Dit bestand wordt na dashboard.css geladen
   en ook door de aanmeldsite gebruikt. Nieuwe huisstijl = alleen deze waarden aanpassen.
   Kleuren uit het Foody-logo (#3FAFFD). Het logoblauw is te licht voor witte tekst,
   daarom gebruiken knoppen en links een donkerdere tint (#0877C4, contrast 4,7:1 op wit).
   ============================================================================== */

:root {
    --foody-brand: #3faffd;          /* logoblauw: vlakken, iconen, accenten */
    --foody-brand-rgb: 63, 175, 253;
    --foody-primary: #0877c4;        /* knoppen en links (witte tekst leesbaar) */
    --foody-primary-rgb: 8, 119, 196;
    --foody-primary-hover: #075e9c;
    --foody-primary-soft: #eaf6ff;
    --foody-on-primary: #ffffff;
    --foody-accent: #ffc233;
    --foody-accent-soft: #fff6dc;
    --foody-ink: #0e2a47;
    --foody-ink-soft: #4a6178;
    --foody-cream: #f5faff;
    --foody-success: #1f9d63;
    --foody-danger: #d93a2b;

    /* Bestaande dashboard-tokens laten wijzen naar Foody */
    --brand-primary: var(--foody-primary);
    --brand-blue: var(--foody-primary);
    --brand-indigo: var(--foody-primary);
    --font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.theme-dark {
    --foody-primary: #5bbeff;
    --foody-primary-rgb: 91, 190, 255;
    --foody-primary-hover: #84ceff;
    --foody-primary-soft: rgba(63, 175, 253, 0.14);
    --foody-on-primary: #0b1a2b;
    --foody-accent-soft: rgba(255, 194, 51, 0.14);
    --foody-ink: #eef6ff;
    --foody-ink-soft: #b4c6d8;
}

/* ---------- Merk in de zijbalk en kopbalk ---------- */
.brand-icon {
    background: var(--foody-brand);
    color: #ffffff;
    overflow: hidden;
    padding: 0;
}
.brand-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nav-item.active,
body.theme-dark .nav-item.active {
    background: var(--foody-primary-soft);
    color: var(--foody-primary);
    box-shadow: inset 3px 0 0 var(--foody-primary);
}

.role-admin,
.account-badge {
    background: var(--foody-primary-soft);
    color: var(--foody-primary);
    border-color: rgba(var(--foody-primary-rgb), 0.3);
}
body.theme-dark .role-admin {
    background: var(--foody-primary-soft);
    color: var(--foody-primary);
    border-color: rgba(var(--foody-primary-rgb), 0.4);
}
.role-support {
    background: var(--foody-accent-soft);
    color: #8a5a00;
    border: 1px solid rgba(255, 194, 51, 0.5);
}
body.theme-dark .role-support { color: var(--foody-accent); }

.stripe-pulse-dot { background: var(--foody-brand); }
.user-avatar { background: var(--foody-brand) !important; color: #ffffff; }
.sidebar-legal { display: block; margin-top: 0.6rem; font-size: 0.75rem; color: var(--text-muted); text-align: center; }
.sidebar-legal:hover { color: var(--foody-primary); }
.stripe-direct-link { background: var(--foody-primary); }
.stripe-direct-link:hover { background: var(--foody-primary-hover); }
.portal-submit-btn { background: var(--foody-primary); color: var(--foody-on-primary); }
.icon-revenue { background: rgba(var(--foody-primary-rgb), 0.1); color: var(--foody-primary); }

.restaurant-locked-badge {
    background: rgba(var(--foody-primary-rgb), 0.08);
    border-color: rgba(var(--foody-primary-rgb), 0.22);
}
body.theme-dark .restaurant-locked-badge {
    background: rgba(var(--foody-primary-rgb), 0.15);
    border-color: rgba(var(--foody-primary-rgb), 0.35);
}

.search-box-wrapper input:focus,
.clean-select:focus,
.action-status-select:focus,
.portal-field input:focus,
.portal-field select:focus,
.foody-field input:focus,
.foody-field select:focus,
.foody-field textarea:focus {
    border-color: var(--foody-primary);
    box-shadow: 0 0 0 3px rgba(var(--foody-primary-rgb), 0.15);
    outline: none;
}

/* ---------- Nieuwe onderdelen: team, aanmeldingen, betaalstatus, retouren ---------- */
.foody-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: var(--foody-primary);
    color: var(--foody-on-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.foody-btn:hover:not(:disabled) { background: var(--foody-primary-hover); }
.foody-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.foody-btn.secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-card);
}
.foody-btn.secondary:hover:not(:disabled) { background: var(--bg-elevated); }
.foody-btn.danger { background: var(--foody-danger); }
.foody-btn.small { padding: 0.3rem 0.65rem; font-size: 0.78rem; }

.foody-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    align-items: end;
    margin-bottom: 1.25rem;
}
.foody-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.foody-field label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.foody-field input,
.foody-field select,
.foody-field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.875rem;
}
.foody-field textarea { min-height: 70px; resize: vertical; }

.foody-notice {
    display: none;
    margin-bottom: 1rem;
    padding: 0.8rem 1.1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
}
.foody-notice.show { display: block; }
.foody-notice.ok { background: rgba(31, 157, 99, 0.1); color: var(--foody-success); border: 1px solid rgba(31, 157, 99, 0.25); }
.foody-notice.err { background: rgba(217, 58, 43, 0.08); color: var(--foody-danger); border: 1px solid rgba(217, 58, 43, 0.25); }

.foody-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.foody-tag.ok { background: rgba(31, 157, 99, 0.12); color: var(--foody-success); }
.foody-tag.err { background: rgba(217, 58, 43, 0.1); color: var(--foody-danger); }
.foody-tag.warn { background: var(--foody-accent-soft); color: #8a5a00; }
body.theme-dark .foody-tag.warn { color: var(--foody-accent); }
.foody-tag.brand { background: var(--foody-primary-soft); color: var(--foody-primary); }

.foody-issues { margin: 0.35rem 0 0; padding-left: 1rem; font-size: 0.78rem; color: var(--text-secondary); min-width: 280px; max-width: 420px; }
.foody-issues li.fout { color: var(--foody-danger); }

.foody-muted { color: var(--text-muted); font-size: 0.8rem; }
.foody-actions { display: flex; gap: 0.35rem; justify-content: flex-end; flex-wrap: wrap; }

.foody-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.foody-stat {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-surface);
}
.foody-stat strong { display: block; font-size: 1.35rem; color: var(--text-primary); }
.foody-stat span { font-size: 0.78rem; color: var(--text-muted); }

/* Retouren en notities in het bestelvenster */
.foody-refund-box {
    border: 1px solid rgba(var(--foody-primary-rgb), 0.25);
    background: var(--foody-primary-soft);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.foody-refund-box h4 { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--foody-primary); }
.foody-refund-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-card);
    font-size: 0.83rem;
}
.foody-refund-row:last-child { border-bottom: 0; }
.foody-refund-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.75rem; }
.foody-refund-form .full { grid-column: 1 / -1; }
.foody-note {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-card);
    font-size: 0.83rem;
    margin-bottom: 0.45rem;
}
.foody-note small { display: block; color: var(--text-muted); margin-top: 0.2rem; }

@media (max-width: 640px) {
    .foody-refund-form { grid-template-columns: 1fr; }
    .foody-actions { justify-content: flex-start; }
}