.bewind-portal{--bg:#050914;--card:rgba(255,255,255,.04);--border:rgba(255,255,255,.12);--text:#e8eefc;--muted:#b6c3e6;--primary:#6ee7ff;--primary2:#8b5cf6;color:var(--text);}
.bewind-portal__nav{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px;}
.bewind-tab{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--muted); font-weight:600;}
.bewind-tab.is-active{background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(139,92,246,.18)); color:var(--text);}
.bewind-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.bewind-card{border:1px solid var(--border); border-radius:16px; padding:16px; background:var(--card);}
.bewind-card{position:relative;}
.bewind-card__tools{position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:2;}
.bewind-iconbtn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer;}
.bewind-iconbtn{text-decoration:none;}
.bewind-iconbtn:hover{background:rgba(255,255,255,.07);}
.bewind-iconbtn svg{width:18px; height:18px;}

/* Small colored icon buttons for row actions */
.bewind-iconbtn--sm{width:28px; height:28px; border-radius:10px;}
.bewind-iconbtn--sm svg{width:16px; height:16px;}
.bewind-iconbtn--view{border-color:rgba(110,231,255,.35); background:rgba(110,231,255,.14); color:var(--text);}
.bewind-iconbtn--print{border-color:rgba(139,92,246,.35); background:rgba(139,92,246,.16); color:var(--text);}
.bewind-iconbtn--upload{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.16); color:var(--text);}
.bewind-iconbtn--danger{border-color:rgba(239,68,68,.40); background:rgba(239,68,68,.16); color:var(--text);}

.bewind-actionbar{display:flex; gap:6px; justify-content:flex-end; align-items:center; flex-wrap:nowrap;}
.bewind-actionbar form{display:inline; margin:0;}
.bewind-actionbar label{margin:0;}
.bewind-actionbar .bewind-iconbtn{flex:0 0 auto;}

/* Expand view: card becomes full-width within grid */
.bewind-grid{align-items:start;}
.bewind-card.is-expanded{grid-column:1 / -1;}
/* When expanded, allow table cells to wrap instead of ellipsis */
.bewind-card.is-expanded .bewind-table__row > div{white-space:normal; overflow:visible; text-overflow:unset;}
.bewind-field{display:grid; gap:6px; margin-bottom:12px;}
.bewind-field input,.bewind-field select,.bewind-field textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,.12); color:var(--text);}
.bewind-input{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,.22); color:var(--text);}
.bewind-field label{color:var(--muted); font-weight:600; font-size:13px;}
.bewind-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.bewind-row--3{grid-template-columns:1fr 160px 220px;}
@media (max-width: 900px){.bewind-row--3{grid-template-columns:1fr;}}
.bewind-btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:12px; font-weight:700; border:1px solid transparent; background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#061022; cursor:pointer;}
.bewind-btn--secondary{background:rgba(255,255,255,.06); border-color:var(--border); color:var(--text);}
.bewind-muted{color:var(--muted);}
.bewind-actions{display:flex; gap:10px; flex-wrap:wrap;}
.bewind-filters{display:grid; gap:10px;}
.bewind-table{display:grid; gap:8px; margin-top:10px;}
.bewind-table__row{--cols:3;display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:10px; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.10);}
.bewind-table__row[data-cols="2"]{--cols:2;}
.bewind-table__row[data-cols="3"]{--cols:3;}
.bewind-table__row[data-cols="4"]{--cols:4;}
.bewind-table__row[data-cols="5"]{--cols:5;}
.bewind-table__row[data-cols="6"]{--cols:6;}
.bewind-table__row[data-cols="7"]{--cols:7;}
.bewind-table__row[data-cols="8"]{--cols:8;}
.bewind-table__row > div{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bewind-table__head{background:rgba(255,255,255,.04); color:var(--muted); font-weight:700;}
.bewind-portal h2,.bewind-portal h3{color:var(--text);}
.bewind-portal p{color:var(--text);}
.bewind-portal a{color:inherit; text-decoration:underline; text-decoration-color:rgba(110,231,255,.55); text-underline-offset:2px;}
.bewind-portal a:hover{color:inherit; text-decoration-color:rgba(232,238,252,.75);}
.bewind-portal label.bewind-muted{color:var(--muted); font-weight:700;}
.bewind-report-frame{box-shadow:0 12px 40px rgba(0,0,0,.35); background:#fff;}

/* Date input calendar icon (Chrome/Edge) - make it visible on dark background */
.bewind-portal input[type="date"]::-webkit-calendar-picker-indicator{filter: invert(1) brightness(1.2); opacity:.85;}
.bewind-portal input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}

/* Inline alert styling for portal (avoid WP admin notice styles on front-end) */
.bewind-alert{border:1px solid var(--border); border-radius:14px; padding:10px 12px; margin:12px 0; background:rgba(255,255,255,.04);}
.bewind-alert--error{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12);}
.bewind-alert--success{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.12);}
.bewind-alert p{margin:0; color:var(--text); font-weight:700;}

/* Small icon button variant for edit actions */
.bewind-btn--icon{padding:6px 10px; border-radius:10px; font-weight:800; min-width:unset;}
.bewind-btn--icon svg{width:16px; height:16px;}

/* Fix select dropdown colors on dark bg */
.bewind-field select{background-color:rgba(0,0,0,.22); color:var(--text);}
.bewind-field select option{background-color:#0b1220; color:#e8eefc;}

/* Also apply dark dropdown for selects that are not inside .bewind-field (e.g. Reports) */
select.bewind-input{background-color:rgba(0,0,0,.22); color:var(--text);}
select.bewind-input option{background-color:#0b1220; color:#e8eefc;}

/* Small date in transactions table so it doesn't truncate */
.bewind-date{font-size:12px; letter-spacing:.01em;}

/* Compact view for wide tables (e.g. Laatste transacties with many columns) */
.bewind-table__row[data-cols="8"]{
	padding:8px;
	gap:8px;
	font-size:12px;
	grid-template-columns: 84px 90px 130px 1.4fr 1fr 90px 90px 220px;
}
.bewind-table__row[data-cols="9"]{
	padding:8px;
	gap:8px;
	font-size:12px;
	grid-template-columns: 84px 90px 130px 1.4fr 1fr 90px 90px 34px 220px;
}
.bewind-table__row.bewind-table__head[data-cols="9"]{font-size:11px;}
.bewind-table__row.bewind-table__head[data-cols="8"]{font-size:11px;}
@media (max-width: 900px){.bewind-grid{grid-template-columns:1fr;}}