/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Card header vertical padding.
 *
 * Metronic's .kt-card-header relies on min-height + vertical centering for its
 * top/bottom spacing and only sets padding-inline. When the header content wraps
 * to a second row on narrow screens (action buttons, date nav, template chips),
 * it exceeds the min-height and the content ends up flush against the top/bottom
 * edges. Add real padding-block so a wrapped header keeps its vertical spacing.
 * Single-row headers are unchanged (content + padding still fits the min-height).
 *
 * Re-declare the canonical Metronic/Tailwind layer order first (including the
 * `properties` layer) so this override lands in the components layer (below
 * utilities), letting explicit py-* utilities on individual headers still win.
 * application.css loads before styles.css, so omitting `properties` here would
 * push Metronic's later `@layer properties` after `utilities` and let its
 * universal --tw-* defaults zero out transforms/shadows/rings app-wide. Matches
 * the pattern in calendar_page.css.
 */
@layer properties;
@layer theme, base, components, utilities;
@layer components {
  .kt-card-header {
    padding-block: 1rem;
  }
}

.event-assignment-row {
  scroll-margin-top: 7rem;
  transition: background-color 3.5s ease;
}

.event-assignment-row.assignment-row-highlight {
  background-color: color-mix(in oklab, var(--primary) 14%, var(--background));
  transition-duration: 150ms;
}

.assignment-picker-body {
  overflow: hidden;
}

[data-assignment-workspace-chevron].hidden {
  display: none !important;
}

.assignment-publication-review-grid {
  grid-template-columns: minmax(0, 1fr);
}

.assignment-publication-review-grid > * {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* The event edit form opens inside a scrollable event-show modal. Its KTSelect
   dropdown is body-attached to avoid modal scrollbars, so cap this menu to fit
   inside the modal viewport even when the field is near the lower edge. */
.kt-select-dropdown.event-type-select-dropdown {
  max-height: min(22rem, calc(100dvh - 14rem));
}

.event-overview-red-cross-reparent,
.event-overview-participants-reparent {
  --kt-reparent-mode: append;
}

.event-overview-red-cross-reparent {
  --kt-reparent-target: #event_show_mobile_before_details;
}

.event-overview-participants-reparent {
  --kt-reparent-target: #event_show_mobile_after_details;
}

@media (min-width: 80rem) {
  .assignment-publication-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .event-overview-red-cross-reparent {
    --kt-reparent-target: #event_show_sidebar_red_cross_slot;
  }

  .event-overview-participants-reparent {
    --kt-reparent-target: #event_show_sidebar_participants_slot;
  }
}

/* =========================================================================
 * Help section (docs/help/*.md rendered by Help::Renderer)
 * Styling is hand-rolled and references Metronic's CSS variables so light and
 * dark mode track automatically. No Tailwind typography plugin is used.
 * ========================================================================= */

/* --- Search results: highlight matched query tokens (theme-aware) --- */
.help-search-results mark {
  background: color-mix(in oklab, var(--primary) 22%, transparent);
  color: inherit;
  border-radius: 0.25rem;
  padding: 0 0.15em;
}

/* --- Three-column layout: guide nav | article | on-this-page --- */
.help-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.help-aside,
.help-onthispage {
  display: none;
}

@media (min-width: 1024px) {
  .help-layout {
    grid-template-columns: 240px minmax(0, 1fr) 200px;
  }

  .help-aside,
  .help-onthispage {
    display: block;
  }
}

.help-sticky {
  position: sticky;
  top: calc(var(--header-height, 70px) + 1.25rem);
  max-height: calc(100vh - var(--header-height, 70px) - 2.5rem);
  overflow-y: auto;
}

/* --- Left guide navigation --- */
.help-nav-link {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--foreground);
  text-decoration: none;
}

.help-nav-link:hover {
  background: var(--secondary);
  color: var(--primary);
}

.help-nav-link--active {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 600;
}

/* --- On this page (scrollspy) --- */
.help-toc-link {
  display: block;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--secondary-foreground);
  border-inline-start: 2px solid var(--border);
  text-decoration: none;
}

.help-toc-link--l3 {
  padding-inline-start: 1.5rem;
  font-size: 0.78rem;
}

.help-toc-link:hover {
  color: var(--primary);
}

.help-toc-link--active {
  color: var(--primary);
  font-weight: 600;
  border-inline-start-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 7%, transparent);
}

