/*
 * 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.
 */

.turbo-progress-bar {
  background-color:  var(--color-accent);
}

/* Hide the inline submit-spinner until the form is mid-submit. Turbo sets
   aria-busy="true" on the form for the duration of the request. */
.submit-spinner {
  display: none;
}
form[aria-busy="true"] .submit-spinner {
  display: inline-block;
}

/* Hide Turbo's default top progress bar. The centered "Working…" overlay
   (app/javascript/progress_bar.js) is meant to replace it, but Turbo 8's
   progressBarDelay suppression is unreliable, so the thin bar and the overlay
   were both appearing. Kill the bar here so the overlay is the single,
   consistent loading cue. */
.turbo-progress-bar {
  display: none !important;
}

/* Tagger Component Styles */
.tagger-container {
  width: 100%;
  margin-top: 0.5rem;
}

.tagger-wrapper {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 0.5rem;
}

.tagger-label {
  flex-shrink: 0;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  color: #0891b2; /* cyan-600 */
}

.tagger-input-area {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-base-300);
  background-color: var(--color-base-100);
  border-radius: 0.375rem;
  min-height: 2.5rem;
  position: relative;
}

.dark .tagger-input-area {
  background-color: #1f2937;
  border-color: #4b5563;
}

.tagger-input {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  padding: 0.25rem;
}

.tagger-input::placeholder {
  color: #9ca3af;
}

/*.tagger-trigger {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #0891b2;
  fill: #0891b2;
}

.tagger-trigger:hover {
  color: #0e7490;
  fill: #0e7490;
}*/

/* Tag chips (selected tags) */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  background-color: var(--color-base-200);
  border: 1px solid  var(--color-primary);
  color: var(--color-base-content);
}


.tag-chip-text {
  line-height: 1.25;
}

.tag-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.tag-chip-remove:hover {
  opacity: 1;
}

/* Dropdown menu */
.tagger-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  z-index: 50;
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-200);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-height: 16rem;
  overflow-y: auto;
}

.tagger-menu-section {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
}

.tagger-menu-divider {
  margin: 0.25rem 0.75rem;
  border-top: 1px solid #e5e7eb;
}

.dark .tagger-menu-divider {
  border-color: #4b5563;
}

.tagger-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.tagger-menu-item:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-content);
}

.tagger-menu-item.hidden {
  display: none;
}

.tagger-menu-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.tagger-menu-create {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #0891b2;
  cursor: pointer;
  border-top: 1px solid #e5e7eb;
}

.dark .tagger-menu-create {
  border-color: #4b5563;
}

.tagger-menu-create:hover {
  background-color: #ecfeff;
}

.dark .tagger-menu-create:hover {
  background-color: #164e63;
}

.tagger-menu-create.hidden {
  display: none;
}

.flash-message {
  animation: flashMessage 6s forwards;
}
@keyframes flashMessage {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
  8% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  92% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
}
/* Pull-to-refresh indicator (native iOS). Built + positioned by
   pull_to_refresh_controller.js; parked off-screen until a pull begins. */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--fallback-b1, oklch(var(--b1) / 1));
  color: var(--fallback-p, oklch(var(--p) / 1));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, -56px);
  pointer-events: none;
}
.ptr-indicator.ptr-spinning svg {
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Rendered markdown in the admin docs viewer (no Tailwind typography plugin,
   so style the generated elements directly, scoped to .doc-content). */
.doc-content { line-height: 1.6; word-wrap: break-word; }
.doc-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1.2rem 0 0.6rem; }
.doc-content h2 { font-size: 1.25rem; font-weight: 700; margin: 1.1rem 0 0.5rem; }
.doc-content h3 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.4rem; }
.doc-content h4 { font-weight: 600; margin: 0.9rem 0 0.3rem; }
.doc-content h1:first-child,
.doc-content h2:first-child { margin-top: 0; }
.doc-content p { margin: 0.6rem 0; }
.doc-content ul { list-style: disc; margin: 0.6rem 0; padding-left: 1.4rem; }
.doc-content ol { list-style: decimal; margin: 0.6rem 0; padding-left: 1.4rem; }
.doc-content li { margin: 0.2rem 0; }
.doc-content a { color: var(--fallback-p, oklch(var(--p) / 1)); text-decoration: underline; }
.doc-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--fallback-b2, oklch(var(--b2) / 1));
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}
.doc-content pre {
  background: var(--fallback-b2, oklch(var(--b2) / 1));
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.8rem 0;
}
.doc-content pre code { background: none; padding: 0; font-size: 0.82em; }
.doc-content blockquote {
  border-left: 3px solid var(--fallback-bc, oklch(var(--bc) / 0.3));
  padding-left: 0.9rem;
  margin: 0.8rem 0;
  opacity: 0.85;
}
.doc-content table { border-collapse: collapse; margin: 0.8rem 0; font-size: 0.9em; }
.doc-content th, .doc-content td {
  border: 1px solid var(--fallback-bc, oklch(var(--bc) / 0.2));
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.doc-content th { background: var(--fallback-b2, oklch(var(--b2) / 1)); font-weight: 600; }
.doc-content hr { border: 0; border-top: 1px solid var(--fallback-bc, oklch(var(--bc) / 0.2)); margin: 1.2rem 0; }