/* ============================================================
   X5 — skórka wzorowana na układzie CorelDRAW X5 (PL)
   Czysta nakładka na zbudowany bundle SVG-edit 7.4.2.
   Pasek menu / pasek standardowy / przybornik / paleta po prawej
   są dobudowywane przez corel-x5.js.
   ============================================================ */

/* --- zmienne motywu (jasny, "srebrny" wygląd X5) --- */
:root {
  --main-bg-color: #ececec;
  --text-color: #1a1a1a;
  --border-color: #a9a9a9;
  --canvas-bg-color: #ffffff;
  --link-color: #1a66aa;
  --ruler-color: #f5f5f2;
  /* przyciski se-button są odwracane filtrem (ikony bundla są białe),
     więc kolory podajemy "na odwrót": ciemne tło -> po inwersji jasne */
  --icon-bg-color: #131313;
  --icon-bg-color-hover: #56381b;
  --input-color: #ffffff;
  --x5-menu-hover: #cfe3f8;
  --x5-menu-border: #979797;
  --x5-bar-bg: linear-gradient(#fdfdfd, #e8e6e3);
}

/* --- ogólny układ strony: rzędy = pasek tytułu / menu / pasek standardowy / edytor,
       kolumny = edytor + pionowa paleta kolorów po prawej --- */
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  grid-template-columns: 1fr auto;
  height: 100vh;
  overflow: hidden;
  background: var(--main-bg-color);
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
}

#x5_titlebar { grid-row: 1; grid-column: 1 / -1; }
#x5_menubar  { grid-row: 2; grid-column: 1 / -1; }
#x5_toolbar  { grid-row: 3; grid-column: 1 / -1; }
#container   { grid-row: 4; grid-column: 1; min-width: 0; min-height: 0; height: 100% !important; }
#x5_palette  { grid-row: 4; grid-column: 2; }

/* --- pasek tytułu (jak okno aplikacji) --- */
#x5_titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  background: linear-gradient(#5f8fce, #3f6699);
  color: #fff;
  font-size: 12px;
  user-select: none;
}

#x5_titlebar img { width: 16px; height: 16px; }

/* --- pasek menu --- */
#x5_menubar {
  display: flex;
  background: var(--x5-bar-bg);
  border-bottom: 1px solid #c8c6c3;
  font-size: 12px;
  user-select: none;
}

.x5-menu {
  padding: 4px 9px;
  cursor: default;
}

.x5-menu:hover,
.x5-menu.open {
  background: var(--x5-menu-hover);
  outline: 1px solid #7da2ce;
}

/* rozwijane menu i podmenu */
#x5_dropdown,
.x5-submenu {
  position: fixed;
  z-index: 10000;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--x5-menu-border);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
  font-size: 12px;
  padding: 2px;
  user-select: none;
}

.x5-submenu { z-index: 10001; min-width: 210px; }

.x5-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 24px;
  white-space: nowrap;
  cursor: default;
  position: relative;
}

.x5-item:hover { background: var(--x5-menu-hover); }

.x5-item.disabled { color: #9a9a9a; }
.x5-item.disabled:hover { background: transparent; }

.x5-shortcut {
  margin-left: auto;
  padding-left: 24px;
  color: #777;
}

.x5-check {
  position: absolute;
  left: 7px;
}

.x5-subarrow { margin-left: auto; padding-left: 16px; }

.x5-sep {
  border-top: 1px solid #ddd;
  margin: 3px 6px;
}

/* --- pasek standardowy (Nowy/Otwórz/Zapisz/...) --- */
#x5_toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
  background: var(--x5-bar-bg);
  border-bottom: 1px solid #c8c6c3;
}

#x5_toolbar .x5-tb {
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  padding: 2px;
  cursor: pointer;
}

#x5_toolbar .x5-tb:hover {
  background: var(--x5-menu-hover);
  border-color: #7da2ce;
}

#x5_toolbar .x5-tb img {
  width: 100%;
  height: 100%;
  /* ikony bundla są białe — odwracamy na ciemne */
  filter: invert(0.82) hue-rotate(180deg);
}

#x5_toolbar .x5-tb-sep {
  width: 1px;
  height: 22px;
  background: #c4c2bf;
  margin: 0 4px;
}

/* --- pionowa paleta kolorów po prawej (jak w Corelu) --- */
#x5_palette {
  width: 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--main-bg-color);
  border-left: 1px solid #c8c6c3;
  padding: 2px 0;
  scrollbar-width: none;
  user-select: none;
}

#x5_palette::-webkit-scrollbar { width: 0; }

#x5_palette .x5-swatch {
  width: 14px;
  height: 14px;
  margin: 1px auto;
  border: 1px solid #8a8a8a;
  cursor: pointer;
  box-sizing: border-box;
}

#x5_palette .x5-swatch:hover {
  outline: 2px solid #3f6699;
  outline-offset: 0;
}

#x5_palette .x5-swatch.x5-none {
  background:
    linear-gradient(to top right,
      transparent 44%, #d00 46%, #d00 54%, transparent 56%),
    #fff;
}

/* ============================================================
   Przestylowanie wnętrza SVG-edit na jasny wygląd X5
   ============================================================ */

/* ukrywamy hamburger SVG-edit (menu przejęte przez pasek u góry)
   oraz oryginalną poziomą paletę na dole (przeniesiona na prawo) */
#main_button { display: none; }
#palette { display: none; }

/* siatka edytora bez rzędu "main" */
.svg_editor {
  grid-template-rows: minmax(44px, auto) 15px 1fr 40px;
  grid-template-columns: 34px 15px 50px 1fr 15px;
  grid-template-areas:
    "top top top top top"
    "left corner rulerX rulerX side"
    "left rulerY workarea workarea side"
    "left bottom bottom bottom bottom";
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
}

.svg_editor.open {
  grid-template-columns: 34px 15px 50px 1fr 220px;
}

/* pasek właściwości (górny) — jasny */
#tools_top,
#tools_top > * {
  background-color: #f4f3f1;
}

#tools_top {
  border-bottom: 1px solid #c8c6c3;
  min-height: 44px;
}

#title_panel > p {
  color: #444;
  font-weight: normal;
}

/* przybornik po lewej */
#tools_left {
  background: var(--main-bg-color);
  border-right: 1px solid #c8c6c3;
}

/* pasek stanu (dolny) */
#tools_bottom {
  background: var(--x5-bar-bg);
  border-top: 1px solid #c8c6c3;
}

#zoom { background-color: transparent; }

/* obszar roboczy — szare "biurko" wokół białej strony jak w Corelu */
#workarea {
  background-color: #b8b6b3;
  border: 1px solid #9d9b98;
}

/* przyciski narzędzi: bundle ma białe ikony na ciemnych kafelkach —
   inwersja daje jasne kafelki z ciemnymi ikonami (wygląd Corela) */
se-button,
se-flyingbutton {
  filter: invert(0.92) hue-rotate(180deg);
}

/* ścieżka kontekstu (okruszki przy wejściu w grupę) — jasna */
#cur_context_panel {
  background: #f4f3f1;
  color: #333;
  border-bottom: 1px solid #c8c6c3;
}

/* panel boczny (Menedżer obiektów) */
#sidepanel_handle { color: #333; }
#layersLabel { color: #1a1a1a; }

/* separatory w paskach */
.tool_sep { border-left: 1px solid #c4c2bf; }

/* dymki/dropdowny wewnętrzne svg-edit */
.dropdown li { background: #fff; }