/* Viggo Studio — gedeelde visuele basis voor website, accounts en portals. */
:root{
  --vs-ink:#14271f;
  --vs-ink-soft:#20372e;
  --vs-paper:#f7f6f0;
  --vs-surface:#fff;
  --vs-soft:#edf0e7;
  --vs-line:#d7ddd3;
  --vs-line-strong:#aeb9ad;
  --vs-muted:#68766d;
  --vs-lime:#d7ff4f;
  --vs-orange:#ff6534;
  --vs-danger:#9d3028;
  --vs-success:#34724a;
  --vs-radius:5px;
  --vs-shadow:0 18px 48px rgba(20,39,31,.08);
  --vs-focus:0 0 0 3px rgba(52,114,74,.2);
  color-scheme:light;
}

html{scrollbar-color:var(--vs-ink) var(--vs-soft)}
body{background:var(--vs-paper);color:var(--vs-ink);text-rendering:optimizeLegibility}
::selection{background:var(--vs-lime);color:var(--vs-ink)}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--vs-success)!important;
  outline-offset:3px!important;
  box-shadow:var(--vs-focus);
}

:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid var(--vs-line-strong);
  border-radius:var(--vs-radius);
  background-color:var(--vs-surface);
  color:var(--vs-ink);
  font:inherit;
  line-height:1.35;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):hover:not(:disabled){border-color:#7d8d83}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus{border-color:var(--vs-success)}
:where(input,textarea)::placeholder{color:#8a948d;opacity:1}
:where(input,select,textarea):disabled{background:#e9ebe6;color:#737e77;border-color:#d5d9d3;cursor:not-allowed;opacity:1}
textarea{resize:vertical;min-height:118px}

select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:46px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%2314271f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px auto;
}
select:disabled{cursor:not-allowed;background-image:none}
input[type=date],input[type=datetime-local]{cursor:pointer;padding-right:12px}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{width:20px;height:20px;cursor:pointer;opacity:.72}
input[type=checkbox],input[type=radio]{accent-color:var(--vs-success)}

input[type=file]{
  width:100%;
  min-height:52px;
  padding:7px;
  border:1px dashed #8c9a91!important;
  border-radius:var(--vs-radius);
  background:#f7f8f4;
  color:var(--vs-muted);
  cursor:pointer;
}
input[type=file]::file-selector-button{
  min-height:36px;
  margin-right:13px;
  padding:8px 14px;
  border:0;
  border-radius:3px;
  background:var(--vs-ink);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
input[type=file]:hover::file-selector-button{background:var(--vs-lime);color:var(--vs-ink)}

/* Openbare website en login */
.site-header{border-bottom-color:var(--vs-line)}
.button,.primary,.secondary,.btn{border-radius:var(--vs-radius);transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.button:hover,.primary:hover,.secondary:hover,.btn:hover{transform:translateY(-1px)}
.portal-page .entry-panel,.auth-panel{background:var(--vs-paper)}
.portal-page .account-callout{border-left:4px solid var(--vs-lime);border-radius:var(--vs-radius)}
.portal-page .portal-dialog,.auth-box{border-radius:var(--vs-radius)}
.portal-page .portal-dialog{border:1px solid var(--vs-line)}
.auth-box label,.portal-form>label{letter-spacing:.005em}

/* Beheer- en klantenportal */
.manage-page{--ink:var(--vs-ink);--ink2:var(--vs-ink-soft);--paper:var(--vs-paper);--card:#fbfaf6;--line:var(--vs-line);--muted:var(--vs-muted);--lime:var(--vs-lime);--orange:var(--vs-orange);--green:var(--vs-success)}
.manage-page .manage-sidebar{width:auto;background:var(--vs-ink);border-right:1px solid rgba(255,255,255,.08)}
.manage-page .manage-sidebar nav button,.manage-page .manage-sidebar nav .manage-nav-link,.manage-page .manage-logout{border-radius:3px}
.manage-page .manage-sidebar nav button.active{box-shadow:inset 3px 0 var(--vs-lime)}
.manage-page .manage-main{max-width:1240px}
.manage-page .manage-header{padding-bottom:24px;border-bottom:1px solid var(--vs-line)}
.manage-page .manage-account,.manage-page .panel,.manage-page .hero-card,.manage-page dialog{border-radius:var(--vs-radius)}
.manage-page .panel{box-shadow:0 10px 30px rgba(20,39,31,.035)}
.manage-page .hero-card{border-top-color:var(--vs-lime);box-shadow:var(--vs-shadow)}
.manage-page .metric-grid{border-radius:var(--vs-radius);overflow:hidden}
.manage-page .form-grid label,.manage-page .chat-compose label,.manage-page .suite-form label{color:var(--vs-ink)}
.manage-page .form-grid input,.manage-page .form-grid select,.manage-page .form-grid textarea,.manage-page .toolbar input,.manage-page .toolbar select,.manage-page .chat-compose input,.manage-page .chat-compose textarea,.manage-page .suite-form input,.manage-page .suite-form select,.manage-page .suite-form textarea{border-radius:var(--vs-radius)}
.manage-page .file-label{
  padding:18px!important;
  border:1px solid var(--vs-line)!important;
  border-left:4px solid var(--vs-lime)!important;
  border-radius:var(--vs-radius);
  background:var(--vs-soft);
}
.manage-page .file-label>small{color:var(--vs-muted);font-weight:500}
.manage-page .check{min-height:44px;padding:8px 0}
.manage-page .check input{flex:0 0 auto}
.manage-page .primary{background:var(--vs-ink)!important;border-color:var(--vs-ink)!important;color:#fff!important}
.manage-page .primary:hover{background:var(--vs-ink-soft)!important;color:#fff!important}
.manage-page .secondary{background:#fff!important;border-color:var(--vs-line-strong)!important;color:var(--vs-ink)!important}
.manage-page .secondary:hover{background:var(--vs-soft)!important;border-color:var(--vs-ink)!important;color:var(--vs-ink)!important}
.manage-page .manage-main button:not(.primary):not(.secondary):not(.danger-button):not(.compact-select){color:var(--vs-ink)}
.manage-page .payment-future button:not(.primary):not(.secondary),.manage-page .bank-box button:not(.primary):not(.secondary){color:#fff}
.manage-page button:disabled{cursor:not-allowed;opacity:.58}
.manage-page .split-grid{align-items:start}
.client-page .hero-card>div:last-child{min-width:170px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;text-align:right}
.client-page .client-credit{display:block;line-height:.82}
.client-page .client-credit+small{display:block;color:var(--vs-ink);font-weight:750;line-height:1.35}
.manage-page .item-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.manage-page .status,.manage-page .suite-badge{letter-spacing:.025em}
.manage-page .table-wrap{border-radius:var(--vs-radius)}
.manage-page th{background:var(--vs-soft);color:#536159}
.manage-page tbody tr{transition:background .14s ease}
.manage-page tbody tr:hover{background:#f7f8f4}
.manage-page .coming{border-radius:3px}
.manage-page .form-feedback:not(:empty),.manage-page .auth-feedback:not(:empty){padding:10px 12px;border-left:3px solid var(--vs-success);background:#e7f0e5}
.manage-page .form-feedback.error:not(:empty){border-left-color:var(--vs-danger);background:#f5e7e4}

/* Documentmaker */
body.portal-maker-loading,body.portal-maker-ready{--ink:var(--vs-ink);--paper:var(--vs-paper);--lime:var(--vs-lime)}
.topbar{border-bottom:1px solid var(--vs-line)}
.editor fieldset{border-radius:var(--vs-radius)!important;border-color:var(--vs-line)!important;background:#fbfaf6}
.editor label{color:var(--vs-ink)}
.editor input,.editor select,.editor textarea{border-radius:var(--vs-radius)!important}
.doc-switch,.portal-client-picker{border-radius:var(--vs-radius)!important;overflow:hidden}
.doc-tab{transition:background .16s ease,color .16s ease}
.doc-tab.active{box-shadow:inset 0 -3px var(--vs-lime)}
.paper{box-shadow:0 18px 55px rgba(20,39,31,.14)}

@media(max-width:950px){
  .manage-page .manage-header{padding-bottom:18px}
  .manage-page .manage-sidebar{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:620px){
  :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){font-size:16px}
  input[type=file]{display:grid;padding:9px}
  input[type=file]::file-selector-button{margin:0 0 7px;width:100%}
  .client-page .hero-card>div:last-child{min-width:0;align-items:flex-start;text-align:left}
  .manage-page .item-actions{align-items:flex-start;width:100%}
  .manage-page .item-actions .danger-button{width:100%}
}
@media(prefers-reduced-motion:reduce){.button,.primary,.secondary,.btn{transition:none}.button:hover,.primary:hover,.secondary:hover,.btn:hover{transform:none}}