:root{
  --dvb-brown:#362b27;
  --dvb-bg:#fff6eb;
  --dvb-card:#ffffff;
  --dvb-border:rgba(0,0,0,.12);
  --dvb-shadow:0 12px 30px rgba(0,0,0,.07);
  --dvb-orange:#f08e31;
  --dvb-blue:#43a2cd;
  --dvb-red:#ec0000;

  --radius:18px;
  --font: Avenir, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Grid tuning */
  --label-col: 130px;      /* smaller -> voorkomt “net te breed” */
  --day-min:   118px;      /* min breedte dagkolom */
  --gap:       10px;
}

/* =============== Base =============== */
.dvb-portal{
  font-family: var(--font);
  color: var(--dvb-brown);
}

.dvb-portal--app{
  background: var(--dvb-bg);
  padding: 18px 18px 28px;
  border-radius: 22px;

  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.dvb-title{
  font-weight: 900;
  letter-spacing: .5px;
  margin: 0 0 12px;
}

.dvb-title--app{
  font-size: 44px;
  line-height: 1;
  margin-bottom: 18px;
}

/* =============== Cards =============== */
.dvb-weekgrid-card,
.dvb-detail-card{
  background: var(--dvb-card);
  border: 1px solid var(--dvb-border);
  border-radius: var(--radius);
  box-shadow: var(--dvb-shadow);
  padding: 14px;
  width: 100%;
  box-sizing: border-box;
}

.dvb-weekgrid-card{ margin-bottom: 16px; }

/* Alleen scrollen als het echt niet past */
.dvb-weekgrid-card{
  overflow-x: auto;
  overflow-y: visible;
}

/* =============== Header =============== */
.dvb-weekgrid-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dvb-weekgrid-title{
  font-weight: 900;
  font-size: 18px;
}

.dvb-weekgrid-range{
  opacity: .75;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Nav buttons */
.dvb-weekgrid-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex: 1;
}

.dvb-nav{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:var(--dvb-brown);
  font-family: var(--font);
  font-weight:900;
  font-size:13px;
  line-height:1;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .06s ease, border-color .06s ease, box-shadow .06s ease;
  white-space:nowrap;
}

.dvb-nav:hover{
  transform: translateY(-1px);
  border-color: rgba(240,142,49,.45);
  box-shadow: 0 0 0 3px rgba(240,142,49,.12);
}

.dvb-nav:active{ transform: translateY(0); }

.dvb-nav:focus-visible{
  outline:none;
  border-color: rgba(240,142,49,.75);
  box-shadow: 0 0 0 4px rgba(240,142,49,.18);
}

/* =============== Grid =============== */
.dvb-grid{
  display:grid;
  gap: var(--gap);
  align-items: stretch;

  /* 1 labelkolom + 7 dagkolommen */
  grid-template-columns: var(--label-col) repeat(7, minmax(var(--day-min), 1fr));

  /* Belangrijk: geen max-content hier → voorkomt “net te breed” */
  width: 100%;
  box-sizing: border-box;
}

.dvb-corner{ background: transparent; }

.dvb-hcell{
  background: #fff;
  border: 1px solid var(--dvb-border);
  border-radius: 14px;
  padding: 10px 10px 8px;
  text-align:center;
}

.dvb-hcell.is-today{
  border-color: rgba(240,142,49,.65);
  box-shadow: 0 0 0 3px rgba(240,142,49,.12);
  background: rgba(240,142,49,.06);
}

.dvb-hdow{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.dvb-hdate{
  opacity: .75;
  font-weight: 700;
  font-size: 12px;
  margin-top: 4px;
}

.dvb-rowlabel{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 0 6px;
  font-weight: 900;
  font-size: 15px;
  opacity: .9;
}

/* Dag-cellen */
.dvb-cell{
  min-height: 112px;
  background: #fff;
  border: 1px solid var(--dvb-border);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* =============== Event card =============== */
.dvb-ev{
  width:100%;
  text-align:left;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 9px;
  cursor:pointer;
  transition: transform .06s ease, border-color .06s ease, box-shadow .06s ease, background .06s ease;
  overflow: hidden; /* voorkomt text overflow uit kaart */
}

.dvb-ev:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.dvb-ev.is-active{
  border-color: rgba(240,142,49,.85);
  box-shadow: 0 0 0 3px rgba(240,142,49,.14);
}

.dvb-ev.is-now{
  border-color: rgba(67,162,205,.85);
  box-shadow: 0 0 0 3px rgba(67,162,205,.18);
  background: rgba(67,162,205,.07);
}

.dvb-ev.is-full75{
  border-color: rgba(240,142,49,.85);
  box-shadow: 0 0 0 3px rgba(240,142,49,.12);
}

.dvb-ev.is-full95{
  border-color: rgba(236,0,0,.85);
  box-shadow: 0 0 0 3px rgba(236,0,0,.12);
}

.dvb-ev__time{
  font-weight: 900;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 4px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dvb-ev__title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.dvb-ev__loc{
  font-size: 12px;
  opacity: .8;
  margin-top: 3px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dvb-ev__meta{
  margin-top: 6px;
  font-size: 12px;
  opacity: .9;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* =============== Details =============== */
.dvb-detail-card{
  display:block;
  width:100%;
}

.dvb-detail-card h2{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.dvb-detail__inner{ padding-top: 10px; }

.dvb-detail__inner h3{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
}

.dvb-kpis{
  display:flex;
  gap: 12px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

.dvb-kpi{
  min-width: 160px;
  border: 1px solid var(--dvb-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.02);
}

.dvb-kpi__label{
  font-size: 12px;
  opacity: .75;
  font-weight: 800;
}

.dvb-kpi__value{
  font-size: 28px;
  font-weight: 900;
  margin-top: 6px;
}

.dvb-details{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.dvb-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--dvb-border);
  border-radius: 14px;
  background: #fff;
}

.dvb-row__label{
  font-weight: 900;
  opacity: .8;
  font-size: 13px;
}

.dvb-row__value{
  font-size: 13px;
  line-height: 1.35;
}

.dvb-empty{
  padding: 12px;
  border: 1px dashed rgba(0,0,0,.2);
  border-radius: 14px;
  opacity: .8;
}

/* =============== Responsive =============== */
@media (max-width: 900px){
  .dvb-title--app{ font-size: 34px; }

  .dvb-weekgrid-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .dvb-weekgrid-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .dvb-weekgrid-range{
    align-self: flex-end;
  }

  :root{
    --label-col: 110px;
    --day-min: 100px;
  }

  .dvb-row{
    grid-template-columns: 140px 1fr;
  }
}

@media (max-width: 640px){
  /* Stacked mode */
  .dvb-grid{
    grid-template-columns: 1fr;
  }

  .dvb-corner,
  .dvb-rowlabel{
    display:none;
  }

  .dvb-hcell{
    text-align:left;
    display:flex;
    gap: 10px;
    align-items:center;
  }

  .dvb-cell{
    margin-bottom: 10px;
  }
}