/* ============================================================================
 * MelóPont — Eszköztár (TOOLBOX-01, 2026.10.30) · előtag: mp-tk-
 * Az Eszköztár gyűjtőoldala (/eszkoztar.html) és a kis alkalmazások (/eszkoztar/*.html, js/mp-tools.js).
 * Tokenek: melopont-style.css + css/mp-surfaces.css. A navbar minden span/div/strong elemet globálisan
 * sötétre színez, ezért a színes háttéren lévő szövegek színét itt kifejezetten megadjuk.
 * Kártyák egymás alatt (STACK-01), közük --mp-card-gap (CARD-GAP-01), lekerekítés: css/card-radius.css.
 * ========================================================================== */

.mp-tk-page [hidden] { display: none !important; }
.mp-tk-page { max-width: 760px; margin: 0 auto; padding: var(--mp-page-top) 16px 48px; box-sizing: border-box; }

.mp-tk-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 4px;
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-blue); text-decoration: none;
}
.mp-tk-back span { color: var(--mp-blue); }
.mp-tk-back svg { width: 18px; height: 18px; }
.mp-tk-back:hover span { text-decoration: underline; }

/* ── Gyűjtőoldal ── */
.mp-tk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mp-tk-filter {
  min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--mp-card-border); border-radius: var(--mp-radius-pill);
  background: var(--mp-white); font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-primary); cursor: pointer;
}
.mp-tk-filter:hover { border-color: var(--mp-blue); }
.mp-tk-filter[aria-pressed="true"] { background: var(--mp-blue); border-color: var(--mp-blue); color: var(--mp-white); }

.mp-tk-sec { margin: 0 0 24px; }
.mp-tk-sec[hidden] { display: none; }
.mp-tk-sec-h { margin: 0 0 10px; font-size: calc(18px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-muted); }
.mp-tk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mp-card-gap, 12px); }

.mp-tk-tile {
  display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 76px; box-sizing: border-box;
  background: var(--mp-white); border: 1px solid var(--mp-card-border); box-shadow: var(--mp-card-shadow);
  text-decoration: none; color: inherit;
}
a.mp-tk-tile:hover { border-color: var(--mp-blue); }
a.mp-tk-tile:focus-visible { outline: 3px solid var(--mp-blue-light); outline-offset: 2px; }
.mp-tk-tile.is-soon { background: var(--mp-surface-2, #F6F8FB); box-shadow: none; }
.mp-tk-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: calc(52px * var(--mp-fs, 1)); height: calc(52px * var(--mp-fs, 1)); border-radius: 14px;
  background: var(--mp-tint-worker); border: 1px solid var(--mp-tint-worker-line);
}
.mp-tk-ic svg { width: 26px; height: 26px; color: var(--mp-blue); }
.mp-tk-ic.is-company { background: var(--mp-tint-company); border-color: var(--mp-tint-company-line); }
.mp-tk-ic.is-company svg { color: var(--mp-green); }
.mp-tk-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.mp-tk-name { font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.3; color: var(--mp-text-primary); overflow-wrap: anywhere; }
.mp-tk-desc { font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-muted); }
.mp-tk-go { flex: 0 0 auto; width: 22px; height: 22px; color: var(--mp-blue); }
.mp-tk-soon {
  flex: 0 0 auto; padding: 4px 10px; border-radius: var(--mp-radius-pill);
  background: var(--mp-st-wait-bg); border: 1px solid var(--mp-st-wait-line);
  font-size: calc(13px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-st-wait-ink); white-space: nowrap;
}

.mp-tk-feature {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; margin: 0 0 24px;
  background: var(--mp-tint-worker); border: 1px solid var(--mp-tint-worker-line); text-decoration: none;
}
.mp-tk-feature .mp-tk-ic { background: var(--mp-blue); border-color: var(--mp-blue); }
.mp-tk-feature .mp-tk-ic svg { color: var(--mp-white); }
.mp-tk-feature-top { display: flex; align-items: center; gap: 14px; }
.mp-tk-new { font-size: calc(13px * var(--mp-fs, 1)); font-weight: 800; letter-spacing: 0.04em; color: var(--mp-blue); }
.mp-tk-feature .mp-tk-name { font-size: calc(20px * var(--mp-fs, 1)); }
.mp-tk-feature p { margin: 0; font-size: calc(16px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); }

