/* ==================================================================
   MOUNII — Overrides für die Tools (Pixel Studio, Netzplan, md Viewer)
   Wird NACH dem Inline-<style> der Tools geladen und gewinnt daher
   bei gleicher Spezifität. Tokens kommen aus mounii.css.
   ================================================================== */

:root {
  /* alte Variablen der Tools auf das neue System umbiegen */
  --bg: var(--m-bg);
  --bg-darkest: var(--m-bg);
  --bg-dark: var(--m-bg-2);
  --bg-panel: var(--m-surface);
  --bg-hover: var(--m-surface-2);
  --bg-active: #1f232a;
  --surface: var(--m-surface);
  --surface2: var(--m-surface-2);
  --surface3: #1f232a;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-strong: rgba(255, 255, 255, 0.06);
  --border: var(--m-line);
  --border-strong: var(--m-line-strong);
  --text: var(--m-text);
  --text-bright: #ffffff;
  --text-dim: var(--m-muted);
  --text-muted: var(--m-muted);
  --text-faint: var(--m-faint);
  --accent: var(--m-accent);
  --accent-glow: rgba(var(--m-accent-rgb), 0.16);
  --violet: var(--m-accent);
  --fuchsia: var(--m-accent);
  --cyan: var(--m-accent);
  --accent-blue: var(--m-accent);
  --critical: var(--m-err);
  --critical-glow: rgba(255, 90, 95, 0.18);
  --success: var(--m-ok);
  --warning: var(--m-warn);
  --radius: var(--m-radius);
  --sans: var(--m-sans);
  --font-sans: var(--m-sans);
  --mono: var(--m-mono);
  --font-mono: var(--m-mono);
}

html, body {
  background: var(--m-bg) !important;
  font-family: var(--m-sans);
}

/* Aurora & Grain gibt es nicht mehr */
.aurora, .grain { display: none !important; }

/* ---------- Kopfzeile: einheitlich "mounii/tool_" ----------------- */
header, .topbar, #menubar {
  background: rgba(7, 8, 10, 0.86) !important;
  border-bottom: 1px solid var(--m-line) !important;
}
.m-toolmark { font-size: 15px; margin-right: 18px; padding: 6px 2px; }
#menubar .m-toolmark { font-size: 13px; margin-right: 14px; }
.m-toolmark:hover .m-mark-sub { color: var(--m-text); }
.m-toolmark::after { animation: none; }
.m-toolmark:hover::after { animation: m-blink 1.1s steps(1) infinite; }

/* ---------- Buttons ----------------------------------------------- */
.btn-primary, .btn.primary, .btn-accent {
  background: var(--m-accent) !important;
  border-color: var(--m-accent) !important;
  color: var(--m-on-accent) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.btn-primary:hover, .btn.primary:hover, .btn-accent:hover {
  background: var(--m-text) !important;
  border-color: var(--m-text) !important;
}
.btn-primary svg, .btn.primary svg { stroke: currentColor; }

/* Aktive Zustände mit Akzent-Hintergrund → dunkler Text */
.tab-btn.active,
.dep-tag.active,
.tool-btn.active,
.layer-item.active,
.menu-dropdown .dropdown-item:hover {
  color: var(--m-on-accent) !important;
  box-shadow: none !important;
}
.tool-btn.active svg { stroke: var(--m-on-accent) !important; }
.layer-item.active .layer-name, .layer-item.active svg { color: var(--m-on-accent) !important; stroke: currentColor; }
.menu-dropdown .dropdown-item:hover .shortcut { color: rgba(10, 11, 13, 0.6) !important; }

/* md Viewer: Tabs */
.tab.active { color: var(--m-text) !important; }

/* Überschriften ohne Verlaufstext */
.logo-text, .preview h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--m-text) !important;
}

/* Netzplan: Gantt-Balken flach */
.gantt-bar { background: var(--m-accent) !important; color: var(--m-on-accent) !important; box-shadow: none !important; }
.gantt-bar.critical-bar { background: var(--m-err) !important; color: #fff !important; }
.canvas-wrap { background: transparent !important; }
.sidebar { background: rgba(12, 13, 16, 0.9) !important; }

/* Pixel Studio: Arbeitsfläche */
#canvas-area {
  background-color: #050607 !important;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

/* Touch: Zeichen-/Zieh-Flächen nicht scrollen lassen */
#main-canvas, #hueSlider, #colorPickerCanvas, .node { touch-action: none; }

/* ==================================================================
   HANDY-LAYOUTS
   ================================================================== */

/* ---------- md Viewer --------------------------------------------- */
@media (max-width: 768px) {
  header { flex-wrap: wrap; padding: 10px 14px !important; }
  header .header-actions { width: 100%; justify-content: space-between; }
}

/* ---------- Netzplan Editor --------------------------------------- */
@media (max-width: 860px) {
  html, body { overflow: auto !important; }
  .topbar {
    height: auto !important;
    flex-wrap: wrap;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .topbar .tab-group { order: 3; }
  .topbar-actions {
    order: 4;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-actions .btn { flex-shrink: 0; }
  .main { flex-direction: column; height: auto !important; min-height: calc(100vh - 110px); }
  .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 38vh;
    border-right: 0 !important;
    border-bottom: 1px solid var(--m-line);
  }
  .canvas-wrap, .gantt-wrap { min-height: 62vh; }
}

/* ---------- Pixel Studio ------------------------------------------ */
.m-sheet-toggle { display: none; }

@media (max-width: 900px) {
  #app {
    grid-template-rows: 44px auto 1fr 56px !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "menu"
      "options"
      "canvas"
      "toolbar" !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  #menubar { overflow-x: auto; overflow-y: visible; }
  #menubar .menu-item { flex-shrink: 0; }
  /* Dropdowns aus dem scrollenden Menü lösen */
  #menubar .menu-dropdown { position: fixed !important; top: 44px !important; left: 8px !important; right: 8px; max-height: 60vh; overflow-y: auto; }
  #optionsbar { overflow-x: auto; padding: 6px 12px !important; flex-wrap: nowrap; }
  #optionsbar .option-group { flex-shrink: 0; }
  #toolbar {
    flex-direction: row !important;
    overflow-x: auto;
    padding: 0 8px !important;
    border-right: 0 !important;
    border-top: 1px solid var(--m-line);
    justify-content: flex-start !important;
  }
  #toolbar .tool-btn { width: 44px !important; height: 44px !important; flex-shrink: 0; }
  #toolbar .tool-separator { width: 1px !important; height: 24px !important; margin: 0 4px !important; flex-shrink: 0; }
  #statusbar { display: none !important; }

  /* Ebenen & Eigenschaften als ausklappbare Blätter von unten */
  #layers-panel, #props-panel {
    position: fixed !important;
    left: 0; right: 0; bottom: 56px;
    max-height: 62vh;
    z-index: 200;
    border: 0 !important;
    border-top: 1px solid var(--m-line-strong) !important;
    border-radius: 12px 12px 0 0;
    transform: translateY(calc(100% + 80px));
    visibility: hidden;
    transition: transform .35s var(--m-ease), visibility .35s;
    overflow-y: auto !important;
  }
  #layers-panel.m-open, #props-panel.m-open { transform: none; visibility: visible; }
  .m-sheet-toggle {
    display: inline-flex;
    flex-shrink: 0;
    font: 500 11px var(--m-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--m-muted);
    border: 1px solid var(--m-line-strong);
    border-radius: var(--m-radius);
    padding: 6px 10px;
    margin-left: 6px;
  }
  .m-sheet-toggle.on { background: var(--m-accent); color: var(--m-on-accent); border-color: var(--m-accent); }
}