/* ggpaintr default app theme.
   Scoped under .ptr-app so embedding ggpaintr as a Shiny module never
   restyles the host page. Accent = cardinal, sampled from the cybird mark.
   All colours/radii are CSS custom properties so a future ptr_options()
   knob is a one-line override. */

.ptr-app {
  --ptr-bg: #fafbfc;
  --ptr-surface: #ffffff;
  --ptr-border: #e7e9ee;
  --ptr-ink: #1f2530;
  --ptr-muted: #6b7280;
  --ptr-accent: #c1372c;
  --ptr-accent-strong: #9a2b22;
  --ptr-accent-weak: rgba(193, 55, 44, 0.13);
  --ptr-accent-line: rgba(193, 55, 44, 0.22);
  --ptr-radius: 10px;
  --ptr-radius-sm: 7px;
  --ptr-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ptr-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.18), 0 2px 8px rgba(16, 24, 40, 0.10);
  --ptr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ptr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  background: var(--ptr-bg);
  color: var(--ptr-ink);
  font-family: var(--ptr-font);
  -webkit-font-smoothing: antialiased;
}

/* The full-viewport backdrop is OPT-IN. Bare `.ptr-app` is just the themed
   scope: a fragment or an embeddable shell (ptr_controls_ui /
   ptr_outputs_ui / ptr_shared_ui / ptr_module_ui / ptr_ui_page) sizes to
   its content, so dropping it into a host column / sidebar never stretches
   that cell floor-to-ceiling. Only the standalone entrypoints (ptr_app /
   ptr_app_grid) add `ptr-app--page`, which paints the full-window canvas.
   Specificity (0,2,0) > bare `.ptr-app` (0,1,0). */
.ptr-app.ptr-app--page {
  min-height: 100vh;
}

/* Nested .ptr-app: the split helpers each self-wrap in `.ptr-app` so the
   bundled stylesheet attaches without host-side scaffolding. When a
   fragment lives inside an outer `.ptr-app` (e.g. a region half composed
   by ptr_app / ptr_module_ui), drop the inner wrap's redundant opaque
   background so it does not repaint the canvas. */
.ptr-app .ptr-app {
  background: transparent;
}

