/* =========================================================================
   Toolify – widgets op de startpagina in de huisstijl (sinds V2.4.0)
   Legt de oude widgetstijl (css/style-index.css) gelijk met basis.css:
   rustige kaarten, Lucide-iconen in tegels, dezelfde knoppen en velden.
   Alles hangt onder .widgets-inhoud, zodat de rest van de site niet verandert.
   ========================================================================= */

.widgets-inhoud { --w-gat: 20px; }

/* ---------- opbouw ---------- */
.widgets-inhoud .quick-apps-overview-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 36px; }
.widgets-inhoud .wjd-shortcut-row,
.widgets-inhoud .index-highlights { gap: var(--w-gat); margin-bottom: var(--w-gat); }
.widgets-inhoud .browserstats-section,
.widgets-inhoud .browserhidden-section { margin-bottom: var(--w-gat); }
.widgets-inhoud .browserstats-grid,
.widgets-inhoud .browserhidden-grid { gap: 16px; }

/* ---------- snelkoppelingen bovenaan (zoals de categorie-tegels) ---------- */
.widgets-inhoud .quick-app-tile {
  gap: 10px; padding: 12px; border-radius: var(--r-m);
  background: var(--vlak); border: 1px solid var(--rand); color: var(--tekst); box-shadow: none;
  transition: border-color .15s, background .15s;
}
.widgets-inhoud .quick-app-tile:hover { transform: none; box-shadow: none; background: var(--vlak-2); border-color: color-mix(in srgb, var(--k, var(--merk)) 55%, var(--rand)); }
.widgets-inhoud .quick-app-icon.tegel { flex: none; padding: 0; border: 0; align-self: center; font-size: inherit; }
.widgets-inhoud .quick-app-name {
  flex: 1; padding: 0; opacity: 1; color: var(--tekst);
  font: 600 var(--fs-s)/1.3 var(--font-tekst);
}

/* ---------- tussentitels ("Wist je dat…", "Browser info") zoals .sectie-kop ---------- */
.widgets-inhoud .features-section { text-align: left; margin: 44px 0 18px; padding: 0; }
.widgets-inhoud .features-main-title {
  font: 600 var(--fs-xl)/1.2 var(--font-titel); color: var(--tekst); margin: 0; display: block;
}
.widgets-inhoud .features-main-title::after { content: none; }

/* ---------- widgettitel: tegel + naam ---------- */
.widgets-inhoud .widget-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.widgets-inhoud .highlight-label {
  display: inline; margin: 0; animation: none;
  font: 600 1.05rem/1.3 var(--font-tekst); letter-spacing: 0; text-transform: none; color: var(--tekst);
}

/* ---------- kaarten ---------- */
.widgets-inhoud .index-card,
.widgets-inhoud .tip-of-week,
.widgets-inhoud .featured-tool-card,
.widgets-inhoud .weather-widget-card,
:root.light-mode .widgets-inhoud .index-card,
:root.light-mode .widgets-inhoud .tip-of-week,
:root.light-mode .widgets-inhoud .featured-tool-card,
:root.light-mode .widgets-inhoud .weather-widget-card {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--r-m);
  padding: 22px; box-shadow: var(--schaduw-1);
  transition: border-color .15s, box-shadow .15s;
}
.widgets-inhoud .index-card:hover,
.widgets-inhoud .tip-of-week:hover,
.widgets-inhoud .featured-tool-card:hover,
.widgets-inhoud .weather-widget-card:hover,
:root.light-mode .widgets-inhoud .index-card:hover,
:root.light-mode .widgets-inhoud .tip-of-week:hover,
:root.light-mode .widgets-inhoud .featured-tool-card:hover,
:root.light-mode .widgets-inhoud .weather-widget-card:hover {
  transform: none; background: var(--vlak); border-color: color-mix(in srgb, var(--merk) 35%, var(--rand)); box-shadow: var(--schaduw-2);
}
.widgets-inhoud .pwchecker-section .index-card::before,
.widgets-inhoud .featured-tool-card::before { content: none; }
a.tip-of-week:hover { border-color: color-mix(in srgb, var(--merk) 55%, var(--rand)) !important; }