/* --- Rendered article body --- */
.help-prose {
  color: var(--foreground);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.help-prose > :first-child {
  margin-top: 0;
}

.help-prose h2,
.help-prose h3,
.help-prose h4 {
  color: var(--mono);
  font-weight: 600;
  scroll-margin-top: calc(var(--header-height, 70px) + 1.5rem);
}

.help-prose h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.help-prose h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.5rem;
}

.help-prose h3 {
  font-size: 1.125rem;
  margin: 1.75rem 0 0.5rem;
}

.help-prose h4 {
  font-size: 1rem;
  margin: 1.25rem 0 0.4rem;
}

.help-prose p {
  margin: 0.85rem 0;
}

.help-prose a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.help-prose a:hover {
  opacity: 0.85;
}

.help-prose strong {
  color: var(--mono);
  font-weight: 600;
}

.help-prose ul,
.help-prose ol {
  margin: 0.85rem 0;
  padding-inline-start: 1.5rem;
}

.help-prose ul {
  list-style: disc;
}

.help-prose ol {
  list-style: decimal;
}

.help-prose li {
  margin: 0.35rem 0;
}

.help-prose li::marker {
  color: var(--muted-foreground);
}

.help-prose code {
  background: var(--secondary);
  color: var(--mono);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}

.help-prose pre {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.help-prose pre code {
  background: transparent;
  padding: 0;
}

.help-prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

.help-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9em;
}

.help-prose th,
.help-prose td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

.help-prose thead th {
  background: var(--secondary);
  color: var(--mono);
  font-weight: 600;
}

.help-prose blockquote:not(.help-callout) {
  border-inline-start: 3px solid var(--border);
  padding-inline-start: 1rem;
  margin: 1rem 0;
  color: var(--secondary-foreground);
}

/* Screenshots */
.help-prose .help-screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* --- Lightbox (help_lightbox_controller.js) ---
 * The overlay backdrop is deliberately dark in both themes (standard lightbox
 * convention), so the elements sitting on it use fixed light-on-dark colors
 * rather than theme variables.
 * The zoomable affordance is unscoped (the class is only ever added by the
 * controller) so the lightbox can be reused outside help articles, e.g. the
 * dashboard Getting Started photo example. */
.help-screenshot--zoomable {
  cursor: zoom-in;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-screenshot--zoomable:hover,
.help-screenshot--zoomable:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
  outline: none;
}

.help-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
  animation: help-lightbox-in 0.15s ease-out;
}

@keyframes help-lightbox-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.help-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}

.help-lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  background: var(--background); /* transparent PNGs stay readable */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  user-select: none;
  transform-origin: 0 0;
  transition: transform 0.25s ease;
}

/* Click-to-zoom (mouse devices, image larger than its fitted size) */
.help-lightbox__image--zoomable {
  cursor: zoom-in;
}

.help-lightbox--zoomed .help-lightbox__image {
  cursor: grab;
  will-change: transform;
}

.help-lightbox--zoomed .help-lightbox__image--dragging {
  cursor: grabbing;
}

.help-lightbox__image--dragging {
  transition: none;
}

.help-lightbox__caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  max-width: 60ch;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.help-lightbox--zoomed .help-lightbox__caption {
  opacity: 0;
  visibility: hidden;
}

.help-lightbox__close {
  position: absolute;
  z-index: 1; /* stays above the image when it's zoomed past the viewport */
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; /* 44px tap target */
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

.help-lightbox__close:hover,
.help-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.25);
}

/* --- Callouts (blockquotes starting with a marker emoji) --- */
.help-callout {
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start-width: 3px;
  border-radius: 0.5rem;
  background: var(--secondary);
}

.help-callout > :first-child {
  margin-top: 0;
}

.help-callout > :last-child {
  margin-bottom: 0;
}

.help-callout--screenshot {
  border-style: dashed;
  border-inline-start-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 6%, var(--background));
}

.help-callout--note {
  border-inline-start-color: var(--primary);
}

