/*
 * OrionDesk theme overlay for the Photo Studio (BitMappery).
 * Injected after the app's own CSS (see Dockerfile) — !important wins over
 * BitMappery's scoped rules without forking it.
 *
 * Goal: a CLEAN, READABLE, Photoshop-style dark studio. Photoshop uses MEDIUM
 * neutral grays (~#323232 panels, #1e1e1e canvas, #e0e0e0 text) — NOT near-black.
 * The earlier pass was too dark and left BitMappery's black-stroke tool icons and
 * the menu text unreadable. This fixes contrast: medium-gray panels, light text,
 * inverted (light) tool icons, and a clean blue selection accent.
 */

:root {
  --od-canvas: #232426;   /* editor backdrop */
  --od-panel:  #313234;   /* panels / toolbox (Photoshop "dark gray") */
  --od-ctl:    #3b3d40;   /* buttons / inputs */
  --od-ctl-hi: #4a4d51;   /* hover */
  --od-line:   #4c4e52;   /* visible-but-subtle hairline */
  --od-line-2: #1f2021;   /* deep divider */
  --od-text:   #e6e7e9;   /* primary text (readable) */
  --od-muted:  #a9adb3;
  --od-accent: #2f7bf0;   /* selection / active */
  --od-accent-soft: rgba(47, 123, 240, 0.22);
  --od-radius: 8px;
}