/* ── Kis alkalmazás oldala ── */
.mp-tk-card {
  background: var(--mp-white); border: 1px solid var(--mp-card-border); box-shadow: var(--mp-card-shadow);
  padding: 20px; margin: 0 0 var(--mp-card-gap, 16px);
}
.mp-tk-title { margin: 0 0 14px; font-size: calc(20px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.3; color: var(--mp-text-primary); }
.mp-tk-form { display: flex; flex-direction: column; gap: 18px; }
.mp-tk-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.mp-tk-label { display: block; margin: 0 0 8px; padding: 0; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); }
.mp-tk-opt { font-weight: 500; color: var(--mp-text-muted); }
.mp-tk-hint { margin: 8px 0 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted); }
.mp-tk-form input[type="text"], .mp-tk-form input[type="number"], .mp-tk-form input[type="date"], .mp-tk-form select {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--mp-input-border); border-radius: 12px; background: var(--mp-white);
  font: inherit; font-size: calc(17px * var(--mp-fs, 1)); color: var(--mp-text-primary);
}
.mp-tk-form input:hover, .mp-tk-form select:hover { border-color: var(--mp-input-border-hover); }
.mp-tk-form input:focus, .mp-tk-form select:focus { outline: none; border-color: var(--mp-blue); box-shadow: 0 0 0 3px var(--mp-blue-light); }
.mp-tk-amount { position: relative; display: flex; align-items: center; }
.mp-tk-amount input { padding-right: calc(76px * var(--mp-fs, 1)) !important; }
.mp-tk-suf { position: absolute; right: 14px; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-muted); pointer-events: none; }
.mp-tk-stack { display: flex; flex-direction: column; gap: 18px; }   /* FIELD-GAP-01: a csoportba zárt mezők között is a form hézaga */
.mp-tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 600px) { .mp-tk-grid { grid-template-columns: minmax(0, 1fr); } }   /* INPUT-STACK-01 */

.mp-tk-checks { display: flex; flex-direction: column; gap: 2px; }
.mp-tk-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.mp-tk-check input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--mp-blue); }
.mp-tk-check span { font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-primary); }
.mp-tk-check small { display: block; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }

.mp-tk-seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mp-tk-seg label { position: relative; display: block; cursor: pointer; }
.mp-tk-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mp-tk-seg span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 10px;
  border: 1.5px solid var(--mp-card-border); border-radius: 12px; background: var(--mp-white);
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; line-height: 1.25; color: var(--mp-text-primary);
}
.mp-tk-seg label:hover span { border-color: var(--mp-blue); }
.mp-tk-seg input:focus-visible + span { outline: 3px solid var(--mp-blue-light); outline-offset: 2px; }
.mp-tk-seg input:checked + span { background: var(--mp-blue); border-color: var(--mp-blue); color: var(--mp-white); }

.mp-tk-hours { display: flex; flex-direction: column; gap: 12px; }
.mp-tk-hour { display: grid; grid-template-columns: minmax(0, 1fr) calc(120px * var(--mp-fs, 1)); gap: 12px; align-items: center; }
.mp-tk-hour .mp-tk-label { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); }
.mp-tk-hour small { display: block; margin-top: 2px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 500; line-height: 1.4; color: var(--mp-text-muted); }
@media (max-width: 420px) { .mp-tk-hour { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

.mp-tk-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--mp-red-light); font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-red-dark); }
.mp-tk-err[hidden] { display: none; }

.mp-tk-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 52px; padding: 12px 22px; border: 0; border-radius: var(--mp-radius-pill); cursor: pointer;
  background: var(--mp-blue); font: inherit; font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-white);
}
.mp-tk-submit span, .mp-tk-submit svg { color: var(--mp-white); }
.mp-tk-submit:hover { background: var(--mp-blue-hover); }

