/* ============================================================
   Library module
   ============================================================ */

#library-view,
#library-form-view,
#library-detail-view,
#library-category-manager-view,
#library-completed-tasks-view {
  overflow-y: auto;
  flex-direction: column;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
#library-view::-webkit-scrollbar,
#library-form-view::-webkit-scrollbar,
#library-detail-view::-webkit-scrollbar,
#library-category-manager-view::-webkit-scrollbar,
#library-completed-tasks-view::-webkit-scrollbar { display: none; } /* Chrome, Safari */

.lib-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 20px 20px 12px;
  flex-shrink: 0;
}

/* Pre-existing bug fixed here (not caused by the gallery/grid feature):
   with 5 icon buttons + FAB all as direct flex children of .lib-header,
   the row overflowed off-screen on common mobile widths (375px, 320px) —
   .lib-manage-categories and .lib-new became unreachable, clipped by the
   parent's forced overflow-x:auto (a sibling effect of overflow-y:auto on
   #library-view, which computes an invisible horizontal scroller instead
   of visibly wrapping). Grouping the actions into one flex item lets the
   WHOLE group wrap to its own line under back+title when needed, instead
   of individual icons disappearing off-screen.  */
.lib-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  /* 2026-08-28: standalone row (sibling of .lib-toolbar/.lib-cat-select-wrap
     below .lib-header, not the settings icon anymore — that moved next to
     the category dropdown, see .lib-cat-select-wrap) — needs its own side
     padding since it no longer inherits it from .lib-header or
     .lib-screen-body. justify-content:flex-end keeps the group right-
     aligned on its own regardless of parent context; flex-wrap guards
     against overflow on narrow screens. */
  padding: 0 16px 12px;
  flex-wrap: wrap;
}

.lib-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-color);
  padding: 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.lib-back-btn:hover { background-color: var(--accent-soft-color); }

.lib-header-title {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.lib-new-fab {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.lib-new-fab:hover { opacity: 0.85; }

/* --- Toolbar (search + sort) --- */
.lib-toolbar {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.lib-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-color);
  border: 1.5px solid var(--soft-border-color);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--secondary-color);
  min-width: 0;
}
.lib-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 11px 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-color);
}

.lib-sort-select-wrap { flex-shrink: 0; }
.lib-sort-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--surface-color);
  color: var(--text-color);
  border: 1.5px solid var(--soft-border-color);
  outline: none;
  max-width: 130px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lib-sort-select-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-sort-select-btn:focus-visible {
  border-color: var(--primary-color);
  background-color: var(--focus-bg-color);
}
.lib-sort-select-btn .lib-dd-chevron { margin-left: auto; }
.lib-sort-select-btn.is-open .lib-dd-chevron { transform: rotate(180deg); }

/* --- Category selector (dropdown, no tabs — no escala mejor con muchas categorías en móvil) --- */
.lib-cat-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 14px;
  flex-shrink: 0;
}
.lib-cat-select-wrap .lib-cat-select {
  flex: 1;
  min-width: 0;
}
.lib-cat-select-wrap .lib-icon-btn {
  flex-shrink: 0;
  /* 2026-08-30 (pedido del usuario): #lib-cat-select crece de alto cuando la
     lista se abre (flujo normal, no position:absolute — empuja el contenido
     de abajo a propósito, ver comentario junto a #lib-cat-select-list). Con
     align-items:center del wrap, este icono más corto quedaba centrado
     respecto a esa altura ya crecida y "se deslizaba" hacia abajo al abrir
     el desplegable. Se ancla arriba, independiente de la altura del hermano. */
  align-self: flex-start;
}
.lib-cat-select-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background-color: var(--input-bg-color);
  color: var(--text-color);
  border: 1px solid var(--soft-border-color);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lib-cat-select-btn:focus-visible {
  border-color: var(--primary-color);
  background-color: var(--focus-bg-color);
}
.lib-cat-select-btn .lib-dd-chevron { margin-left: auto; }
.lib-dd-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--secondary-color);
}
.lib-cat-select-btn.is-open .lib-dd-chevron { transform: rotate(180deg); }

