/* Florijn V2.0.8 — New Feature Styles */

/* ═══ COMMAND PALETTE ═══ */
.cmd-overlay{animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cmd-box{animation:slideDown .2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* ═══ SIDEBAR SEARCH ═══ */
.sidebar-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,197,94,0.15)}

/* ═══ MOBILE BOTTOM NAV ═══ */
.mobile-bottom-nav button.active{color:var(--accent)}
@media(min-width:769px){.mobile-bottom-nav{display:none!important}}

/* ═══ SIDEBAR SMOOTH ANIMATION (S28) ═══ */
.sidebar{transition:width .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
.sidebar.collapsed{width:60px!important}
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .sidebar-footer-text,
.sidebar.collapsed .modus-label{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:8px}
.sidebar.collapsed .nav-item .nav-item-icon{margin:0}

/* ═══ POT CARDS ═══ */
.pot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pot-list .card{margin-bottom:8px}

/* ═══ DASHBOARD CHARTS ═══ */
.dash-grid .widget-card svg{border-radius:8px}
.widget-card svg text{font-family:'Manrope',system-ui}
.widget-card svg circle:hover{opacity:1;r:5}
.widget-card svg rect:hover{opacity:1}

/* ═══ FLOW BUILDER ═══ */
.flow-canvas-wrap{position:relative;background:#0A0E14;border-radius:8px;overflow:hidden;min-height:400px}
.flow-node{cursor:grab;transition:filter .15s}
.flow-node:hover{filter:brightness(1.15)}
.flow-port:hover{r:8;fill:var(--accent)!important;transition:r .15s}

/* ═══ STELPOST ENHANCEMENTS ═══ */
.sp-card{border-left:3px solid var(--text4);transition:border-color .2s,box-shadow .2s}
.sp-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.sp-card .progress{position:relative}

/* ═══ TX MODAL ENHANCEMENTS ═══ */
.tx-btw-preview{min-height:18px;transition:opacity .2s}
.tx-date-shortcuts .pill:hover{background:var(--accent)!important;color:#000!important}

/* ═══ KALENDER ENHANCED ═══ */
.kal-week-cell{transition:background .15s}
.kal-week-cell:hover{background:var(--hover)!important}
.kal-year-mini{cursor:pointer}
.kal-year-mini:hover{background:var(--hover)}

/* ═══ ADMIN HEALTH ═══ */
.health-check{transition:transform .1s}
.health-check:hover{transform:scale(1.02)}

/* ═══ HOVER PREVIEW ═══ */
.hover-preview{animation:fadeIn .15s ease;pointer-events:none}

/* ═══ FORM ENHANCEMENTS (TX2) ═══ */
.form-group-stack{display:flex;flex-direction:column;gap:12px}
.form-group-stack .form-label{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:2px}
.form-group-stack .input{font-size:13px}
.form-group-stack .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,197,94,0.1)}

/* ═══ GRID HELPERS ═══ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ═══ REKENING CARDS (R21) ═══ */
.account-card{position:relative;overflow:hidden}
.account-card::before{content:'';position:absolute;top:0;right:0;width:60px;height:60px;border-radius:0 0 0 60px;opacity:0.08}
.account-card[data-bank="ING"]::before{background:#FF6200}
.account-card[data-bank="Rabobank"]::before{background:#003082}
.account-card[data-bank="ABN"]::before{background:#009B38}

/* ═══ STICKY ELEMENTS ═══ */
.sticky-totaal{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--border);padding:8px 12px;z-index:5;backdrop-filter:blur(8px)}

/* ═══ ANIMATION CLASSES ═══ */
.shake{animation:shake .4s ease}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.success-flash{animation:successFlash .6s ease}
@keyframes successFlash{0%{background:var(--accent)18}100%{background:transparent}}
.fade-in{animation:fadeIn .3s ease}
.slide-up{animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ═══ PRINT ENHANCEMENTS ═══ */
@media print{
    .sidebar,.header,.mobile-bottom-nav,.cmd-overlay{display:none!important}
    .main-content{margin:0!important;padding:0!important}
    .card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
    body{background:#fff!important;color:#000!important}
    .progress-fill{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}