/* ============================================================
   datawatch.cz — vizuální systém pro 3 stylové směry
   Bootstrap 5 = základ, zde přestylováno přes CSS proměnné.
   Komponenty jsou theme-agnostic; barvy řídí .theme-* obal.
   ============================================================ */

/* ---- Typografie ---- */
.mm {
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--font-ui);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* =====================  PALETY SMĚRŮ  ===================== */

/* Směr 1 — Světlý / Fresh */
.theme-light {
  --bg: oklch(0.985 0.004 230);
  --surface: #ffffff;
  --surface-2: oklch(0.975 0.005 230);
  --border: oklch(0.915 0.008 240);
  --border-strong: oklch(0.87 0.01 240);
  --text: oklch(0.27 0.025 255);
  --muted: oklch(0.55 0.02 255);
  --faint: oklch(0.7 0.015 255);
  --accent: oklch(0.62 0.13 195);
  --accent-soft: oklch(0.95 0.04 195);
  --ok: oklch(0.64 0.13 165);
  --warn: oklch(0.72 0.13 75);
  --err: oklch(0.6 0.19 25);
  --topbar: #ffffff;
  --radius: 14px;
  --card-shadow: 0 1px 2px oklch(0.5 0.02 255 / 0.06), 0 4px 14px oklch(0.5 0.02 255 / 0.05);
  --card-border: 1px solid var(--border);
  --grid-fade: oklch(0.97 0.005 230 / 0);
}

/* Směr 2 — Tmavý / Control Room (vivid) */
.theme-dark {
  --bg: oklch(0.19 0.022 264);
  --surface: oklch(0.235 0.026 264);
  --surface-2: oklch(0.27 0.028 264);
  --border: oklch(0.32 0.03 264);
  --border-strong: oklch(0.4 0.035 264);
  --text: oklch(0.96 0.01 255);
  --muted: oklch(0.7 0.02 258);
  --faint: oklch(0.55 0.022 260);
  --accent: oklch(0.78 0.13 205);
  --accent-soft: oklch(0.34 0.06 220);
  --ok: oklch(0.78 0.15 165);
  --warn: oklch(0.82 0.14 80);
  --err: oklch(0.68 0.19 25);
  --topbar: oklch(0.215 0.024 264);
  --radius: 14px;
  --card-shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 18px oklch(0 0 0 / 0.28);
  --card-border: 1px solid var(--border);
  --grid-fade: oklch(0.19 0.022 264 / 0);
}

/* Směr 3 — Tmavý ztlumený / Dusk (minimal, mono accent) */
.theme-dusk {
  --bg: oklch(0.205 0.014 262);
  --surface: oklch(0.245 0.014 262);
  --surface-2: oklch(0.275 0.014 262);
  --border: oklch(0.31 0.014 262);
  --border-strong: oklch(0.38 0.016 262);
  --text: oklch(0.93 0.008 258);
  --muted: oklch(0.63 0.012 260);
  --faint: oklch(0.5 0.012 260);
  --accent: oklch(0.79 0.11 72);
  --accent-soft: oklch(0.33 0.04 72);
  --ok: oklch(0.74 0.09 160);
  --warn: oklch(0.79 0.11 72);
  --err: oklch(0.66 0.16 28);
  --topbar: oklch(0.225 0.014 262);
  --radius: 10px;
  --card-shadow: none;
  --card-border: 1px solid var(--border);
  --grid-fade: oklch(0.205 0.014 262 / 0);
}

/* =====================  TOPBAR  ===================== */
.mm-topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
  padding: 0 28px;
  background: var(--topbar);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.mm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mm-brand .mm-logo {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--accent);
}
.mm-brand .mm-tld { color: var(--faint); font-weight: 500; }
.mm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mm-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.mm-nav a:hover { color: var(--text); background: var(--surface-2); }
.mm-nav a.active { color: var(--accent); background: var(--accent-soft); }
.mm-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.mm-search {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 12px;
  min-width: 200px;
}
.mm-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mm-group-grip svg { width: 12px; height: 16px; }
.mm-card-grip svg { width: 11px; height: 15px; }
.mm-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-mono);
}

/* přepínač světlý / tmavý režim */
.mm-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.mm-toggle-btn {
  width: 30px; height: 28px; border: none; border-radius: 7px;
  background: transparent; color: var(--faint);
  display: grid; place-items: center; cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
}
.mm-toggle-btn svg { width: 16px; height: 16px; }
.mm-toggle-btn:hover { color: var(--text); }
.mm-toggle-btn.on {
  background: var(--accent-soft);
  color: var(--accent);
}