.lib-cat-select-list {
  background-color: var(--surface-color);
  border: 1px solid var(--soft-border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--shadow-color);
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
/* Category filter list (#lib-cat-select-list) is in normal document flow
   (no position:absolute — pushes .lib-screen-body down instead of
   overlaying it), so it needs its own top margin here. The sort list
   (#lib-sort-select-list) stays position:absolute and keeps its spacing
   via inline top:calc(100% + 4px). */
#lib-cat-select-list {
  margin-top: 4px;
}
.lib-cat-select-list::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.lib-cat-select-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--text-color);
  background-color: var(--surface-color);
  border: none;
  outline: none;
  transition: background-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lib-cat-select-opt i[data-lucide],
.lib-cat-select-opt svg { color: var(--secondary-color); }
.lib-cat-select-opt.is-selected i[data-lucide],
.lib-cat-select-opt.is-selected svg { color: var(--primary-color); }
.lib-cat-select-opt:hover,
.lib-cat-select-opt:focus-visible { background-color: var(--accent-soft-color); }
.lib-cat-select-opt.is-selected {
  color: var(--primary-color);
  font-weight: 600;
  background-color: var(--accent-soft-color);
}

/* --- Screen body / list --- */
.lib-screen-body {
  flex: 1;
  min-height: 0;
  padding: 0 16px 24px;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
.lib-screen-body::-webkit-scrollbar { display: none; } /* Chrome, Safari */

.lib-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--secondary-color);
  text-align: center;
}
.lib-empty-text {
  font-size: 0.95rem;
  margin: 0;
}

/* --- Gallery grid --- */
/* App content is capped at 480px (#app max-width) regardless of viewport —
   minmax(100px,1fr) + 10px gap yields 4 columns at that width consistently
   on tablet/desktop, while auto-fill still drops to fewer columns on
   narrower phones instead of shrinking cards below a readable size. */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.lib-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.lib-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.lib-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--surface-color);
  border: 1px solid var(--soft-border-color);
}

