/* BacksterDESIGN chrome for self-hosted Penpot */

:root {
  /* Match BacksterOS accent — used for text caret + keyboard focus. */
  --keyboard-nav-highlight-color: #ee7a47;
  /*
   * Canvas text selection (Skia imposters / WASM) needs a translucent fill
   * so glyphs stay readable. Form-field ::selection uses the solid accent.
   * Match upstream ~70% alpha so the highlight reads clearly in both themes.
   */
  --da-tertiary-10: rgba(238, 122, 71, 0.1);
  --da-tertiary-70: rgba(238, 122, 71, 0.7);
  --la-tertiary-10: rgba(238, 122, 71, 0.1);
  --la-tertiary-70: rgba(238, 122, 71, 0.7);
  --text-editor-selection-background-color: rgba(238, 122, 71, 0.7);
}

/* .light reassigns the selection token in main.css — keep it orange. */
.light,
body.light {
  --la-tertiary-10: rgba(238, 122, 71, 0.1);
  --la-tertiary-70: rgba(238, 122, 71, 0.7);
  --text-editor-selection-background-color: rgba(238, 122, 71, 0.7);
  --color-accent-background-select: #ee7a47;
}

/* Keep layer / asset DnD working in WebKit (user-select:text ancestors break it). */
[draggable="true"],
[draggable=""] {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: element;
}
/*
 * Orange caret + selectable text in form fields only.
 * Do NOT style [contenteditable] globally — the canvas text editor is
 * contenteditable with transparent glyphs and its own ::selection fill.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
textarea {
  caret-color: var(--keyboard-nav-highlight-color, #ee7a47);
  /* Ancestors use user-select:none; WebKit needs this for a visible highlight. */
  user-select: text;
  -webkit-user-select: text;
}

/*
 * Form-field selection only. A global ::selection paints orange/white over
 * the canvas editor’s transparent text and fights the Skia imposters.
 */
input::selection,
textarea::selection {
  background: var(--keyboard-nav-highlight-color, #ee7a47);
  color: #fff;
}

/*
 * Canvas text editor (text-editor/v2 + render-wasm): glyphs are transparent so
 * the WASM canvas shows through; selection highlight is CSS ::selection fill.
 * (text-editor-wasm/v1 draws selection in Skia and uses opacity:0 on its input.)
 */
[class*="v2_editor"],
[class*="v2_editor"] *,
[class*="text-editor"],
[class*="text-editor"] *,
#text-editor-wasm-input {
  caret-color: var(--text-editor-caret-color, currentColor);
}

[class*="v2_editor"] ::selection,
[class*="v2_editor"]::selection,
[class*="v2_editor"] *::selection,
[class*="text-editor"] ::selection,
[class*="text-editor"]::selection,
[class*="text-editor"] *::selection {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: var(--text-editor-selection-background-color, rgba(238, 122, 71, 0.7)) !important;
}

/* WASM capture surface is opacity:0; keep native selection fully invisible. */
#text-editor-wasm-input::selection,
#text-editor-wasm-input *::selection {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
}

/*
 * Tauri desktop shell: native overlay titlebar + tab strip live above the
 * iframe. Mark the document (app.main.desktop) and tone down browser-ish
 * chrome that would fight the shell.
 */
html[data-tauri-desktop="1"] {
  --bd-tauri-chrome-safe: 0px;
}

html[data-tauri-desktop="1"] body {
  overscroll-behavior: none;
}

/* No redundant top “app chrome” strip when framed by the desktop shell */
html[data-tauri-desktop="1"] .backster-brand {
  display: none !important;
}

/* Workspace logo is a “go dashboard” control — tabs replace it in Tauri. */
html[data-tauri-desktop="1"] [class*="workspace_left_header"][class*="main-icon"],
html[data-tauri-desktop="1"] [class*="left_header__main-icon"] {
  display: none !important;
}

/* Hide Penpot team / organization switchers in the dashboard sidebar */
[class*="sidebar-team-switch"],
[class*="sidebar-organization-switch"],
[class*="organization-team-switch"],
[class*="selected-organization"],
[class*="organizations-container"] {
  display: none !important;
}

/* Legacy sidebar brand inject — hide if an old script still inserts one */
.backster-brand {
  display: none !important;
}

/*
 * Workspace (inside a file) left-header logo.
 * Penpot applies fill:currentColor to this SVG; our mark is stroke/gradient based,
 * so replace the sprite glyph with logo-small.svg.
 */
[class*="workspace_left_header"][class*="main-icon"],
[class*="left_header__main-icon"] {
  background: url("/images/assets/logo-small.svg") center / 20px 20px no-repeat !important;
}

[class*="workspace_left_header"][class*="main-icon"] svg,
[class*="left_header__main-icon"] svg {
  opacity: 0 !important;
}

/* Workspace file header — show file name only (no project name row). */
[class*="workspace_left_header"][class*="project-name"],
[class*="left_header__project-name"] {
  display: none !important;
}