/* library area styles. Owned by W2-LIBRARY; scope every rule under .ft-area-library and use var(--ft-*) tokens only. */

.ft-area-library .lib-grid {
  display: grid;
  gap: var(--ft-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.ft-area-library .lib-grid--images { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

.ft-area-library .lib-skeleton {
  height: 180px;
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface-2);
  animation: lib-pulse 1.4s var(--ft-ease) infinite alternate;
}
@keyframes lib-pulse { to { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ft-area-library .lib-skeleton { animation: none; } }

.ft-area-library .lib-summary { margin: 0 0 var(--ft-space-4); font-size: var(--ft-text-sm); color: var(--ft-text-muted); }

.ft-area-library .lib-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: var(--ft-space-4);
  align-items: end;
  margin-bottom: var(--ft-space-5);
}
.ft-area-library .lib-toolbar__drop .ft-upload__zone { flex-direction: row; justify-content: flex-start; min-height: 0; padding: var(--ft-space-3) var(--ft-space-4); gap: var(--ft-space-3); text-align: left; }

/* Menu cards */
.ft-area-library .lib-card .ft-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-area-library .lib-card__art {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ft-space-3);
  margin-bottom: var(--ft-space-3);
  padding: var(--ft-space-3) var(--ft-space-4);
  border: 1px solid var(--ft-paper-frame);
  border-radius: var(--ft-radius-md);
  background: var(--ft-paper);
  color: var(--ft-paper-ink);
}
.ft-area-library .lib-card__art-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ft-weight-bold); }
.ft-area-library .lib-card__price { flex-shrink: 0; font-weight: var(--ft-weight-extrabold); font-size: var(--ft-text-xl); }
.ft-area-library .lib-card__chips { align-items: center; margin-bottom: var(--ft-space-3); }
.ft-area-library .lib-card__desc {
  margin: 0 0 var(--ft-space-3);
  font-size: var(--ft-text-sm);
  color: var(--ft-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-area-library .lib-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ft-border); }
.ft-area-library .lib-rows li {
  display: flex;
  justify-content: space-between;
  gap: var(--ft-space-3);
  padding: var(--ft-space-2) 0;
  border-bottom: 1px solid var(--ft-border);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-semibold);
}
.ft-area-library .lib-rows__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-area-library .lib-rows__section {
  display: block;
  font-size: var(--ft-text-xs);
  font-weight: var(--ft-weight-bold);
  letter-spacing: var(--ft-tracking-wide);
  text-transform: uppercase;
  color: var(--ft-text-muted);
}
.ft-area-library .lib-rows__price { flex-shrink: 0; color: var(--ft-text-muted); font-weight: var(--ft-weight-medium); }
.ft-area-library .lib-card__more { margin: var(--ft-space-2) 0 0; font-size: var(--ft-text-sm); color: var(--ft-text-muted); }
.ft-area-library .lib-card__foot { display: flex; flex-wrap: wrap; gap: var(--ft-space-2); margin-top: var(--ft-space-4); }
.ft-area-library .lib-card__menu .mud-icon-button,
.ft-area-library .lib-kebab .mud-icon-button { width: var(--ft-control-md); height: var(--ft-control-md); color: var(--ft-text-muted); }
.ft-area-library .lib-kebab { flex-shrink: 0; }

/* Image cards */
.ft-area-library .lib-image { display: flex; flex-direction: column; }
.ft-area-library .lib-image__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150px;
  padding: var(--ft-space-4);
  border: 0;
  border-bottom: 1px solid var(--ft-border);
  background: var(--ft-paper);
  color: var(--ft-paper-ink);
  cursor: zoom-in;
}
.ft-area-library .lib-image__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ft-area-library .lib-image__preview:hover { filter: brightness(.96); }
.ft-area-library .lib-image__body { padding: var(--ft-space-4) var(--ft-space-4) var(--ft-space-2); min-width: 0; }
.ft-area-library .lib-image__name {
  margin: 0 0 var(--ft-space-2);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-area-library .lib-image__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ft-space-2);
  padding: var(--ft-space-3) var(--ft-space-4) var(--ft-space-4);
}