.lib-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lib-card-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--accent-soft-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lib-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.lib-card-desc {
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin: -4px 0 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* "Текст" filter card — every visible entry lacks an image here, so
   skipping the square box entirely (rather than showing an empty/
   placeholder square for all of them) reads as a clean list of names
   instead of a gallery with nothing to look at. */
.lib-card-body--text {
  justify-content: center;
  align-items: center;
  min-height: 76px;
  padding: 14px 10px;
  border-radius: 16px;
  background-color: var(--surface-color);
  border: 1px solid var(--soft-border-color);
}
.lib-card-title--standalone {
  -webkit-line-clamp: 3;
}

.lib-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  background-color: var(--surface-color);
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* Favorited state of the gallery card's circle/star toggle — deliberately
   its own class, NOT .lib-icon-btn--active (that one is shared with the
   audio screen's "currently playing" highlight; reusing it here would have
   turned that indicator green too). Fixed green regardless of Yin/Yang
   theme, same #16a34a already used for a success state in contact.css. */
.lib-icon-btn.lib-fav-active {
  color: #16a34a;
}
.lib-fav-active svg {
  fill: currentColor;
}

.lib-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.lib-icon-btn:hover { background-color: var(--accent-soft-color); color: var(--primary-color); }
.lib-icon-btn--danger:hover { background-color: rgba(239,68,68,0.1); color: #ef4444; }
.lib-icon-btn--active { color: #f7b731; }

/* Header mode toggles (favorite/edit/delete) — same on/off treatment as
   Report's per-day admin edit/delete toggle pair: border + soft background
   only when that mode is the active one, transparent otherwise. */
.lib-mode-toggle { border: 1.5px solid transparent; }
.lib-mode-toggle--active { background-color: var(--accent-soft-color); border-color: var(--primary-color); color: var(--primary-color); }
.lib-mode-toggle--danger.lib-mode-toggle--active { background-color: rgba(239,68,68,0.14); border-color: #ef4444; color: #ef4444; }

/* --- Form body --- */
.lib-form-body {
  padding: 8px 20px 32px;
  display: flex;
  flex-direction: column;
}

.lib-field-group {
  margin-bottom: 20px;
}
.lib-field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin: 0 0 8px;
}
.lib-field-hint {
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin: 6px 0 0;
}
.lib-field-error {
  font-size: 0.82rem;
  color: #ef4444;
  margin-bottom: 16px;
}

.lib-input {
  width: 100%;
  background: var(--surface-color);
  border: 1.5px solid var(--soft-border-color);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-color);
  outline: none;
  box-sizing: border-box;
}
.lib-input:focus { border-color: var(--primary-color); }
.lib-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.lib-btn-primary {
  flex: 1;
  padding: 14px;
  border-radius: 16px;
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  border: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lib-btn-primary:hover { opacity: 0.88; }
.lib-btn-primary:disabled { opacity: 0.5; cursor: default; }
.lib-home-btn {
  width: 100%;
  margin-top: 20px;
}

/* Quick access row (Tareas realizadas / Grabaciones / Música / Imágenes) —
   2026-08-27 reorg, single row of 4, icon on top + label below (same idea
   as Home's .action-tile, kept modest/neutral like the rest of this module
   instead of importing Home's bigger colored tile look). Same
   .lib-btn-secondary button already used across the module (category
   manager, forms) — only the layout/direction is new. */
.lib-quick-access-row {
  display: flex;
  gap: 10px;
  padding: 6px 16px 20px;
  flex-shrink: 0;
}
.lib-quick-access-btn {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  text-align: center;
}
/* Compound selector (.lib-btn-secondary.lib-quick-access-btn), not just
   .lib-quick-access-btn alone — .lib-btn-secondary declara su propio
   background/color/gap/padding más abajo en este archivo con la misma
   especificidad (una clase cada uno), así que una sobreescritura de una
   sola clase aquí pierde en silencio por orden de aparición (mismo gotcha
   que .lib-fav-active, ver PROJECT_RULES.md). Mismo tono oscuro que ya usa
   el buscador (.lib-search-wrap), para que estos 4 accesos lean más
   prominentes que un botón secundario plano sin introducir un color nuevo.
   gap/padding también viven aquí (2026-08-29) — .lib-btn-secondary fija
   gap:6px/padding:10px 16px, que si no se sobreescriben con este mismo
   selector compuesto ganan por orden de aparición y anulan en silencio
   cualquier valor puesto en .lib-quick-access-btn solo. */
.lib-btn-secondary.lib-quick-access-btn {
  background-color: var(--surface-color);
  color: var(--text-color);
  gap: 10px;
  padding: 12px 6px;
}
/* white-space:normal alone only lets a break happen at a SPACE - every
   label here (es/en/ru) is a single word, so without a break opportunity
   inside the word itself a long one ("Grabaciones"/"Recordings"/"Изображения",
   10-11 chars) had nowhere to wrap and just overflowed the button instead of
   fitting on a 2nd line. overflow-wrap:break-word + hyphens:auto (same
   combination already validated in this project for the equivalent problem -
   see PROJECT_RULES.md "Правило de idiomas con labels sistemáticamente más
   largos en grupos de pills") lets the browser hyphenate at a syllable
   boundary instead of a raw character cut, and only when the word genuinely
   doesn't fit on one line - font-size is untouched. All 4 buttons already
   sit in a flex ROW (.lib-quick-access-row, no wrap) with default
   align-items:stretch, so one button needing 2 lines makes all 4 grow to
   the same taller height automatically - the row itself never breaks onto a
   2nd row. */
.lib-quick-access-btn span {
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  color: var(--text-color);
}

.lib-btn-secondary {
  padding: 10px 16px;
  border-radius: 14px;
  background: transparent;
  color: var(--secondary-color);
  border: 1.5px solid var(--soft-border-color);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lib-btn-secondary:hover { background-color: var(--accent-soft-color); }
.lib-btn-secondary:disabled { opacity: 0.5; cursor: default; }

.lib-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.lib-form-actions .lib-btn-secondary { flex: 0 0 auto; padding: 14px 20px; }

/* --- Links list --- */
.lib-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.lib-link-row .lib-input { font-size: 0.85rem; padding: 10px 12px; }
.lib-link-url { flex: 1; min-width: 0; }
.lib-link-label { flex: 1; min-width: 0; }

/* --- Images grid --- */
#lib-images-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.lib-image-thumb-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}
.lib-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--soft-border-color);
}
.lib-image-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid var(--bg-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Detail view --- */
.lib-detail-body {
  flex: 1;
  min-height: 0;
  padding: 0 20px 32px;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
.lib-detail-body::-webkit-scrollbar { display: none; } /* Chrome, Safari */

.lib-detail-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.lib-detail-image {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--soft-border-color);
}

.lib-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.lib-detail-category-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 14px;
  background-color: var(--accent-soft-color);
  color: var(--text-color);
  font-size: 0.78rem;
  font-weight: 600;
}
.lib-detail-category-chip i[data-lucide] { color: var(--primary-color); }
.lib-detail-tag {
  padding: 5px 10px;
  border-radius: 14px;
  background: var(--surface-color);
  border: 1px solid var(--soft-border-color);
  color: var(--secondary-color);
  font-size: 0.78rem;
}

.lib-detail-description {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px;
}
.lib-detail-text {
  font-size: 0.9rem;
  color: var(--text-color);
  white-space: pre-wrap;
  line-height: 1.55;
  margin: 0 0 16px;
}

.lib-detail-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-color);
  border: 1px solid var(--soft-border-color);
  color: var(--primary-color);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 6px;
  word-break: break-word;
}

