/* Dreamspell NL v2.1.4 — Widget + Kalender + Kalibratie */
/* Base tokens */
.dsc{
  --cell: 46px; --leftcol: 138px;
  --red:#ef4444; --blue:#60a5fa; --yellow:#fde047;
  --core:#2563eb; --today:#059669; --wave:#eab308;
  --dot: 4.6px; --barh: 3.6px; --h-gap: 4px; --v-gap: 6px; --barw: 78%;
}

/* ---- Card widget ---- */
.dsc-card-widget{border:1px solid #e5e7eb; background:#fff; border-radius:16px; padding:18px 18px 14px; box-shadow:0 1px 0 rgba(0,0,0,.02)}
.dsc-card-widget--combined{margin-bottom:14px}
.dsc-card-head{font-size:28px; line-height:1.1; font-weight:700; color:#2b170f; margin-bottom:14px}
.dsc-card-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.dsc-kies{font-weight:600; color:#47352c}
.dsc-date{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#f1f5f9; font-size:15px}
.dsc-today-btn{padding:8px 12px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; cursor:pointer}
.dsc-card-title-line{margin:10px 0 6px}
.dsc-big{font-size:22px; font-weight:800; color:#2b170f}
.dsc-card-desc{color:#6b7280; margin-bottom:10px; font-size:18px}
.dsc-card-tone{margin:6px 0 8px; color:#2b170f}
.dsc-card-tone strong{font-size:20px}
.dsc-tone-desc{ margin-top:4px; font-size:14px; color:#6b7280; }
.chip{display:inline-block; padding:8px 14px; border-radius:12px; border:2px solid #e5e7eb; background:#f8fafc; margin-right:10px; font-size:18px; color:#1f2937}

/* Uitklapper (uitgebreide beschrijving + affirmatie) */
.dsc-more{ margin:6px 0 10px; }
.dsc-more-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; color:#1f2937; }
.dsc-more-icon{ display:inline-block; width:18px; text-align:center; font-weight:900; }
.dsc-more-body{ margin-top:8px; border-left:3px solid #e5e7eb; padding:8px 12px; color:#374151; background:#f9fafb; border-radius:6px; }
.dsc-affirm{ margin-top:10px; font-weight:700; font-size:16px; color:#111; font-style:italic; }

/* ---- Grid ---- */
.dsc-grid-wrap{overflow-x:auto}
.dsc-grid{border-collapse:collapse; margin:12px 0; width:max-content}
.dsc-grid th,.dsc-grid td{border:1px solid #000; padding:0; text-align:center; vertical-align:middle}
.dsc-grid .col-head{width:var(--cell); font-weight:700; font-size:14px; height:calc(var(--cell)*0.9)}
.dsc-grid .leftcol-head{width:var(--leftcol); height:calc(var(--cell)*0.9); font-weight:700; background:#fff}
.dsc-grid .leftcol{width:var(--leftcol); background:#fff; text-align:left; padding:0 8px; white-space:nowrap; display:flex; align-items:center; gap:10px;}
.dsc-grid .color-dot{display:inline-block; width:10px; height:10px; border-radius:2px; border:1px solid #000; margin-right:0; vertical-align:middle}
.dsc-grid .seal-name{font-size:13px; font-weight:700}

.dsc .leftcol .seal-icon{
  width: 44px; height: 44px; object-fit: cover;
  border: 2px solid #000; border-radius: 6px; background:#fff;
}

.dsc-cell{width:var(--cell); position:relative; background:#fff; height:auto; aspect-ratio: 1 / 1;}
.dsc-cell.color-red{background:var(--red)} .dsc-cell.color-blue{background:var(--blue)} .dsc-cell.color-yellow{background:var(--yellow)}
.dsc-cell.is-gap{background:#000; color:#fff}
.dsc-cell .kin-num{position:absolute; left:0; right:0; bottom:8px; font-size:12px; font-weight:700; line-height:1; z-index:5}

/* glyph: dots always above bars; centered */
.dsc-glyph{position:absolute; left:0; right:0; bottom:50%; height:48%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:var(--v-gap); z-index:1}
.dsc-glyph .bars{width:var(--barw); display:flex; flex-direction:column; gap:var(--v-gap)}
.dsc-glyph .bar{width:var(--barw); height:var(--barh); background:#111; border-radius:2px; margin:0 auto}
.dsc-glyph .dots{width:var(--barw); display:flex; justify-content:center; gap:var(--h-gap); margin:0}
.dsc-glyph .dot{width:var(--dot); height:var(--dot); border-radius:50%; background:#111}
.dsc-glyph.on-dark .bar,.dsc-glyph.on-dark .dot{background:#fff}

/* Kerndag = blauw hoekvlag (links-boven) */
.dsc-cell.is-core::before{
  content:''; position:absolute; top:3px; left:3px; width:0; height:0;
  border-top: 16px solid var(--core);
  border-right: 16px solid transparent;
  pointer-events:none;
}

/* Gekozen datum = groen hoekvlag (rechts-boven) */
.dsc-cell.is-selected::after{
  content:''; position:absolute; top:3px; right:3px; width:0; height:0;
  border-top: 16px solid var(--today);
  border-left: 16px solid transparent;
  pointer-events:none;
}
.dsc-cell.is-selected .kin-num{ color: var(--today); font-weight:900; }

/* Wave 1 & 20 golden outline (desktop) */
.dsc-cell.wave{box-shadow: inset 2px 0 0 var(--wave), inset -2px 0 0 var(--wave)}
.dsc-cell.wave.wave-top{box-shadow: inset 2px 0 0 var(--wave), inset -2px 0 0 var(--wave), inset 0 2px 0 var(--wave)}
.dsc-cell.wave.wave-bottom{box-shadow: inset 2px 0 0 var(--wave), inset -2px 0 0 var(--wave), inset 0 -2px 0 var(--wave)}

/* Selected wave outline (green) */
.dsc-cell.selwave{ box-shadow: inset 3px 0 0 var(--today), inset -3px 0 0 var(--today); position:relative; z-index:4 }
.dsc-cell.selwave.sel-top::before{
  content:""; position:absolute; left:3px; right:3px; top:3px; height:0; border-top:3px solid var(--today); z-index:6;
}
.dsc-cell.selwave.sel-bottom::after{
  content:""; position:absolute; left:3px; right:3px; bottom:3px; height:0; border-bottom:3px solid var(--today); z-index:6;
}

/* Legend */
.dsc-legend-spacer{height:calc(var(--cell) * 3); display:flex; align-items:center; justify-content:center; background:#fff}
.dsc-legend{display:flex; gap:48px; align-items:flex-start; justify-content:center}
.dsc-legend-col{display:flex; flex-direction:column; align-items:center; gap:8px}
.dsc-legend-label{font-size:12px; line-height:1.1; text-align:center}
.dsc-icon{width:16px; height:16px; display:block; box-sizing:border-box; border-radius:2px}
.dsc-icon--gap{background:#000; border:0}
.dsc-icon--core{background:transparent; border:0; position:relative}
.dsc-icon--core::after{content:''; position:absolute; top:0; left:0; width:0; height:0; border-top: 12px solid var(--core); border-right: 12px solid transparent;}
.dsc-icon--selected{background:transparent; border:0; position:relative}
.dsc-icon--selected::after{content:''; position:absolute; top:0; right:0; width:0; height:0; border-top: 12px solid var(--today); border-left: 12px solid transparent;}

/* Responsive */
@media (max-width:1024px){
  .dsc{ --cell:38px; --leftcol:118px; --dot:4.2px; --barh:3.2px; --h-gap:3.4px; --v-gap:6px; --barw:74%; }
  .dsc-cell .kin-num{bottom:7px; font-size:11px}
}
@media (max-width:768px){
  .dsc{ --leftcol: clamp(86px,24vw,118px);
        --cell: calc((100vw - var(--leftcol) - 16px)/13);
        --dot:3.9px; --barh:3.0px; --h-gap:3px; --v-gap:5.5px; --barw:70%; }
  .dsc-cell .kin-num{bottom:6px; font-size:10px}
  .chip{font-size:16px}
  .dsc-card-head{font-size:24px}
  .dsc-big{font-size:20px}
  .dsc-card-desc{font-size:16px}
  /* v2.1.2: geen gouden omkadering voor wave 1/20 op mobiel */
  .dsc .dsc-cell.wave, .dsc .dsc-cell.wave.wave-top, .dsc .dsc-cell.wave.wave-bottom{ box-shadow:none !important; }
  /* v2.1.4: kleinere zegeltekst in linkerkolom */
  .dsc .leftcol .seal-name{ font-size:11px; line-height:1.05; }
}

/* --- Compact modus --- */
.dsc.dsc-compact .dsc-grid{ width:100%; }
@media (max-width:1024px){ .dsc.dsc-compact{ --cell: calc((100% - var(--leftcol) - 12px)/13) !important; } }
@media (max-width:768px){ .dsc.dsc-compact{ --leftcol: clamp(86px,24vw,118px); } }
@media (max-width:420px){ .dsc.dsc-compact{ --leftcol: clamp(80px,28vw,110px); } }

/* --- Mobiele vereenvoudiging --- */
@media (max-width: 768px){
  .dsc.dsc-mobile-slim .dsc-glyph{ display:none !important; }                     /* verberg tonen */
  .dsc.dsc-mobile-slim .dsc-cell.is-core::before{ content:none !important; }      /* verberg kerndag-vinkje */
  .dsc.dsc-mobile-slim .dsc-wave-badge{ display:none !important; }                /* verberg golfnummers */
  .dsc.dsc-mobile-slim .dsc-legend-spacer{ display:none !important; }             /* verberg legenda */
  .dsc.dsc-mobile-slim .dsc-cell.is-selected::after{ content:none !important; }   /* verberg groene hoekvlag; nummer blijft groen */
}


/* v2.1.5 — Mobiel: zegeltekst zichtbaar + robuust vierkante cellen */
@media (max-width: 768px){
  .dsc .leftcol { white-space: normal; }                 /* mag afbreken/wrappen */
  .dsc .leftcol .seal-icon{ width:30px; height:30px; }   /* iets kleiner icoon */
  .dsc .leftcol .seal-name{ font-size:12px; line-height:1.15; }
  .dsc{ --leftcol: clamp(92px, 28vw, 132px); }          /* iets bredere linkerkolom */
}
@media (max-width: 420px){
  .dsc{ --leftcol: clamp(96px, 30vw, 140px); }
}

/* Vierkante cellen: padding-hack zodat het overal werkt (ook mobiel) */
.dsc .dsc-cell{
  position: relative;     /* referentie voor absolute content */
  height: auto;           /* hoogte komt van ::before */
}
.dsc .dsc-cell::before{
  content: "";
  display: block;
  padding-bottom: 100%;   /* hoogte = breedte => vierkant */
}
/* Zorg dat de inhoud bovenop ligt */
.dsc .dsc-glyph,
.dsc .dsc-cell .kin-num,
.dsc .dsc-wave-badge{
  position: absolute;
  z-index: 2;
}

/* v2.1.5-custom: verberg golfnummers (alleen nummers weghalen) */
.dsc .dsc-wave-badge{ display:none !important; }

/* v2.1.5-custom: verwijder gele omkadering voor golf 1 & 20 */
.dsc .dsc-cell.wave, .dsc .dsc-cell.wave.wave-top, .dsc .dsc-cell.wave.wave-bottom { box-shadow:none !important; }