/* =====================  PLOCHA  ===================== */
.mm-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.mm-canvas { padding: 26px 28px 40px; }
.mm-pageheader {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 22px;
}
.mm-pagetitle {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text);
}
.mm-pagesub { font-size: 13px; color: var(--muted); }
.mm-livedot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--ok);
  font-family: var(--font-mono);
  margin-left: auto;
}
.mm-livedot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ok), transparent 80%);
}

/* =====================  PANEL SKUPINY  ===================== */
.mm-group { margin-bottom: 26px; }
.mm-group-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.mm-group-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.mm-group-grip {
  color: var(--faint); cursor: grab; display: flex;
  opacity: 0.6;
}
.mm-group-count {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--faint);
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border);
}
.mm-group-meta {
  font-size: 12px; color: var(--faint);
  font-family: var(--font-mono);
  display: flex; align-items: center; gap: 6px;
}
.mm-group-actions { margin-left: auto; display: flex; gap: 8px; }
.mm-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.mm-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.mm-btn svg { width: 15px; height: 15px; }
.mm-btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.mm-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.mm-btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.mm-btn-accent:hover { filter: brightness(1.06); background: var(--accent); }

/* mřížka karet */
.mm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 14px;
}

/* =====================  KARTA METRIKY  ===================== */
.mm-card {
  position: relative;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 15px 16px 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 148px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.mm-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.mm-card-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.mm-card-grip {
  color: var(--faint); display: flex; cursor: grab;
  opacity: 0; transition: opacity .12s; margin-left: -4px;
}
.mm-card:hover .mm-card-grip { opacity: 0.65; }
.mm-card-label {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: 0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-card-actions { flex: 0 0 auto; margin-left: 6px; display: flex; align-items: center; gap: 4px; }
.mm-eye, .mm-kebab {
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: transparent; color: var(--faint);
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
.mm-eye:hover, .mm-kebab:hover { background: var(--surface-2); color: var(--text); }
.mm-eye svg, .mm-kebab svg { width: 16px; height: 16px; }

.mm-card-value {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono);
  line-height: 1;
}
.mm-card-value .num {
  font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mm-card-value .unit { font-size: 14px; font-weight: 500; color: var(--muted); }
.mm-card-trend {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  margin-top: 7px; display: flex; align-items: center; gap: 5px;
  color: var(--muted);
}
.mm-card-trend.up { color: var(--ok); }
.mm-card-trend.down { color: var(--err); }
.mm-card-trend.flat { color: var(--faint); }

/* sparkline — bleeduje k dolnímu okraji karty */
.mm-spark {
  margin: auto -16px 0;
  height: 44px;
  display: block;
}
.mm-spark svg { display: block; width: 100%; height: 100%; }

/* stavový proužek vlevo */
.mm-card[data-status="warn"] { box-shadow: var(--card-shadow); }
.mm-card-statusbar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.mm-card[data-status="ok"] .mm-card-statusbar { background: transparent; }
.mm-card[data-status="warn"] .mm-card-statusbar { background: var(--warn); }
.mm-card[data-status="err"] .mm-card-statusbar { background: var(--err); }

/* stavová tečka u názvu */
.mm-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
}
.mm-status-dot.ok { background: var(--ok); }
.mm-status-dot.warn { background: var(--warn); }
.mm-status-dot.err { background: var(--err); box-shadow: 0 0 0 3px color-mix(in oklch, var(--err), transparent 82%); }

/* skrytá karta */
.mm-card.hidden-card {
  background: var(--surface-2);
  border-style: dashed;
  opacity: 0.72;
}
.mm-card.hidden-card .mm-card-value .num { color: var(--faint); }
.mm-hidden-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  margin-top: 6px;
}

/* karta-akce (Obnovit dlaždice) */
.mm-card-action {
  align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; min-height: 148px;
  border-style: dashed; color: var(--muted);
  background: var(--surface-2);
}
.mm-card-action:hover { color: var(--accent); border-color: var(--accent); }
.mm-card-action svg { width: 26px; height: 26px; }
.mm-card-action span { font-size: 13px; font-weight: 600; }

/* =====================  PRÁZDNÝ STAV  ===================== */
.mm-empty {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 24px;
}
.mm-empty-art {
  width: 96px; height: 96px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  color: var(--accent);
  margin-bottom: 24px;
}
.mm-empty-art svg { width: 46px; height: 46px; }
.mm-empty h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px;
}
.mm-empty p {
  font-size: 14px; color: var(--muted); max-width: 380px;
  margin: 0 0 24px; line-height: 1.55;
}
.mm-empty .mm-btn-accent { padding: 11px 20px; font-size: 14px; }
.mm-empty-hint {
  margin-top: 20px; font-family: var(--font-mono); font-size: 12px;
  color: var(--faint);
}