/* koppen en tekst in de kaarten */
.widgets-inhoud .tip-of-week-heading,
.widgets-inhoud .featured-tool-heading,
:root.light-mode .widgets-inhoud .tip-of-week-heading,
:root.light-mode .widgets-inhoud .featured-tool-heading {
  font: 600 1.05rem/1.35 var(--font-tekst); color: var(--tekst); margin: 0 0 6px;
}
.widgets-inhoud .tip-of-week-text,
.widgets-inhoud .featured-tool-text,
.widgets-inhoud .browserhidden-desc,
.widgets-inhoud .bstat-text,
.widgets-inhoud .sc-desc,
:root.light-mode .widgets-inhoud .tip-of-week-text,
:root.light-mode .widgets-inhoud .featured-tool-text,
:root.light-mode .widgets-inhoud .sc-desc { color: var(--tekst-2); font-size: var(--fs-s); line-height: 1.6; }
.widgets-inhoud .tip-of-week-top,
.widgets-inhoud .featured-tool-top { gap: 14px; }
.widgets-inhoud .featured-tool-heading { padding-right: 0; }

/* grote iconen: tegels i.p.v. emoji met gloed */
.widgets-inhoud .tegel { filter: none; transform: none; margin: 0; font-size: inherit; line-height: 1; }
.widgets-inhoud .tip-of-week:hover .tegel,
.widgets-inhoud .featured-tool-card:hover .tegel,
.widgets-inhoud .index-card:hover .tegel { transform: none; filter: none; }
.widgets-inhoud .bstat-icon.tegel { --k: var(--merk); }
.widgets-inhoud .browserhidden-icon.tegel { --k: var(--merk); }

/* labels/tags */
.widgets-inhoud .tip-of-week-badge,
:root.light-mode .widgets-inhoud .tip-of-week-badge {
  background: var(--merk-zacht); color: var(--merk-tekst); border: 0; padding: 3px 10px; font-size: var(--fs-xs);
}
.widgets-inhoud .tip-of-week-tags span,
.widgets-inhoud .sc-tag,
.widgets-inhoud .browserdetect-chip,
:root.light-mode .widgets-inhoud .tip-of-week-tags span,
:root.light-mode .widgets-inhoud .browserdetect-chip {
  display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  padding: 3px 9px; border-radius: var(--r-rond); border: 0; background: var(--vlak-2); color: var(--tekst-2); margin: 0;
}
.widgets-inhoud .tip-of-week-link,
.widgets-inhoud .pwchecker-link,
:root.light-mode .widgets-inhoud .tip-of-week-link,
:root.light-mode .widgets-inhoud .pwchecker-link { color: var(--merk-tekst); font-size: var(--fs-s); font-weight: 600; }

/* toetsen */
.widgets-inhoud .sc-kbd,
:root.light-mode .widgets-inhoud .sc-kbd,
:root.light-mode .widgets-inhoud .tip-of-week .sc-kbd {
  font: 600 .82rem/1 var(--font-code); padding: 5px 9px; border-radius: 7px;
  background: var(--vlak-2); color: var(--tekst); border: 1px solid var(--rand); border-bottom-width: 2px;
}
.widgets-inhoud .sc-deco-icon { opacity: 1; color: var(--rand); font-size: 0; }
.widgets-inhoud .sc-deco-icon svg.i { width: 72px; height: 72px; stroke-width: 1.4; }
.widgets-inhoud .sc-title { font: 600 1.05rem/1.35 var(--font-tekst); }

/* ---------- invoer ---------- */
.widgets-inhoud .pwchecker-input,
.widgets-inhoud #valuta-from,
.widgets-inhoud #valuta-to,
:root.light-mode .widgets-inhoud .pwchecker-input {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-s);
  border: 1px solid var(--rand); background: var(--bg); color: var(--tekst);
  font: 400 var(--fs-m) var(--font-tekst);
  transition: border-color .15s, box-shadow .15s;
}
.widgets-inhoud textarea.pwchecker-input { padding: 10px 14px; line-height: 1.5; }
.widgets-inhoud #valuta-from, .widgets-inhoud #valuta-to { padding: 0 10px; font-size: var(--fs-s); }
.widgets-inhoud #pwgen-output { font-family: var(--font-code); letter-spacing: .03em; }
.widgets-inhoud .pwchecker-input::placeholder { font-family: var(--font-tekst); font-size: var(--fs-s); color: var(--tekst-3); }
.widgets-inhoud .pwchecker-input:focus,
.widgets-inhoud #valuta-from:focus,
.widgets-inhoud #valuta-to:focus { outline: none; border-color: var(--merk); box-shadow: var(--ring); }
.widgets-inhoud input[type="range"] { accent-color: var(--merk); }

