/* ===========================================================
   SalSal Bouw — Klantportaal
   Builds on styles-v2.css tokens. Login + client dashboard + admin.
   =========================================================== */

*{ box-sizing: border-box; }
body.portal{
  margin: 0;
  background: #f4f6f5;
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
.pbar{
  position: sticky; top: 0; z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--hair);
  height: 68px;
  display: flex; align-items: center;
}
.pbar__inner{
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex; align-items: center; gap: 18px;
}
.pbar__brand{ display: flex; align-items: center; gap: 14px; }
.pbar__brand img{ height: 30px; width: auto; display: block; }
.pbar__tag{
  font-family: var(--f-sub); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft);
  padding-left: 14px; border-left: 1px solid var(--hair);
}
.pbar__spacer{ flex: 1; }
.pbar__user{ display: flex; align-items: center; gap: 12px; font-size: 14px; }
.pbar__role{
  font-family: var(--f-sub); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.pbar__role--klant{ background: var(--green-soft); color: var(--green-deep); }
.pbar__role--admin{ background: var(--orange-soft); color: var(--orange-deep); }
.pbtn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sub); font-weight: 600; font-size: 14px;
  border: 1px solid var(--hair-strong); background: #fff; color: var(--ink);
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.pbtn:hover{ border-color: var(--ink); }
.pbtn svg{ width: 15px; height: 15px; }
.pbtn--primary{ background: var(--green); border-color: var(--green); color: #fff; }
.pbtn--primary:hover{ background: var(--green-deep); border-color: var(--green-deep); }
.pbtn--orange{ background: var(--orange); border-color: var(--orange); color: #fff; }
.pbtn--orange:hover{ background: var(--orange-deep); border-color: var(--orange-deep); }
.pbtn--ghost{ background: transparent; }
.pbtn--danger{ color: #b4402a; border-color: #e7c6bd; }
.pbtn--danger:hover{ background: #fbeae5; border-color: #b4402a; }
.pbtn--sm{ padding: 7px 13px; font-size: 13px; }
.pbtn[disabled]{ opacity: .5; pointer-events: none; }

/* ---------- Shell ---------- */
.pwrap{ max-width: 1180px; margin: 0 auto; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 32px) 80px; }

/* ---------- Login ---------- */
.login{
  min-height: calc(100vh - 68px);
  display: grid; place-items: center;
  padding: 40px 20px;
}
.login__card{
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
  padding: clamp(28px, 4vw, 44px);
}
.login__logo{ height: 34px; width: auto; margin-bottom: 26px; }
.login h1{
  font-family: var(--f-display); font-weight: 700;
  font-size: 26px; letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 6px;
}
.login__sub{ color: var(--text); font-size: 15px; margin: 0 0 26px; }
.pfield{ display: grid; gap: 7px; margin-bottom: 16px; }
.pfield label{
  font-family: var(--f-sub); font-size: 13px; font-weight: 600;
  letter-spacing: .03em; color: var(--text-soft);
}
.pfield input, .pfield select, .pfield textarea{
  width: 100%; border: 1px solid var(--hair-strong); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 15px; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.pfield input:focus, .pfield select:focus, .pfield textarea:focus{
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft);
}
.pfield textarea{ resize: vertical; min-height: 84px; }
.login__error{
  background: #fbeae5; color: #b4402a; border: 1px solid #e7c6bd;
  border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
  display: none;
}
.login__error.show{ display: block; }
.login__demo{
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--text-soft);
}
.login__demo b{ color: var(--ink-2); }
.login__demo-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.login__chip{
  font-family: var(--f-mono); font-size: 12px;
  background: #f4f6f5; border: 1px solid var(--hair); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; color: var(--ink-2);
  transition: border-color .2s, background .2s;
}
.login__chip:hover{ border-color: var(--green); background: var(--green-soft); }

/* ---------- Page head ---------- */
.phead{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.phead h1{
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.phead__sub{ color: var(--text); font-size: 15px; margin-top: 4px; }
.peyebrow{
  font-family: var(--f-sub); font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--green);
}

/* ---------- Cards / layout ---------- */
.pgrid{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.pcol{ display: grid; gap: 20px; }
.card{
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
}
.card__head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card__title{ font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.card__title svg{ width: 18px; height: 18px; color: var(--green); vertical-align: -3px; margin-right: 8px; }

/* ---------- Project hero (client) ---------- */
.phero{
  position: relative; overflow: hidden;
  border-radius: 20px; color: #fff;
  background: var(--ink);
  padding: clamp(24px, 3vw, 34px);
}
.phero__bg{ position: absolute; inset: 0; z-index: 0; }
.phero__bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.phero::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(14,17,18,.85), rgba(14,17,18,.35)); z-index: 1; }
.phero__in{ position: relative; z-index: 2; }
.phero__type{ font-family: var(--f-sub); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.phero h2{ font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em; color: #fff; margin: 8px 0 6px; }
.phero__addr{ color: rgba(255,255,255,.85); font-size: 15px; }
.phero__statusrow{ display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.pstatus{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  font-family: var(--f-sub); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 999px;
}
.pstatus svg{ width: 15px; height: 15px; }
.phero__pct{ font-family: var(--f-sub); font-size: 14px; color: rgba(255,255,255,.85); }
.phero__bar{ margin-top: 14px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.phero__bar span{ display: block; height: 100%; background: var(--orange); border-radius: 999px; transition: width .6s cubic-bezier(.4,.05,.15,1); }

/* ---------- Phase timeline ---------- */
.phases{ display: grid; gap: 0; }
.phase{
  display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: start;
  padding: 16px 0; position: relative;
}
.phase:not(:last-child)::before{
  content:""; position: absolute; left: 16px; top: 38px; bottom: -16px; width: 2px; background: var(--hair-strong);
}
.phase__dot{
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--hair-strong); color: var(--text-soft); z-index: 1;
  font-family: var(--f-display); font-weight: 700; font-size: 13px;
}
.phase__dot svg{ width: 16px; height: 16px; }
.phase.done .phase__dot{ background: var(--green); border-color: var(--green); color: #fff; }
.phase.done:not(:last-child)::before{ background: var(--green); }
.phase.active .phase__dot{ background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 0 0 6px var(--orange-soft); }
.phase__name{ font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.phase__desc{ font-size: 14px; color: var(--text); margin-top: 2px; }
.phase__tag{ font-family: var(--f-sub); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding-top: 4px; }
.phase.done .phase__tag{ color: var(--green); }
.phase.active .phase__tag{ color: var(--orange-deep); }
.phase.upcoming .phase__tag{ color: var(--text-soft); }

/* ---------- Documents ---------- */
.doclist, .planlist, .feed{ display: grid; gap: 10px; }
.msgform{ display: flex; gap: 10px; margin-bottom: 18px; }
.msgform input{
  flex: 1; min-width: 0;
  border: 1px solid var(--hair-strong); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 15px; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.msgform input:focus{ outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.msgform .pbtn{ flex: 0 0 auto; }
.docrow{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.docrow:hover{ border-color: var(--green); background: var(--green-soft); }
.docrow__ic{
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px;
  background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center;
}
.docrow__ic svg{ width: 20px; height: 20px; }
.docrow__main{ min-width: 0; flex: 1; }
.docrow__name{ font-weight: 600; color: var(--ink); font-size: 14px; word-break: break-word; }
.docrow__meta{ font-size: 12px; color: var(--text-soft); }
.docrow__act{ display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- Photos ---------- */
.pphotos{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pphoto{ position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #e3e6e5; }
.pphoto img{ width: 100%; height: 100%; object-fit: cover; }
.pphoto__del{
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 999px;
  background: rgba(14,17,18,.6); color: #fff; border: none; cursor: pointer; display: grid; place-items: center;
}
.pphoto__del svg{ width: 13px; height: 13px; }

/* ---------- Planning ---------- */
.planrow{ display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.planrow:last-child{ border-bottom: none; }
.plandate{
  flex: 0 0 64px; text-align: center; background: var(--green-soft); color: var(--green-deep);
  border-radius: 10px; padding: 8px 6px; line-height: 1.1;
}
.plandate b{ display: block; font-family: var(--f-display); font-weight: 700; font-size: 20px; }
.plandate span{ font-family: var(--f-sub); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.planrow__main{ flex: 1; }
.planrow__title{ font-weight: 600; color: var(--ink); font-size: 15px; }
.planrow__sub{ font-size: 13px; color: var(--text-soft); }

/* ---------- Feed / messages ---------- */
.msg{ display: grid; gap: 5px; padding: 14px 16px; border-radius: 12px; background: #f4f6f5; }
.msg__top{ display: flex; align-items: center; gap: 10px; }
.msg__who{ font-family: var(--f-sub); font-weight: 600; font-size: 13px; color: var(--ink); }
.msg__when{ font-size: 12px; color: var(--text-soft); }
.msg__body{ font-size: 14px; color: var(--ink-2); }
.msg__avatar{ width: 26px; height: 26px; border-radius: 999px; background: var(--orange); color:#fff; display:grid; place-items:center; font-family: var(--f-display); font-weight:700; font-size: 12px; flex:0 0 26px; }

/* ---------- Admin ---------- */
.admin-grid{ display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.projlist{ display: grid; gap: 8px; }
.projitem{
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px;
  display: grid; gap: 3px; transition: border-color .2s, background .2s;
}
.projitem:hover{ border-color: var(--green); }
.projitem.sel{ border-color: var(--green); background: var(--green-soft); }
.projitem b{ font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.projitem span{ font-size: 13px; color: var(--text-soft); }
.projitem__pct{ font-family: var(--f-mono); font-size: 11px; color: var(--green-deep); }

.adminbox{ display: grid; gap: 20px; }
.fileinput{
  border: 2px dashed var(--hair-strong); border-radius: 14px; padding: 22px; text-align: center;
  color: var(--text-soft); font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s;
}
.fileinput svg{ width: 30px; height: 30px; display: block; margin: 0 auto 8px; }
.fileinput:hover{ border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.fileinput input{ display: none; }
.seg{ display: inline-flex; background: #eef1f0; border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button{
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-family: var(--f-sub); font-weight: 600; font-size: 13px; color: var(--text);
  padding: 7px 13px; border-radius: 999px; transition: background .2s, color .2s;
}
.seg button.on{ background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.prow{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.empty{ color: var(--text-soft); font-size: 14px; padding: 18px; text-align: center; border: 1px dashed var(--hair-strong); border-radius: 12px; }
.toast{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; z-index: 80;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 920px){
  .pgrid{ grid-template-columns: 1fr; }
  .admin-grid{ grid-template-columns: 1fr; }
  .pphotos{ grid-template-columns: repeat(2, 1fr); }
  .prow{ grid-template-columns: 1fr; }
}

/* ---------- Portfolio (website gallery) admin ---------- */
.seg--mode{ margin: 6px 0 22px; }
.pfgrid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pfcard{
  display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  background: #fff; border: 1px solid var(--hair); border-radius: 16px;
  padding: 16px; box-shadow: 0 1px 2px rgba(14,17,18,.04);
}
.pfcard__media{ position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #eef1f0; }
.pfcard__media img{ width: 100%; height: 100%; object-fit: cover; }
.pfcard__upload{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: rgba(14,17,18,.46); color: #fff; opacity: 0; cursor: pointer;
  font-family: var(--f-sub); font-size: 13px; font-weight: 600;
  transition: opacity .2s ease;
}
.pfcard__upload svg{ width: 22px; height: 22px; }
.pfcard__media:hover .pfcard__upload{ opacity: 1; }
.pfcard__upload input{ display: none; }
.pfcard__body{ display: flex; flex-direction: column; }
.pfcard__body .pfield{ margin-bottom: 11px; }
.pfcard__act{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
@media (max-width: 920px){
  .pfgrid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .pfcard{ grid-template-columns: 1fr; }
}

/* portfolio detail editor */
.pfhero{ position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: #eef1f0; }
.pfhero img{ width: 100%; height: 100%; object-fit: cover; }
.pfhero__up{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(14,17,18,.42); color: #fff; opacity: 0; cursor: pointer;
  font-family: var(--f-sub); font-size: 14px; font-weight: 600; transition: opacity .2s ease;
}
.pfhero__up svg{ width: 26px; height: 26px; }
.pfhero:hover .pfhero__up{ opacity: 1; }
.pfhero__up input{ display: none; }