.lib-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.lib-detail-actions .lib-btn-secondary { flex: 1 1 calc(50% - 4px); justify-content: center; }
.lib-btn-secondary--danger { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.lib-btn-secondary--danger:hover { background-color: rgba(239,68,68,0.1); }

/* --- Category manager --- */
.lib-cat-row-group { margin-bottom: 8px; }
.lib-cat-row,
.lib-cat-new-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lib-cat-icon-btn {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--input-bg-color);
  border: 1px solid var(--soft-border-color);
  color: var(--primary-color);
  cursor: pointer;
  padding: 0;
}
.lib-cat-icon-btn:disabled { opacity: 0.5; cursor: default; }
.lib-cat-icon-btn i[data-lucide],
.lib-cat-icon-btn svg { width: 20px; height: 20px; }
.lib-cat-icon-picker {
  margin: 8px 0 12px 60px;
}
.lib-cat-name-input { flex: 1; min-width: 0; }
.lib-cat-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--secondary-color);
  white-space: nowrap;
}
.lib-cat-new-row { margin-top: 16px; }
.lib-cat-new-row .lib-btn-secondary { flex-shrink: 0; }

/* --- Category row, read-only display (not currently being edited) ---
   Sized to match .lib-cat-icon-btn / .lib-input so the row doesn't jump
   in height when switching into edit mode. */
.lib-cat-icon-display {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}
.lib-cat-icon-display i[data-lucide],
.lib-cat-icon-display svg { width: 20px; height: 20px; }

.lib-cat-name-display {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 0.95rem;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Completed tasks (Выполненные задачи) --- */
.lib-ct-execution-card {
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 16px;
  background-color: var(--surface-color);
  border: 1px solid var(--soft-border-color);
}
.lib-ct-execution-date {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin: 0 0 8px;
  text-transform: capitalize;
}
.lib-ct-execution-comment {
  font-size: 0.88rem;
  color: var(--text-color);
  margin: 0 0 10px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.lib-ct-execution-card .photo-grid { margin-top: 4px; }
.lib-ct-execution-card .photo-thumb { cursor: zoom-in; }

/* --- Home tile icon accent --- */
/* #tile-library quitado de Home (2026-08-29) — Galería sigue accesible solo
   desde el menú. Selector nth-child(5) preexistente, sin tile en esa
   posición en ninguna de las 2 grillas de Home; se deja igual (no forma
   parte de este cambio). */
.action-tile:nth-child(5) .action-tile-icon { color: var(--chart-2); }