/* ── Eredmény ── */
.mp-tk-result { scroll-margin-top: 72px; }
.mp-tk-result[hidden] { display: none; }
.mp-tk-big {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  margin: 0 0 16px; padding: 20px 16px; border-radius: 14px;
  background: var(--mp-st-ok-bg); border: 1px solid var(--mp-st-ok-line);
}
.mp-tk-big-k { font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-st-ok-ink); }
.mp-tk-big-v { font-size: calc(36px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.15; color: var(--mp-st-ok-ink); overflow-wrap: anywhere; }
.mp-tk-big-n { font-size: calc(15px * var(--mp-fs, 1)); color: var(--mp-st-ok-ink); }
.mp-tk-big.is-info { background: var(--mp-st-info-bg); border-color: var(--mp-st-info-line); }
.mp-tk-big.is-info .mp-tk-big-k, .mp-tk-big.is-info .mp-tk-big-v, .mp-tk-big.is-info .mp-tk-big-n { color: var(--mp-st-info-ink); }

.mp-tk-rows { list-style: none; margin: 0; padding: 0; }
.mp-tk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mp-line-2, #E4E8EE); }
.mp-tk-row:last-child { border-bottom: 0; }
.mp-tk-row-k { font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.4; color: var(--mp-text-primary); min-width: 0; }
.mp-tk-row-k small { display: block; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.mp-tk-row-v { flex: 0 0 auto; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); white-space: nowrap; }
.mp-tk-row.is-sum .mp-tk-row-k, .mp-tk-row.is-sum .mp-tk-row-v { font-weight: 800; font-size: calc(17px * var(--mp-fs, 1)); }
.mp-tk-row.is-plus .mp-tk-row-v { color: var(--mp-st-ok-ink); }

.mp-tk-h3 { margin: 18px 0 8px; font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); }
.mp-tk-p { margin: 0 0 10px; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.55; color: var(--mp-text-primary); }
.mp-tk-p:last-child { margin-bottom: 0; }

.mp-tk-cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mp-card-gap, 12px); }
.mp-tk-cmp-col { padding: 16px; border-radius: 14px; border: 1px solid var(--mp-card-border); background: var(--mp-surface-2, #F6F8FB); }
.mp-tk-cmp-col.is-win { background: var(--mp-st-ok-bg); border-color: var(--mp-st-ok-line); }
.mp-tk-cmp-col h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: calc(18px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-primary); }
.mp-tk-win { padding: 4px 10px; border-radius: var(--mp-radius-pill); background: var(--mp-st-ok-bar); font-size: calc(13px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-white); white-space: nowrap; }

/* Tájékoztató sáv (a számolás jellege, forrás) */
.mp-tk-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--mp-card-gap, 16px); padding: 14px 16px;
  border-radius: 14px; background: var(--mp-tint-warm); border: 1px solid var(--mp-tint-warm-line);
}
.mp-tk-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--mp-orange-text); }
.mp-tk-note p, .mp-tk-note span { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); }
.mp-tk-private { background: var(--mp-green-light); border-color: var(--mp-tint-company-line); }
.mp-tk-private svg { color: var(--mp-green-dark); }
.mp-tk-private p, .mp-tk-private span { color: var(--mp-green-dark); }

.mp-tk-more { display: flex; flex-direction: column; gap: 10px; }
.mp-tk-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 18px;
  border-radius: var(--mp-radius-pill); border: 1.5px solid var(--mp-blue); background: var(--mp-white);
  font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-blue); text-decoration: none; text-align: center;
}
.mp-tk-btn span { color: var(--mp-blue); }
.mp-tk-btn:hover { background: var(--mp-blue-light); }
.mp-tk-btn.is-primary { background: var(--mp-blue); color: var(--mp-white); }
.mp-tk-btn.is-primary span { color: var(--mp-white); }
.mp-tk-btn.is-primary:hover { background: var(--mp-blue-hover); }
.mp-tk-src { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted); }