/*
 * Flint Application Styles
 *
 * Pico CSS provides the design system. These overrides handle
 * app-specific layout and component tweaks.
 */

/* ── Layout ─────────────────────────────────────────────── */

body > nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pico-background-color);
  border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}

/* Sidebar admin layout */
.admin-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--pico-spacing);
  align-items: start;
}

.admin-layout > aside nav {
  position: sticky;
  top: 5rem;
}

@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Flash messages ─────────────────────────────────────── */

[role="alert"] {
  padding: var(--pico-spacing);
  border-radius: var(--pico-border-radius);
  margin-block-end: var(--pico-spacing);
}

[role="alert"].notice {
  background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
  border: var(--pico-border-width) solid var(--pico-primary);
  color: var(--pico-primary);
}

[role="alert"].error {
  background: color-mix(in srgb, var(--pico-del-color) 10%, transparent);
  border: var(--pico-border-width) solid var(--pico-del-color);
  color: var(--pico-del-color);
}

/* ── Status badges ──────────────────────────────────────── */

mark[data-status="active"],
mark[data-status="closed"],
mark[data-status="completed"] {
  background: color-mix(in srgb, green 15%, transparent);
  color: green;
}

mark[data-status="inactive"],
mark[data-status="paused"],
mark[data-status="error"] {
  background: color-mix(in srgb, var(--pico-del-color) 15%, transparent);
  color: var(--pico-del-color);
}

mark[data-status="pending"],
mark[data-status="open"],
mark[data-status="half_open"],
mark[data-status="processing"] {
  background: color-mix(in srgb, orange 15%, transparent);
  color: orange;
}

mark[data-status] {
  padding: 0.15em 0.5em;
  border-radius: var(--pico-border-radius);
  font-size: 0.85em;
  font-weight: 500;
}

/* ── Collaborative editor ───────────────────────────────── */

.collab-editor {
  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-background-color);
}

.collab-editor [role="toolbar"] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}

.collab-editor [role="toolbar"] button {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  cursor: pointer;
}

.collab-editor [role="toolbar"] button:hover {
  background: var(--pico-secondary-hover-background);
  color: var(--pico-color);
}

.collab-editor [role="toolbar"] [role="separator"] {
  width: 1px;
  height: 1.25rem;
  background: var(--pico-muted-border-color);
  margin-inline: 0.25rem;
}

.collab-editor [contenteditable] {
  min-height: 30rem;
  padding: 1.5rem 2rem;
  outline: none;
}

/* Lexical theme classes */
.collab-paragraph { margin-block: 0.5em; }
.collab-bold { font-weight: 700; }
.collab-italic { font-style: italic; }
.collab-underline { text-decoration: underline; }
.collab-strikethrough { text-decoration: line-through; }
.collab-code { font-family: var(--pico-font-family-monospace); background: var(--pico-code-background-color); padding: 0.1em 0.3em; border-radius: var(--pico-border-radius); }
.collab-h1 { font-size: 2rem; font-weight: 700; margin-block: 0.67em; }
.collab-h2 { font-size: 1.5rem; font-weight: 700; margin-block: 0.83em; }
.collab-h3 { font-size: 1.17rem; font-weight: 700; margin-block: 1em; }
.collab-ul { list-style: disc; padding-inline-start: 2em; }
.collab-ol { list-style: decimal; padding-inline-start: 2em; }
.collab-li { margin-block: 0.25em; }
.collab-link { color: var(--pico-primary); text-decoration: underline; }
.collab-placeholder { color: var(--pico-muted-color); position: absolute; pointer-events: none; }

/* ── Presence indicators ────────────────────────────────── */

.collab-presence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
}

/* ── Utility ────────────────────────────────────────────── */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}