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

/* Two-pane reading shell: feed sidebar (left) + entry list (right).
   On mobile it collapses to a drill-down: the feed list and the open feed are
   separate full-width screens (driven by .shell[data-screen]). */
html, body { height: 100%; }

.shell { display: grid; grid-template-columns: 320px 1fr; height: 100vh; }

.sidebar { border-right: 1px solid #ededed; overflow-y: auto; padding: 18px 14px; }
/* Feed links (incl. those nested in folders), but not the folder edit pencil
   (which keeps its own inline-flex layout). */
.menu-list a:not(.folder-edit) { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.75rem; }

/* Sidebar brand (app name) above the feed list. */
.sidebar-brand { margin: 0 0 12px; padding: 0 0.75rem; }
.sidebar-brand a { color: inherit; }

/* Sidebar header: "Feeds" on the left, filter toggle on the right. */
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; margin-bottom: 8px; }
.sidebar-header .menu-label { margin: 0; color: #1a1a1a; font-size: 1rem; }
.sidebar-actions { display: flex; align-items: center; gap: 4px; }
.icon-button-form { margin: 0; }
.icon-button {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: #b5b5b5; display: inline-flex; line-height: 0; border-radius: 4px;
}
.icon-button:hover { background: #f0f0f0; color: #7a7a7a; }
.icon-button svg { width: 18px; height: 18px; }
.filter-toggle.is-on { color: #3e8ed0; }

/* Folder grouping in the sidebar: a header that toggles collapse (disclosure
   triangle + name + aggregate badge) with an always-shown edit link, above
   its (indented) feeds. */
.folder { margin-top: 6px; }
.folder-header { display: flex; align-items: center; gap: 6px; padding: 0 0.75rem; }
.folder-toggle-form { margin: 0; flex: 1; min-width: 0; }
.folder-toggle {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 6px; padding: 0.3rem 0;
  font: inherit; font-weight: 600; color: #1a1a1a; text-align: left;
}
/* Chevron points right when collapsed, rotates down when expanded. */
.folder-disclosure {
  width: 14px; height: 14px; flex-shrink: 0; color: #9a9a9a;
  transform: rotate(90deg); transition: transform 0.12s ease;
}
.folder.is-collapsed .folder-disclosure { transform: rotate(0deg); }
.folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-header .unread-badge { font-weight: 400; flex-shrink: 0; }
/* The edit pencil sits just left of the badge and is always shown (so it works
   on touch too). The badge stays the last item, keeping its right edge aligned
   with every other badge; the fixed width stops the anchor from ballooning. */
.folder-edit {
  display: inline-flex; flex: 0 0 auto; width: 16px;
  align-items: center; justify-content: center; line-height: 0;
  color: #cfcfcf; padding: 0;
}
.folder-edit svg { width: 15px; height: 15px; }
.folder-edit:hover { color: #7a7a7a; }
/* Keep Bulma's nested indent + guide line, but drop its left/right margin so a
   folder feed's badge lines up with the folder and uncategorized badges. */
.folder-feeds { margin: 0.5em 0; }

.main { overflow-y: auto; }

.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 28px;
  text-align: center;
}
.empty-state-icon { width: 48px; height: 48px; color: #dbdbdb; }

/* Feed entry list. */
.feed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.feed-bar-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.feed-bar-main .title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Segmented control for the unread-only / show-all filter. */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #eceef1;
  border-radius: 10px;
}
.segmented-form { display: contents; }
.segmented-option {
  appearance: none;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.segmented-option:hover:not(.is-active) { color: #1f2937; }
.segmented-option.is-active {
  background: #fff;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: default;
}

.mobile-back { display: none; }

.entry-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid #f3f3f3;
}
.entry-row .entry { flex: 1; }
.entry-row .date { white-space: nowrap; }

/* Sidebar footer: a quiet link to bulk import/export. */
.sidebar-footer { margin-top: 14px; padding: 10px 0.75rem 0; border-top: 1px solid #f0f0f0; }
.sidebar-footer-link { color: #7a7a7a; }
.sidebar-footer-link:hover { color: #3e8ed0; }

/* OPML import/export sections on the dedicated page. */
.opml-section { margin-bottom: 8px; }

/* Uniform body text: keep all non-heading text at the base size (headings use
   Bulma's .title; the unread badge stays small intentionally). */
.help { font-size: 1rem; }

/* Add / edit / choose-feed forms in the main pane. */
.feed-form { padding: 22px; max-width: 560px; }
.candidates { margin-bottom: 18px; }
.candidate { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border: 1px solid #ededed; border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
.candidate:hover { border-color: #b5b5b5; }
.candidate-title { font-weight: 600; }
.candidate-url { color: #7a7a7a; word-break: break-all; }

/* Keyboard focus cursor: a left accent bar (inset, so it never shifts the row)
   plus a faint wash. Text colour is left alone so read/unread styling shows
   through. */
.entry-row.is-focused {
  background: #f5f8fc;
  box-shadow: inset 3px 0 0 #3e8ed0;
}

/* Login screen: a single centered card, no reading shell. */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 18px; }
.login-card { width: 100%; max-width: 360px; }

@media (max-width: 768px) {
  .shell { display: block; height: auto; }
  .shell[data-screen="list"] .main { display: none; }
  .shell[data-screen="entries"] .sidebar { display: none; }
  .sidebar { border-right: 0; height: 100vh; }

  .mobile-back { display: inline-flex; }
  .feed-bar { flex-direction: column; align-items: stretch; gap: 10px; }

  /* The action bar packs five controls (filter / folder / mark-all / edit /
     delete) into one flex row, which overflows a phone width. Let it wrap: the
     wide controls each take their own full-width row, and mark-all shares its
     row with the edit and delete icons. */
  .feed-bar-actions { flex-wrap: wrap; row-gap: 10px; }
  .feed-bar-actions > .segmented { flex: 1 1 100%; }
  .segmented-option { flex: 1; }
  /* Folder <select> form gets its own full-width row. */
  .feed-bar-actions > form:not(.icon-button-form):not(.button_to) { flex: 1 1 100%; display: flex; }
  .feed-bar-actions > form:not(.icon-button-form) .select { flex: 1; }
  .feed-bar-actions > form:not(.icon-button-form) select { width: 100%; }
  /* Mark-all grows to fill the rest of its row, alongside the edit/delete icons. */
  .feed-bar-actions > form.button_to { flex: 1 1 auto; display: flex; }
  .feed-bar-actions > form.button_to .button { width: 100%; }

  /* Touch targets: meet the 44x44 minimum tap size (Apple HIG) for the
     sidebar action icons and the feed edit/delete buttons, with a slightly
     larger glyph so it stays legible at arm's length. Desktop keeps the
     denser mouse-precision sizing above. */
  .icon-button {
    min-width: 44px; min-height: 44px;
    padding: 0; justify-content: center; align-items: center;
  }
  .icon-button svg { width: 22px; height: 22px; }

  /* The folder edit pencil keeps its slim visual footprint (so the unread
     badge stays right-aligned with every other badge) but gains a 44px-tall
     tap area via padding cancelled out with a matching negative margin. */
  .folder-header .folder-edit {
    width: auto; padding: 13px 9px; margin: -13px -9px;
  }
  .folder-edit svg { width: 18px; height: 18px; }
}