/* ---------- knoppen ---------- */
/* icoonknop naast een veld (kopiëren, wissen, opslaan, omwisselen) */
.widgets-inhoud .pwchecker-toggle,
.widgets-inhoud #valuta-swap-btn,
:root.light-mode .widgets-inhoud .pwchecker-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none;
  border-radius: var(--r-s); border: 1px solid var(--rand); background: var(--vlak-2); color: var(--tekst-2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.widgets-inhoud .pwchecker-toggle:hover,
.widgets-inhoud #valuta-swap-btn:hover { border-color: var(--merk); color: var(--merk-tekst); background: var(--vlak-2); }
.widgets-inhoud .pwchecker-toggle svg.i,
.widgets-inhoud #valuta-swap-btn svg.i { width: 18px; height: 18px; }

/* hoofdknop (zoals .knop.primair) */
.widgets-inhoud #pwgen-btn,
.widgets-inhoud #myip-copy-btn,
.widgets-inhoud .qr-download-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-s);
  background: var(--merk); color: #fff; font: 600 var(--fs-s)/1 var(--font-tekst);
  box-shadow: 0 6px 18px -8px var(--merk); cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s;
}
.widgets-inhoud #pwgen-btn:hover,
.widgets-inhoud #myip-copy-btn:hover,
.widgets-inhoud .qr-download-btn:hover { background: var(--merk-sterk); }
.widgets-inhoud #pwgen-btn:active,
.widgets-inhoud #myip-copy-btn:active { transform: translateY(1px); }
.widgets-inhoud .qr-download-btn svg.i { width: 17px; height: 17px; }
.widgets-inhoud #qr-download-btn { display: none; }   /* JS toont hem zodra er een code is */

/* tweede knop (zoals .knop.tweede) */
.widgets-inhoud .featured-tool-btn,
:root.light-mode .widgets-inhoud .featured-tool-btn {
  height: 42px; padding: 0 16px; border-radius: var(--r-s); font: 600 var(--fs-s)/1 var(--font-tekst);
  background: var(--vlak-2); color: var(--tekst); border: 1px solid var(--rand);
}
.widgets-inhoud .featured-tool-btn:hover,
:root.light-mode .widgets-inhoud .featured-tool-btn:hover { background: var(--vlak-2); border-color: var(--merk); }

/* keuzechips (opties, snelle paren, categorieën, kleurwaarden) */
.widgets-inhoud .pwchecker-check,
.widgets-inhoud .valuta-quick,
.widgets-inhoud .emoji-cat-btn,
:root.light-mode .widgets-inhoud .pwchecker-check,
:root.light-mode .widgets-inhoud .valuta-quick,
:root.light-mode .widgets-inhoud .emoji-cat-btn {
  border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst-2);
  border-radius: var(--r-rond); font: 600 var(--fs-xs)/1.3 var(--font-tekst); padding: 7px 12px;
  transition: border-color .15s, color .15s, background .15s;
}
.widgets-inhoud .valuta-quick,
.widgets-inhoud .emoji-cat-btn,
:root.light-mode .widgets-inhoud .valuta-quick,
:root.light-mode .widgets-inhoud .emoji-cat-btn { border-radius: var(--r-s); padding: 8px 6px; color: var(--tekst); }
.widgets-inhoud .pwchecker-check:hover,
:root.light-mode .widgets-inhoud .pwchecker-check:hover,
.widgets-inhoud .valuta-quick:hover,
.widgets-inhoud .emoji-cat-btn:hover,
:root.light-mode .widgets-inhoud .valuta-quick:hover,
:root.light-mode .widgets-inhoud .emoji-cat-btn:hover { transform: none; border-color: var(--merk); color: var(--merk-tekst); background: var(--vlak); }
.widgets-inhoud .pwchecker-check.ok,
:root.light-mode .widgets-inhoud .pwchecker-check.ok,
.widgets-inhoud .valuta-quick.valuta-active,
.widgets-inhoud .emoji-cat-btn.active,
:root.light-mode .widgets-inhoud .valuta-quick.valuta-active,
:root.light-mode .widgets-inhoud .emoji-cat-btn.active {
  background: var(--merk-zacht); border-color: color-mix(in srgb, var(--merk) 45%, transparent); color: var(--merk-tekst);
}
.widgets-inhoud .emoji-cat-label,
.widgets-inhoud #valuta-quick-label,
.widgets-inhoud #valuta-ref-label {
  text-transform: none; letter-spacing: 0; opacity: 1; color: var(--tekst-2);
  font: 600 var(--fs-xs)/1.3 var(--font-tekst);
}
.widgets-inhoud #emoji-categories { border-top-color: var(--rand); }