.help-callout--tip {
  border-inline-start-color: #16a34a;
  background: color-mix(in oklab, #16a34a 8%, var(--background));
}

.help-callout--caution {
  border-inline-start-color: #d97706;
  background: color-mix(in oklab, #d97706 9%, var(--background));
}

/* Print-only source line (title + URL), appended to the article body.
 * Hidden on screen; revealed by the @media print block below. */
.help-print-meta {
  display: none;
}

/* =========================================================================
 * Print / "Save as PDF" for Help articles (Tier 1 of issue #197)
 *
 * Every rule is scoped to `body:has(.help-layout)` so it only affects the
 * /help/:id article page, never other printed views. Printing yields a clean,
 * single-column document — title, summary, and full body — with no app chrome
 * (sidebar/header/footer), no guide nav, and no "On this page" TOC.
 *
 * Forced light: dark mode is keyed by `.dark` on <html>. Re-declaring the
 * semantic theme variables on <body> wins for the whole help subtree (a
 * descendant override beats the inherited `.dark` values), so output is correct
 * whether the app is in light or dark mode. The Tailwind color tokens
 * (--color-zinc-*, etc.) are theme-independent, so reusing them is safe.
 *
 * The fixed sidebar/header offsets are removed by zeroing the Metronic input
 * variables (--sidebar-width / --header-height) rather than fighting its layered
 * !important padding rules: a normal, unlayered custom-property declaration on
 * <body> outranks the `.demo1` definition in the `components` layer, so those
 * rules simply resolve to 0 (see the "CSS layer override for Metronic" note).
 * ========================================================================= */
@media print {
  /* Force the light theme for the printed article regardless of dark mode, and
   * collapse the fixed shell's reserved space by zeroing its layout variables. */
  body:has(.help-layout) {
    color-scheme: light;
    background: #fff !important;
    --sidebar-width: 0px;
    --header-height: 0px;
    --background: var(--color-white);
    --foreground: var(--color-zinc-950);
    --card: var(--color-white);
    --primary: var(--color-blue-600);
    --secondary: var(--color-zinc-100);
    --secondary-foreground: var(--color-zinc-900);
    --muted-foreground: var(--color-zinc-600);
    --mono: var(--color-zinc-950);
    --border: var(--color-zinc-300);
  }

  /* Drop the global app shell: sidebar, top bar, footer, and the back button. */
  body:has(.help-layout) #sidebar,
  body:has(.help-layout) .kt-sidebar,
  body:has(.help-layout) #header,
  body:has(.help-layout) .kt-header,
  body:has(.help-layout) .kt-footer,
  body:has(.help-layout) .help-print-hide {
    display: none !important;
  }

  body:has(.help-layout) main#content {
    padding-top: 0 !important;
    overflow: visible !important;
  }

  /* Use the full printable width; @page supplies the page margin. */
  body:has(.help-layout) .kt-container-fixed {
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* Hide the guide nav + "On this page" TOC and collapse to a single column. */
  body:has(.help-layout) .help-aside,
  body:has(.help-layout) .help-onthispage {
    display: none !important;
  }

  body:has(.help-layout) .help-layout {
    display: block !important;
  }

  /* Article card → plain, full-width, borderless document. */
  body:has(.help-layout) .help-article {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body:has(.help-layout) .help-article .kt-card-content {
    padding: 0 !important;
  }

  /* Print the article body's own backgrounds (code, tables, callouts) as
   * designed rather than letting the browser strip them to save ink. */
  body:has(.help-layout) .help-prose {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body:has(.help-layout) .help-prose p {
    orphans: 3;
    widows: 3;
  }

  /* Keep framed screenshots whole and on a single page. */
  body:has(.help-layout) .help-prose .help-screenshot {
    break-inside: avoid;
    box-shadow: none !important;
    max-height: 8.5in;
  }

  /* Keep callouts, tables, code blocks, and quotes from splitting mid-block.
   * The colored left accent and the leading emoji marker carry meaning in
   * grayscale, so callouts stay legible even when backgrounds are dropped. */
  body:has(.help-layout) .help-callout,
  body:has(.help-layout) .help-prose table,
  body:has(.help-layout) .help-prose pre,
  body:has(.help-layout) .help-prose figure,
  body:has(.help-layout) .help-prose blockquote {
    break-inside: avoid;
  }

  /* Don't leave a heading stranded at the bottom of a page. */
  body:has(.help-layout) .help-prose h2,
  body:has(.help-layout) .help-prose h3,
  body:has(.help-layout) .help-prose h4 {
    break-after: avoid;
  }

  /* Reveal the print-only source line at the end of the article. */
  body:has(.help-layout) .help-print-meta {
    display: block !important;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-zinc-300);
    color: var(--color-zinc-600);
    font-size: 0.75rem;
    line-height: 1.4;
  }

  body:has(.help-layout) .help-print-meta__title {
    font-weight: 600;
    color: var(--color-zinc-700);
  }

  body:has(.help-layout) .help-print-meta__url {
    display: block;
    word-break: break-all;
  }

  @page {
    margin: 0.5in;
  }
}