html, body, #app {
  background: var(--od-canvas) !important;
  color: var(--od-text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* keep general text readable (headings, labels, spans, list items) */
h1, h2, h3, h4, p, span, label, li, td, th, .component, .component * {
  color: var(--od-text);
}
.muted, small, .component__subtitle { color: var(--od-muted) !important; }

/* ── brand: replace BitMappery's header logo with the OrionDesk mark ───────── */
.menu .logo, img.logo {
  content: url("/od-logo.png") !important; /* Chromium/Firefox: swaps the <img> */
  width: 26px !important; height: 26px !important; object-fit: contain !important;
}

/* ── top menu bar (File / Edit / … ) — was blue & unreadable ───────────────── */
.menu, .menu-list, .submenu {
  background: var(--od-panel) !important;
  border-color: var(--od-line-2) !important;
}
.menu-list, .menu-text, .menu a, .menu button, .submenu a, .submenu li {
  color: var(--od-text) !important;
}
.menu-list > li:hover, .submenu li:hover, .menu a:hover {
  background: var(--od-ctl-hi) !important;
  color: #fff !important;
}
.submenu {
  border: 1px solid var(--od-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
}

/* ── panels / windows (toolbox, layers, options, dialogs) ─────────────────── */
.component, .toolbox-wrapper, .component__content,
.options-panel-wrapper, .layer-panel-wrapper {
  background: var(--od-panel) !important;
  background-image: none !important;
  border: 1px solid var(--od-line-2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3) !important;
}

/* the right-hand dock: give it a clear edge so it never blends into the canvas.
   When collapsed BitMappery shrinks it to a thin strip — keep that strip wide
   enough to see + click the "+" that reopens each panel. */
.panels {
  background: var(--od-canvas) !important;
  border-left: 1px solid var(--od-line-2) !important;
}
.panels.collapsed { min-width: 42px !important; }
.options-panel-wrapper, .layer-panel-wrapper { margin: 6px !important; }

/* ── robust 3-column layout ────────────────────────────────────────────────
 * BitMappery sizes the canvas with an inline `width: calc(100% - Npx)` computed
 * in JS from clientWidth (which excludes borders) — so any extra border/margin
 * (or inline-block whitespace) tips the row over 100% and the 320px panels
 * column WRAPS to the bottom. Flexbox with nowrap makes the three columns immune
 * to that pixel math: toolbox + panels keep their width, the canvas flexes to
 * fill the middle. Desktop only (mobile keeps BitMappery's fixed bottom dock). */
@media (min-width: 641px) {
  #app .main { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  #app .main > .toolbox { flex: 0 0 auto !important; }
  #app .main > .document-container { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 8px !important; }
  #app .main > .panels { flex: 0 0 auto !important; }
}
.component__header-button {
  background: var(--od-ctl) !important;
  color: var(--od-text) !important;
  border: 1px solid var(--od-line) !important;
  border-radius: 6px !important;
  min-width: 26px !important; min-height: 26px !important;
}
.component__header-button:hover { background: var(--od-ctl-hi) !important; color: #fff !important; }
.component__header { background: transparent !important; border-bottom: 1px solid var(--od-line) !important; }
.component__title, .component__header h2, .component__header h3 {
  color: var(--od-text) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .01em !important;
}

/* ── tool buttons + ICONS (the unreadable part) ───────────────────────────── */
.tool-button {
  background: var(--od-ctl) !important;
  border: 1px solid var(--od-line) !important;
  border-radius: var(--od-radius) !important;
  transition: background .12s ease, border-color .12s ease, transform .06s ease !important;
}
/* BitMappery's icons are black-stroke SVGs → invert to light so they're visible */
.tool-button img { filter: brightness(0) invert(0.82) !important; opacity: 1 !important; }
.tool-button:hover:not(:disabled) { background: var(--od-ctl-hi) !important; border-color: #5a5d62 !important; transform: translateY(-1px) !important; }
.tool-button:hover:not(:disabled) img { filter: brightness(0) invert(1) !important; }
.tool-button.active { background: var(--od-accent) !important; border-color: var(--od-accent) !important; box-shadow: 0 0 0 3px var(--od-accent-soft) !important; }
.tool-button.active img { filter: brightness(0) invert(1) !important; }
.tool-button:disabled { background: transparent !important; border-color: transparent !important; }
.tool-button:disabled img { filter: brightness(0) invert(0.4) !important; opacity: .5 !important; }

/* ── Layers panel — BitMappery uses teal (active) + PINK (hover); make the rows
 *    clean & readable in the OrionDesk palette ──────────────────────────────── */
.layer { color: var(--od-text) !important; border-bottom: 1px solid var(--od-line-2) !important; }
.layer:hover { background-color: var(--od-ctl-hi) !important; color: var(--od-text) !important; }
.layer--active { background-color: var(--od-accent) !important; color: #fff !important; border-bottom-color: transparent !important; }
.layer--active .layer__name, .layer--selected { color: #fff !important; }
.layer__name, .layer__name-input { color: var(--od-text) !important; }
.layer__thumbnail { border: 1px solid var(--od-line) !important; border-radius: 4px !important; overflow: hidden !important; }
/* layer action icons (mask / eye / settings / trash): the button stays fully
 * transparent (NO bg/border/filter — a filter on the button would recolour its
 * whole box); the colour filter goes on the <img> only, so we get clean icons:
 * light-grey normally, white on the highlighted (active/hover) row. */
.layer__actions, .layer__actions-button { background: transparent !important; border: none !important; box-shadow: none !important; filter: none !important; }
.layer__actions-button img { filter: brightness(0) invert(0.68) !important; }
.layer--active .layer__actions-button img,
.layer:hover .layer__actions-button img,
.layer__actions-button--highlight img { filter: brightness(0) invert(1) !important; }
.layer__actions-button--disabled { opacity: 0.4 !important; }
/* the layer name span + thumbnail are also tooltip triggers → no leaked box
 * (the rename INPUT keeps its field styling, so it isn't listed here) */
.layer__name { background: transparent !important; border: none !important; box-shadow: none !important; }

/* ── Neutralise BitMappery's teal (#0db0bc) / pink (#F44174) app-wide ───────── */
#app h1, #app h3, #app h4, #app h5, #app h6 { color: var(--od-text) !important; }      /* were teal */
#app a:not(.title), #app a:visited:not(.title) { color: var(--od-accent) !important; } /* real links (menu handled above) */
.vue-js-switch.toggled .v-switch-core { background-color: var(--od-accent) !important; } /* toggles were teal */
.button--primary { border: 1px solid var(--od-accent) !important; color: var(--od-text) !important; background: transparent !important; }
.button--primary:hover:not(:disabled) { background: var(--od-accent) !important; color: #fff !important; }
.button--secondary { border: 1px solid var(--od-line) !important; }                     /* was pink outline */
.button:hover:not(:disabled):not(.button--ghost) { background-color: var(--od-accent) !important; border-color: var(--od-accent) !important; color: #fff !important; } /* generic hover was PINK */
.button--ghost:hover:not(:disabled) { background: var(--od-accent-soft) !important; border-radius: 6px !important; }
.component__actions .button { background: var(--od-ctl) !important; border: 1px solid var(--od-line) !important; color: var(--od-text) !important; border-radius: 8px !important; }
.component__actions .button:hover:not(:disabled) { background: var(--od-ctl-hi) !important; }
::selection { background: var(--od-accent-soft) !important; }

/* ── generic controls ─────────────────────────────────────────────────────── */
input, select, textarea {
  background: var(--od-ctl) !important; color: var(--od-text) !important;
  border: 1px solid var(--od-line) !important; border-radius: 7px !important;
}
/* range sliders / checkboxes / radios → accent (were teal) */
input[type="range"], input[type="checkbox"], input[type="radio"], progress { accent-color: var(--od-accent) !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--od-accent) !important; box-shadow: 0 0 0 3px var(--od-accent-soft) !important; }
button:not(.tool-button):not(.component__header-button) { border-radius: 7px !important; color: var(--od-text) !important; }

/* ── color panel ──────────────────────────────────────────────────────────── */
.color-panel { border-top: 1px solid var(--od-line) !important; }
.color-panel__label { color: var(--od-muted) !important; }

/* ── tooltips: style ONLY the floating-vue popup, never the trigger ────────────
 * (the old `[class*="tooltip"]` also matched the trigger class
 * `v-popper--has-tooltip`, painting every tooltip'd button/label with the dark
 * tooltip bg — which the layer active-row invert filter then turned into white
 * blobs. Scope strictly to `.v-popper__inner`.) */
.v-popper--theme-tooltip .v-popper__inner, .v-popper__inner {
  background: #17181a !important; color: #fff !important;
  border: 1px solid var(--od-line) !important; border-radius: 7px !important; font-size: 12px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.45) !important;
}
.v-popper--theme-tooltip .v-popper__arrow-inner { border-color: #17181a !important; }

/* ── thin scrollbars ──────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #55585d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #55585d; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #676a70; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }