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

/* ── Collapsible sidebar ───────────────────────────────────────────────────
   When .sidebar-collapsed is on the <aside>, child elements opt in/out
   via semantic class names rather than JS-per-element toggling.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Flat design — zero all border-radius ──────────────────────────────── */
*, *::before, *::after { border-radius: 0 !important; }

aside { transition: width 0.2s ease; }

/* Labels: "Books", "Authors", section headings, footer text */
.sidebar-label,
.sidebar-section,
.sidebar-footer  { transition: opacity 0.15s ease, width 0.2s ease; }

.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-section,
.sidebar-collapsed .sidebar-footer  {
  display: none !important;
}

/* Nav links: center icon when collapsed */
.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Show the icon-only sign-out button only when collapsed */
.sidebar-collapsed .sidebar-collapsed-only {
  display: flex !important;
}

/* ── Trix rich-text editor ─────────────────────────────────────────────────
   Let Trix own its toolbar styles. We only set:
   - toolbar background/border to match the app's grey palette
   - active button accent to indigo
   - hide the file-attachment button (not relevant here)
   ────────────────────────────────────────────────────────────────────────── */

trix-toolbar .trix-button-row {
  background-color: #f4f1eb;
  border-bottom: 1px solid #e5e0d8;
  /* Round the top corners to match the wrapper's border-radius */
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

trix-toolbar .trix-button.trix-active {
  background: #c8dfd4;
  color: #2d5a40;
}

/* Hide file-attachment group */
trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

trix-editor {
  outline: none;
  border: none !important;
  /* No padding override here — the JS inline style (0.5rem 0.75rem) applies cleanly */
  margin: 0 !important;
  /* Round the bottom corners to match the wrapper's border-radius */
  border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px) !important;
  box-shadow: none !important;
}

/* ── Content styles — apply inside the editor AND in show/read views ─────── */
.trix-content ul, trix-editor ul { list-style: disc    !important; padding-left: 1.5rem !important; }
.trix-content ol, trix-editor ol { list-style: decimal !important; padding-left: 1.5rem !important; }
.trix-content li, trix-editor li { margin-bottom: 0.15rem; }

.trix-content blockquote,
trix-editor blockquote    {
  border-left: 3px solid #b87333;
  padding-left: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin: 0.5rem 0 0.5rem 0.25rem;
}

.trix-content h1,
trix-editor h1    {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.75rem 0 0.25rem;
  color: #1c1917;
}

.trix-content a,
trix-editor a    { color: #3d6b52; text-decoration: underline; }

.trix-content pre,
trix-editor pre    {
  background-color: #f4f1eb;
  border: 1px solid #e5e0d8;
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-family: monospace;
  white-space: pre-wrap !important;
  overflow-x: auto;
}

/* Nested list indentation */
.trix-content ul ul,
.trix-content ol ol,
.trix-content ul ol,
.trix-content ol ul { padding-left: 1.25rem !important; }

.catalog-card {
  padding: 30px !important;
}

/* ── Confirm dialog ─────────────────────────────────────────────────────────
   Native <dialog> with a dimmed backdrop. Tailwind can't target ::backdrop,
   so these rules live here.
   ────────────────────────────────────────────────────────────────────────── */
.confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.confirm-dialog[open] {
  animation: dialog-pop 0.15s ease-out;
}
@keyframes dialog-pop {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Viewport containment ───────────────────────────────────────────────────
   Prevent any element from creating horizontal overflow.
   The body is the scroll container; all children must stay within 100vw.
   ────────────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }

/* On mobile the sidebar is a fixed overlay, so the main content must have
   no left margin regardless of what the server rendered. */
@media (max-width: 767px) {
  [data-sidebar-target="main"] { margin-left: 0 !important; }
}

/* ── Mobile sidebar: slide-in overlay ──────────────────────────────────────
   Tailwind JIT won't generate translate utilities added dynamically via JS,
   so we handle the mobile transform here with plain CSS.
   On desktop (≥768px) the aside has no transform — the JS width/margin
   collapse logic takes over.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sidebar-nav { transform: translateX(-100%); }
  .sidebar-nav.sidebar-mobile-open { transform: translateX(0); }
}