/* ---- header bar (replaces titlePanel) ---- */
.ptr-app__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  margin: -15px -15px 18px;            /* cancel fluidPage container padding */
  background: var(--ptr-surface);
  border-bottom: 1px solid var(--ptr-border);
}
.ptr-app__mark {
  height: 32px;
  width: auto;
  display: block;
}
.ptr-app__title {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ---- sidebar / controls ---- */
.ptr-app .well {
  background: var(--ptr-surface);
  border: 1px solid var(--ptr-border);
  border-radius: var(--ptr-radius);
  box-shadow: var(--ptr-shadow);
  padding: 18px;
}
/* Only the sidebarPanel sticks (it renders as <form class="well">); the
   grid app's shared wellPanel renders as <div class="well"> and must scroll
   normally, otherwise it overlaps the panels below it. */
/* z-index keeps the sidebar's stacking context above the output column, so a
   pickerInput dropdown that opens downward isn't occluded by the plot card
   when the layout stacks vertically (narrow window). */
.ptr-app form.well { position: sticky; top: 16px; z-index: 2; }

/* grid app: the shared-controls panel header */
.ptr-shared-panel { margin-bottom: 22px; }
.ptr-shared-panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ptr-muted);
  font-weight: 650;
  margin: 0 0 12px;
}
.ptr-shared-panel__help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--ptr-border);
  border-radius: 50%;
  color: var(--ptr-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
}
.ptr-shared-panel__help:hover,
.ptr-shared-panel__help:focus-visible {
  color: var(--ptr-ink);
  border-color: var(--ptr-muted);
}
.ptr-shared-panel__help:focus-visible {
  outline: 2px solid var(--ptr-accent-line);
  outline-offset: 1px;
}
.ptr-shared-panel__tip {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  padding: 7px 10px;
  border-radius: var(--ptr-radius-sm);
  background: var(--ptr-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--ptr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.ptr-shared-panel__help:hover .ptr-shared-panel__tip,
.ptr-shared-panel__help:focus .ptr-shared-panel__tip,
.ptr-shared-panel__help:focus-visible .ptr-shared-panel__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ptr-app .control-label,
.ptr-app label { font-size: 13px; font-weight: 550; }
.ptr-app .form-control,
.ptr-app .selectize-input {
  border-radius: var(--ptr-radius-sm);
}

/* primary action ("Update plot" / "Draw all") -- scoped to action buttons
   only so it never bleeds onto pickerInput's .btn-default toggle. */
.ptr-app .btn.action-button {
  background: var(--ptr-accent);
  border-color: var(--ptr-accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--ptr-radius-sm);
}
.ptr-app .btn.action-button:hover,
.ptr-app .btn.action-button:focus,
.ptr-app .btn.action-button:active {
  background: var(--ptr-accent-strong);
  border-color: var(--ptr-accent-strong);
  color: #fff;
}

/* hidden-tabset layer panels: keep the panel content tidy */
.ptr-app .tab-content { margin-top: 6px; }

/* ---- pipeline stage groups (layer Data sub-tab) ----
   Structure + spacing live in ptr_layer_assets() so every app shell
   gets them; here we only refine colours for the polished default app.
   `.ptr-stage-head` carries the include checkbox labelled `verb()`;
   `.ptr-stage-fields` holds that verb's placeholder widgets, indented
   under a left rule. Built in build_pipeline_stage_ui() (paintr-build-ui.R). */
.ptr-app .ptr-stage-fields { border-left-color: var(--ptr-border); }
.ptr-app .ptr-stage-head code {
  font-family: var(--ptr-mono);
  /* Own the weight here (specificity 0,2,1): the badge would otherwise
     inherit from its checkbox label, where ggpaintr's 550 ties Bootstrap's
     .checkbox-label 400 at (0,1,1) and the winner flips with stylesheet
     load order. */
  font-weight: 550;
  font-size: 12.5px;
  color: var(--ptr-accent-strong);
  background: var(--ptr-accent-weak);
  border: 1px solid var(--ptr-accent-line);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ---- output area ---- */
.ptr-output { display: flex; flex-direction: column; gap: 16px; }
/* Sibling-case toggle (custom outputs: plotly/ggiraph/plotOutput). The card
   path's button sits inside .ptr-card__head, not a direct .ptr-output child,
   so it is unaffected by this rule. */
.ptr-output > .ptr-code-toggle { align-self: flex-end; }
.ptr-card {
  background: var(--ptr-surface);
  border: 1px solid var(--ptr-border);
  border-radius: var(--ptr-radius);
  box-shadow: var(--ptr-shadow);
  overflow: hidden;
}
.ptr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ptr-border);
}
.ptr-card__title { margin: 0; font-size: 13px; font-weight: 600; }
.ptr-card__body { padding: 16px; }

.ptr-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--ptr-border);
  background: #fff;
  color: var(--ptr-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  line-height: 0;
}
.ptr-icon-btn:hover {
  color: var(--ptr-accent-strong);
  border-color: var(--ptr-accent);
  background: var(--ptr-accent-weak);
}
.ptr-icon-btn svg { width: 15px; height: 15px; }

/* inline error alert (rendered by ptr_error_ui) */
.ptr-alert {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--ptr-radius-sm);
  font-size: 13.5px;
}
.ptr-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.ptr-alert__detail { white-space: pre-wrap; margin-top: 6px; }

/* ---- draggable code mini-window ---- */
.ptr-code-window {
  display: none;                       /* hidden until the </> icon is clicked */
  position: fixed;
  left: 50%;
  top: 120px;
  width: 460px;
  max-width: 92vw;
  background: var(--ptr-surface);
  border: 1px solid var(--ptr-border);
  border-radius: var(--ptr-radius);
  box-shadow: var(--ptr-shadow-lg);
  z-index: 1080;
  overflow: hidden;
}
.ptr-code-window.ptr-open { display: block; }
.ptr-code-window__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--ptr-border);
  cursor: move;
  user-select: none;
  touch-action: none;
}
.ptr-code-window__title { font-size: 12.5px; font-weight: 600; color: var(--ptr-accent-strong); }
.ptr-code-window__actions { display: flex; gap: 6px; align-items: center; }
.ptr-copy-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ptr-border);
  background: #fff;
  color: var(--ptr-ink);
  cursor: pointer;
}
.ptr-copy-btn:hover { border-color: var(--ptr-accent); color: var(--ptr-accent-strong); }
.ptr-code-window__close {
  font-size: 15px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ptr-muted);
  cursor: pointer;
}
.ptr-code-window__close:hover { background: #f1f3f5; color: var(--ptr-ink); }
.ptr-code-window__body { max-height: 320px; overflow: auto; }
.ptr-code-window__body pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fbfcfd;
  color: #0f172a;
  font-family: var(--ptr-mono);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 14px 16px;
}