/* =====================  INTERAKCE  ===================== */

/* drag & drop stavy */
.mm-card[draggable="true"] { cursor: pointer; }
.mm-card-link:hover { border-color: var(--accent); }
.mm-card.dragging { opacity: 0.4; }
.mm-card.drop-before { box-shadow: -3px 0 0 0 var(--accent), var(--card-shadow); }
.mm-cards.drop-active { outline: 2px dashed color-mix(in oklch, var(--accent), transparent 55%); outline-offset: 4px; border-radius: var(--radius); }

/* spinner u Obnovit */
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-btn.is-busy svg, .mm-card-action.is-busy svg { animation: mm-spin .8s linear infinite; }
.mm-btn.is-busy { pointer-events: none; opacity: 0.8; }

/* kontextové (kebab) menu */
.mm-menu-wrap { position: relative; }
.mm-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 184px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px oklch(0 0 0 / 0.22), 0 0 0 1px var(--border);
}
.mm-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: 8px; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--text); transition: background .12s;
}
.mm-menu button:hover { background: var(--surface-2); }
.mm-menu button svg { width: 15px; height: 15px; color: var(--muted); }
.mm-menu button.danger { color: var(--err); }
.mm-menu button.danger svg { color: var(--err); }
.mm-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

/* přidat skupinu */
.mm-add-group {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 16px; margin-top: 6px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  transition: color .14s, border-color .14s, background .14s;
}
.mm-add-group:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.mm-add-group svg { width: 18px; height: 18px; }

/* prázdná skupina */
.mm-group-empty {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 22px; border: 1.5px dashed var(--border); border-radius: var(--radius);
  color: var(--muted); font-size: 14px;
}
.mm-group-empty .mm-btn { margin-left: auto; }

/* =====================  MODÁL  ===================== */
.mm-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.2 0.02 264 / 0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 64px 20px; overflow-y: auto;
}
.mm-modal {
  width: 100%; max-width: 560px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 24px 70px oklch(0 0 0 / 0.4);
  overflow: hidden;
}
.mm-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 14px;
}
.mm-modal-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text); margin: 0;
}
.mm-modal-head p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.mm-modal-x {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
}
.mm-modal-x:hover { color: var(--text); }
.mm-modal-body { padding: 4px 22px 8px; }
.mm-modal-foot {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border); margin-top: 14px;
}
.mm-modal-foot .mm-spacer { margin-right: auto; font-size: 12px; color: var(--faint); font-family: var(--font-mono); }

/* formulářové prvky */
.mm-field { margin-bottom: 14px; }
.mm-field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.mm-input, .mm-select {
  width: 100%; padding: 10px 12px;
  font-family: var(--font-ui); font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.mm-input:focus, .mm-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 80%);
}
.mm-input.mono { font-family: var(--font-mono); font-size: 13px; }
.mm-row { display: flex; gap: 12px; }
.mm-row > * { flex: 1; }

/* interval presety */
.mm-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-preset {
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  transition: all .12s;
}
.mm-preset:hover { color: var(--text); }
.mm-preset.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* náhled JSON → mapování klíčů */
.mm-preview-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 6px 0 10px;
}
.mm-preview-badge {
  font-family: var(--font-mono); font-size: 11px; color: var(--ok);
  background: color-mix(in oklch, var(--ok), transparent 86%);
  padding: 2px 8px; border-radius: 20px;
}
.mm-keys { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.mm-keyrow {
  display: grid; grid-template-columns: 26px 1fr 92px; gap: 10px; align-items: center;
  padding: 9px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
}
.mm-keyrow.off { opacity: 0.45; }
.mm-keyrow .mm-keyname { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.mm-keyrow .mm-input { padding: 7px 9px; font-size: 13px; background: var(--surface); }
.mm-check {
  width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  display: grid; place-items: center; color: #fff;
}
.mm-check.on { background: var(--accent); border-color: var(--accent); }
.mm-check svg { width: 13px; height: 13px; }

/* =====================  TOASTY  ===================== */
.mm-toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
}
.mm-toast {
  display: flex; align-items: center; gap: 11px;
  min-width: 240px; max-width: 360px;
  padding: 12px 15px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 12px 34px oklch(0 0 0 / 0.28);
  font-size: 13px; font-weight: 500; color: var(--text);
  animation: mm-toast-in .22s ease;
}
@keyframes mm-toast-in { from { opacity: 0; transform: translateY(10px); } }
.mm-toast .mm-toast-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--ok); }
.mm-toast.info .mm-toast-dot { background: var(--accent); }
.mm-toast.warn .mm-toast-dot { background: var(--warn); }