/* PenningMeester V1.2.0 Fase 4 — Visual Enhancements */

/* ═══ SIDEBAR ═══ */
.nav-item { position: relative; transition: all 0.2s; border-radius: 8px; }
.nav-item:hover { background: rgba(34,197,94,0.06); }
.nav-item.active { background: rgba(34,197,94,0.1); }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: #22C55E; border-radius: 0 3px 3px 0; }

/* ═══ CARDS ═══ */
.card { transition: transform 0.15s, box-shadow 0.15s; border: 1px solid rgba(26,42,60,0.4); }
.card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.card-glow { border-color: rgba(34,197,94,0.3); box-shadow: 0 0 12px rgba(34,197,94,0.08); }

/* ═══ BUTTONS ═══ */
.btn { position: relative; overflow: hidden; transition: all 0.2s; }
.btn-primary { background: linear-gradient(135deg, #22C55E, #16A34A); color: #000; font-weight: 700; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(34,197,94,0.3); }
.btn-ghost:hover { background: rgba(241,245,249,0.06); }
.btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s; }
.btn:active::after { opacity: 1; transition: opacity 0s; }

/* ═══ INPUTS ═══ */
.form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, input:focus, select:focus {
    border-color: #22C55E !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.1) !important;
    outline: none;
}

/* ═══ PILLS / BADGES ═══ */
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.pill-green { background: rgba(34,197,94,0.12); color: #22C55E; }
.pill-red { background: rgba(239,68,68,0.12); color: #EF4444; }
.pill-blue { background: rgba(59,130,246,0.12); color: #3B82F6; }
.pill-warn { background: rgba(245,158,11,0.12); color: #F59E0B; }

/* ═══ NUTRI SCORE ═══ */
.nutri-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; font-weight: 800; color: #fff; }
.nutri-A { background: #22C55E; }
.nutri-B { background: #84CC16; }
.nutri-C { background: #F59E0B; }
.nutri-D { background: #F97316; }
.nutri-E { background: #EF4444; }

/* ═══ TOGGLE SWITCH ═══ */
.toggle-track { width: 44px; height: 24px; border-radius: 12px; background: #1A2A3C; position: relative; cursor: pointer; transition: background 0.2s; }
.toggle-track.active { background: #22C55E; }
.toggle-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; }
.toggle-track.active .toggle-thumb { transform: translateX(20px); }

/* ═══ SKELETON LOADERS ═══ */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, #111B27 25%, #1A2A3C 50%, #111B27 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-card { height: 80px; margin-bottom: 8px; }
.skeleton-kpi { height: 60px; }

/* ═══ TOAST ═══ */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; }
.toast-item { padding: 12px 16px; background: rgba(17,27,39,0.95); border: 1px solid rgba(26,42,60,0.6); border-radius: 12px; color: #F1F5F9; font-size: 13px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); animation: toastIn 0.3s ease-out; max-width: 360px; }
@keyframes toastIn { from { transform: translateX(100px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═══ PAGE TRANSITIONS ═══ */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-content > * { animation: pageIn 0.3s ease-out; }

/* ═══ STAGGER ANIMATION ═══ */
.stagger > *:nth-child(1) { animation-delay: 0s; }
.stagger > *:nth-child(2) { animation-delay: 0.05s; }
.stagger > *:nth-child(3) { animation-delay: 0.1s; }
.stagger > *:nth-child(4) { animation-delay: 0.15s; }
.stagger > *:nth-child(5) { animation-delay: 0.2s; }
.stagger > *:nth-child(6) { animation-delay: 0.25s; }

/* ═══ MODAL ═══ */
.modal-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-content { animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1); }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══ EMPTY STATE ═══ */
.empty-state { text-align: center; padding: 40px 20px; color: #4B6380; }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-state-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: #94A3B8; }
.empty-state-desc { font-size: 13px; }

/* ═══ PRIVACY BLUR ═══ */
.privacy-blur { filter: blur(6px); user-select: none; pointer-events: none; transition: filter 0.2s; }
.privacy-blur:hover { filter: blur(2px); }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(75,99,128,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(75,99,128,0.5); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 640px) {
    .card { padding: 12px !important; }
    h2 { font-size: 18px !important; }
    .skeleton-kpi { height: 50px; }
}