/* ---------- meldingen en kleine teksten ---------- */
.widgets-inhoud .pwchecker-feedback,
.widgets-inhoud #textteller-readtime,
.widgets-inhoud #clipboard-hint,
.widgets-inhoud #valuta-status,
.widgets-inhoud #reaction-hint { color: var(--tekst-2); font-size: var(--fs-s); opacity: 1; }
.widgets-inhoud .pwchecker-bar-wrap,
.widgets-inhoud .reaction-bar-track,
:root.light-mode .widgets-inhoud .pwchecker-bar-wrap { background: var(--vlak-2); border: 0; height: 6px; }

/* ---------- tekstteller ---------- */
.widgets-inhoud .textteller-stat,
:root.light-mode .widgets-inhoud .textteller-stat {
  border: 1px solid var(--rand); border-top-width: 1px; border-radius: var(--r-s); background: var(--vlak-2); padding: 12px 6px;
}
.widgets-inhoud .textteller-stat:hover { background: var(--vlak-2); }
.widgets-inhoud .textteller-num { font: 700 1.45rem/1 var(--font-tekst); color: var(--merk-tekst) !important; }
.widgets-inhoud .textteller-lbl { color: var(--tekst-2); font-size: var(--fs-xs); }

/* ---------- klembord ---------- */
.widgets-inhoud .clipboard-item { background: var(--bg); border-color: var(--rand); border-radius: var(--r-s); }
.widgets-inhoud .clipboard-item:hover { background: var(--vlak-2); border-color: var(--merk); }
.widgets-inhoud .clipboard-item.copied { background: var(--ok-zacht); border-color: var(--ok); }
.widgets-inhoud .clipboard-item-text { font-family: var(--font-code); color: var(--tekst); }
.widgets-inhoud .clipboard-del-btn:hover { color: var(--fout); }

/* ---------- QR en kleur ---------- */
.widgets-inhoud .qr-canvas-wrap { border-color: var(--rand); border-radius: var(--r-s); }
.widgets-inhoud #cw-spectrum-wrap { border-radius: var(--r-s); }
.widgets-inhoud #cw-preview { border-radius: var(--r-s); border-color: var(--rand); }
.widgets-inhoud #cw-label { color: var(--tekst-2); opacity: 1; }
.widgets-inhoud #cw-hex { font-family: var(--font-code); }
.widgets-inhoud .cw-values-grid .pwchecker-check { font-family: var(--font-code); font-weight: 500; border-radius: var(--r-s); }

/* ---------- valuta ---------- */
.widgets-inhoud #valuta-result-wrap { background: var(--merk-zacht); border: 0; border-radius: var(--r-s); }
.widgets-inhoud #valuta-result { color: var(--merk-tekst); font-family: var(--font-tekst); }
.widgets-inhoud #valuta-rate-info { color: var(--tekst-2); opacity: 1; }
.widgets-inhoud .valuta-ref-box { background: var(--vlak-2); border: 0; border-radius: var(--r-s); }
.widgets-inhoud #valuta-ref-grid > span { color: var(--tekst-2); opacity: 1; }

/* ---------- IP ---------- */
.widgets-inhoud #myip-address { font: 700 1.5rem/1.2 var(--font-code); color: var(--tekst); }
.widgets-inhoud #myip-meta { color: var(--tekst-2); opacity: 1; }