/* Lightbox (inside MudDialog) */
.ft-area-library .lib-lightbox__body { display: flex; justify-content: center; padding: var(--ft-space-4); border-radius: var(--ft-radius-md); background: var(--ft-paper); }
.ft-area-library .lib-lightbox__body img { max-width: 100%; max-height: 60vh; height: auto; display: block; }
.ft-area-library .lib-lightbox__foot { margin: var(--ft-space-3) 0 0; font-size: var(--ft-text-sm); color: var(--ft-text-muted); }

/* Menu editor dialog */
.ft-area-library .lib-lead { margin: 0 0 var(--ft-space-4); color: var(--ft-text-muted); }
.ft-area-library .lib-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ft-space-3); }
.ft-area-library .lib-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ft-space-1);
  text-align: left;
  padding: var(--ft-space-5);
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  color: var(--ft-text);
  cursor: pointer;
  font: inherit;
}
.ft-area-library .lib-choice > span { display: block; width: 100%; text-align: left; }
.ft-area-library .lib-choice:hover { background: var(--ft-surface-2); border-color: var(--ft-accent); }
.ft-area-library .lib-choice__title { font-size: var(--ft-text-lg); font-weight: var(--ft-weight-bold); }
.ft-area-library .lib-choice__text { font-size: var(--ft-text-sm); color: var(--ft-text-muted); }

.ft-area-library .lib-editor__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-space-3); }
.ft-area-library .lib-editor__title { margin: 0; font-size: var(--ft-text-lg); font-weight: var(--ft-weight-bold); color: var(--ft-text); }
.ft-area-library .lib-desc { min-height: 72px; }
.ft-area-library .lib-section {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-3);
  align-items: flex-start;
  padding: var(--ft-space-4);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface-2);
}
.ft-area-library .lib-section > * { width: 100%; }
.ft-area-library .lib-section > .ft-btn { width: auto; }
.ft-area-library .lib-section__head { display: flex; align-items: flex-end; gap: var(--ft-space-1); }
.ft-area-library .lib-section__name { flex: 1; min-width: 0; }
.ft-area-library .lib-dish { display: flex; align-items: center; gap: var(--ft-space-1); }
.ft-area-library .lib-dish__field { flex: 1; min-width: 0; }
.ft-area-library .lib-note { margin: 0; font-size: var(--ft-text-sm); color: var(--ft-text-muted); }
.ft-area-library .lib-pick { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ft-space-3); width: 100%; font-size: var(--ft-text-sm); }
.ft-area-library .lib-pick__name {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: var(--ft-weight-semibold);
}
.ft-area-library .lib-radios { display: flex; flex-direction: column; gap: var(--ft-space-1); }
.ft-area-library .lib-radios__label { font-size: var(--ft-text-sm); font-weight: var(--ft-weight-bold); }
.ft-area-library .lib-radios .mud-radio { min-height: 44px; }
.ft-area-library .lib-pick__price { flex-shrink: 0; white-space: nowrap; color: var(--ft-text-muted); }
.ft-area-library .mud-dialog-actions .ft-btn:disabled,
.mud-dialog.ft-area-library .ft-btn:disabled { background: var(--ft-surface-3); color: var(--ft-text-muted); opacity: 1; }

/* Focus */
.ft-area-library .lib-choice:focus-visible,
.ft-area-library .lib-kebab .mud-icon-button:focus-visible,
.ft-area-library .lib-card__menu .mud-icon-button:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; }
.ft-area-library .lib-image__preview:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ft-focus); }

@media (max-width: 600px) {
  .ft-area-library .lib-toolbar,
  .ft-area-library .lib-choices { grid-template-columns: 1fr; }
  .ft-area-library .lib-desc { min-height: 44px; }
  .ft-area-library .lib-section { padding: var(--ft-space-3); }
  .mud-dialog.ft-area-library {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
}