/* ---------- weer ---------- */
.widgets-inhoud .weather-loading-icon { display: inline-grid; color: var(--tekst-3); font-size: 0; }
.widgets-inhoud .weather-temp,
.widgets-inhoud .weather-day-temp { color: var(--tekst); }
.widgets-inhoud .weather-meta { opacity: 1; color: var(--tekst-2); }
.widgets-inhoud .weather-meta > span { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.widgets-inhoud .weather-meta svg.i { width: 15px; height: 15px; color: var(--tekst-3); }
.widgets-inhoud .weather-forecast-row,
:root.light-mode .widgets-inhoud .weather-forecast-row { border-top-color: var(--rand); }
.widgets-inhoud .weather-day-card,
:root.light-mode .widgets-inhoud .weather-day-card { background: var(--vlak-2); border: 0; border-radius: var(--r-s); }

/* ---------- dag van de week ---------- */
.widgets-inhoud .dayofweek-top { display: flex; align-items: center; gap: 14px; }
.widgets-inhoud #dayofweek-name { font: 700 1.3rem/1.2 var(--font-tekst); color: var(--tekst); }
.widgets-inhoud .browserdetect-tip,
:root.light-mode .widgets-inhoud .browserdetect-tip { color: var(--tekst-2); font-size: var(--fs-s); }

/* ---------- reactietest ---------- */
.widgets-inhoud #reaction-area { border: 1px dashed var(--rand); border-radius: var(--r-s); background: var(--vlak-2); }
.widgets-inhoud #reaction-last { color: var(--merk-tekst); font-family: var(--font-tekst); }
.widgets-inhoud #reaction-best { color: var(--ok); font-family: var(--font-tekst); }
.widgets-inhoud #reaction-bar { background: var(--merk); }
.widgets-inhoud #reaction-lbl-last,
.widgets-inhoud #reaction-lbl-best,
.widgets-inhoud #reaction-rank-msg { color: var(--tekst-2); opacity: 1; }

/* ---------- browserinfo ---------- */
.widgets-inhoud .bstat-card { align-items: flex-start; text-align: left; gap: 10px; padding: 20px; }
.widgets-inhoud .bstat-value,
:root.light-mode .widgets-inhoud .bstat-value { font: 700 1.5rem/1.2 var(--font-tekst); color: var(--tekst); text-shadow: none !important; }
.widgets-inhoud .bstat-text strong,
:root.light-mode .widgets-inhoud .bstat-text strong { color: var(--tekst); }
.widgets-inhoud .browserhidden-card { padding: 20px; gap: 10px; }
.widgets-inhoud .browserhidden-title,
:root.light-mode .widgets-inhoud .browserhidden-title { font: 600 1rem/1.3 var(--font-tekst); color: var(--tekst); }

/* ---------- compatibiliteit (zoals .melding, maar neutraal) ---------- */
.widgets-inhoud .compatibility-note {
  display: block; text-align: left; margin-top: 8px; padding: 14px 16px;
  background: var(--vlak-2); border: 0; border-radius: var(--r-s); box-shadow: none;
}
.widgets-inhoud .compatibility-note p { color: var(--tekst-2); font-size: var(--fs-s); }
.widgets-inhoud .compatibility-note strong { color: var(--tekst); }
.widgets-inhoud .info-icon { filter: none; margin-right: 6px; color: var(--merk-tekst); vertical-align: -3px; }
.widgets-inhoud .info-icon svg.i { width: 17px; height: 17px; }

/* ---------- kolommen mogen smaller worden dan hun inhoud (anders duwt bv. de valuta-widget de pagina breder) ---------- */
.widgets-inhoud .wjd-shortcut-row,
.widgets-inhoud .index-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.widgets-inhoud .wjd-shortcut-row > div,
.widgets-inhoud .index-highlights > div,
.widgets-inhoud .pwchecker-input,
.widgets-inhoud .pwchecker-inner > * { min-width: 0; }
.widgets-inhoud .quick-app-name { overflow-wrap: anywhere; hyphens: auto; }

/* ---------- smal scherm ---------- */
@media (max-width: 768px) {
  .widgets-inhoud .wjd-shortcut-row,
  .widgets-inhoud .index-highlights { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .widgets-inhoud .quick-apps-overview-grid { gap: 8px; }
  .widgets-inhoud .quick-app-tile { padding: 10px; gap: 8px; }
  /* valuta: bedrag op een eigen regel, daaronder van ⇄ naar */
  .widgets-inhoud .valuta-input-row { flex-wrap: wrap; }
  .widgets-inhoud #valuta-amount { flex: 1 1 100%; }
  .widgets-inhoud #valuta-from, .widgets-inhoud #valuta-to { flex: 1 1 0; }
  .widgets-inhoud #valuta-quick-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widgets-inhoud #valuta-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* categorieknoppen (emoji en symbolen) */
  .widgets-inhoud .emoji-cat-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .widgets-inhoud .tip-of-week-footer { flex-wrap: wrap; gap: 10px; }
  .widgets-inhoud .featured-tool-footer .featured-tool-btn { margin-left: 0; }
  .widgets-inhoud .sc-deco-icon { display: none; }
  .widgets-inhoud .cw-values-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .widgets-inhoud .quick-apps-overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .widgets-inhoud .index-card,
  .widgets-inhoud .tip-of-week,
  .widgets-inhoud .featured-tool-card,
  .widgets-inhoud .weather-widget-card { padding: 18px; }
  .widgets-inhoud .quick-app-name { font-size: var(--fs-xs); }
  .widgets-inhoud .tip-of-week-heading { padding-right: 56px; }
}