/* Gallery-only layout, isolated from the shared workspace styles. */
sv-media-collections {
  display: block;
}

/* The grid of collections: Utan samling first, then the company's collections as cards. */
.collections-home {
  margin-block: 4px 24px;
}
.collections-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-block-end: 18px;
}
.collections-title {
  flex: 1 1 auto;
  min-width: 0;
}
.collections-head h2 {
  margin: 0;
  font-size: 22px;
}
/* The search has its own row under the heading, so Ny samling stays beside the heading on every width. */
.collections-search {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  min-width: 0;
}
.collections-search .search-field {
  position: relative;
  display: flex;
  flex: 0 1 28rem;
  align-items: center;
  min-width: 0;
}
.collections-search .search-field .icon {
  position: absolute;
  inset-inline-start: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}
.collections-search input {
  width: 100%;
  min-width: 0;
  padding-inline-start: 36px;
  font-size: 1rem;
}
.collections-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.collections-new .icon {
  width: 16px;
  height: 16px;
}
.collections-subhead {
  margin: 8px 0 12px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.collection-grid > li {
  min-width: 0;
}
/* One card per collection; its name is a link stretched over the whole card. */
.collection-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
}
/* A collection is drawn as a folder: a tab on top and up to three of its pictures inside, so it does not read as a
   single image. The folder's colour comes from the area. */
.folder-visual {
  position: relative;
  padding-block-start: 12px;
  margin-block-end: 6px;
}
.folder-tab {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 42%;
  block-size: 20px;
  border-radius: 10px 14px 0 0;
  background: color-mix(in srgb, var(--area, #6a5acd) 34%, var(--surface-page, #fff));
}
.folder-body {
  position: relative;
  display: grid;
  gap: 4px;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  padding: 8px;
  border-radius: 4px 14px 14px 14px;
  background: color-mix(in srgb, var(--area, #6a5acd) 22%, var(--surface-page, #fff));
  overflow: hidden;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.folder-body.covers-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.folder-body.covers-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.folder-body.covers-3 img:first-child {
  grid-row: span 2;
}
.folder-body img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
  border-radius: 8px;
  background: #14212a;
}
.collection-placeholder {
  display: grid;
  place-items: center;
  color: var(--area, var(--color-muted));
}
.collection-placeholder .icon {
  width: 36px;
  height: 36px;
  opacity: 0.7;
}
.collection-card.unfiled .folder-tab {
  display: none;
}
.collection-card.unfiled .folder-body {
  border-radius: 14px;
  background: color-mix(in srgb, var(--area-soft, #eeecf7) 70%, var(--surface-page, #fff));
  outline: 1.5px dashed color-mix(in srgb, var(--area, #8b3b6c) 45%, transparent);
  outline-offset: -1.5px;
}
.collection-card.unfiled .folder-visual {
  padding-block-start: 12px;
}
.collection-card.archived .folder-body img {
  opacity: 0.6;
}
.collection-card:hover .folder-body {
  box-shadow: var(--surface-raised-shadow, 0 6px 18px -10px rgb(32 36 60 / 0.25));
}
.collection-card h3 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.collection-card h3 > .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-block-start: 1px;
  color: var(--area, var(--color-muted));
}
.collection-card h3 {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.collection-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}
.collection-card .card-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-weight: 650;
  text-align: start;
  text-decoration: none;
}
.collection-card .card-link:hover {
  background: none;
  color: var(--color-accent);
  text-decoration: underline;
}
.collection-card .card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.collection-card .card-link:focus-visible {
  outline: none;
}
.collection-card .card-link:focus-visible::after {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.collections-first {
  margin: 4px 0 12px;
}
.collections-archived-toggle {
  margin-block-start: 8px;
}

/* Inside a collection: Samlingar › name, then its heading and what can be done there. */
.gallery-breadcrumb {
  margin: 0;
}
.gallery-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.gallery-breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.gallery-breadcrumb li + li::before {
  content: '/';
  margin-inline-end: 4px;
  color: var(--color-muted);
}
.gallery-breadcrumb a,
.gallery-breadcrumb button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}
.gallery-breadcrumb a:hover,
.gallery-breadcrumb button:hover {
  background: none;
  text-decoration: underline;
}
.gallery-breadcrumb .icon {
  width: 15px;
  height: 15px;
}
.gallery-collection-head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-block-end: 16px;
}
.gallery-collection-head > div {
  flex: 1 1 16rem;
  min-width: 0;
}
.gallery-collection-head h2 {
  margin: 0 0 2px;
  font-size: 22px;
  overflow-wrap: anywhere;
}
.gallery-collection-head p {
  margin: 0;
}
.gallery-collection-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gallery-collection-head button .icon {
  width: 16px;
  height: 16px;
}
/* The collection's name with a pencil beside it, and a trash at the end of the row. */
.collection-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.collection-title h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.collection-title h2 > .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--area, var(--color-muted));
}
.gallery-collection-head .icon-button {
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  min-block-size: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control, 8px);
  background: transparent;
  color: var(--color-muted);
}
.gallery-collection-head .icon-button:hover:not(:disabled) {
  border-color: var(--color-line);
  background: var(--surface-muted, #f3f4f8);
  color: var(--color-ink);
}
.gallery-collection-head .collection-archive-button {
  border-color: var(--color-line);
  color: var(--status-problem, #8c2c22);
}
.gallery-collection-head .collection-archive-button:hover:not(:disabled) {
  background: var(--status-problem-soft, #fae4e1);
  color: var(--status-problem, #8c2c22);
}
.gallery-collection-head .icon-button .icon {
  width: 19px;
  height: 19px;
}
.collection-rename {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-block-end: 4px;
}
.collection-rename input {
  flex: 1 1 14rem;
  min-inline-size: 0;
  font-size: 18px;
  font-weight: 650;
}
/* I bildspel: the screens whose slideshows show a material. */
.media-usage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--area-screens, var(--color-accent));
  font-size: 13px;
  font-weight: 600;
}
.media-usage .icon {
  flex: none;
  width: 15px;
  height: 15px;
}
/* Each screen links to its Bildspel tab, where the image can be taken out. */
.media-usage {
  flex-wrap: wrap;
}
.media-usage a,
.media-usage-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.media-usage-links {
  margin: 6px 0 0;
  font-weight: 600;
}
.gallery-empty-collection {
  padding: 28px 20px;
  border: 1.5px dashed var(--line-soft, #e8e8f1);
  border-radius: 14px;
  text-align: center;
}
.gallery-empty-collection p {
  margin: 4px auto;
  max-width: 34rem;
}
.gallery-search-results {
  margin-block-start: 8px;
}

/* Välj samlingar: a new collection can be made and used without leaving the dialog. */
.collection-inline-create {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-line);
}
.collection-inline-create > label {
  display: block;
  margin-block-end: 0.35rem;
  font-weight: 600;
}
.collection-inline-create > div {
  display: flex;
  gap: 0.5rem;
}
.collection-inline-create > div {
  flex-wrap: wrap;
}
.collection-inline-create input {
  flex: 1 1 12rem;
  min-width: 0;
}
.collection-inline-create button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.collection-inline-create .icon {
  width: 16px;
  height: 16px;
}

/* The AI studio after an order: where the image will appear. */
.ai-ordered h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 0;
}
.ai-ordered h2 .icon {
  width: 20px;
  height: 20px;
  color: var(--area-sales, #2d6a3e);
}
.ai-ordered-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.ai-ordered-actions > :is(a, button) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-ordered-actions .icon {
  width: 16px;
  height: 16px;
}
.collection-search {
  flex: 1 1 20rem;
  max-width: 38rem;
  margin-block: 0.75rem;
}
.collection-search > label {
  display: block;
  margin-block-end: 0.35rem;
}
.collection-search > div {
  display: flex;
  gap: 0.5rem;
}
.collection-search input {
  min-width: 0;
  flex: 1;
  width: 100%;
}
.collection-dialog {
  max-width: min(42rem, calc(100vw - 2rem));
}
.collection-dialog fieldset {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.collection-dialog input:not([type='checkbox'], [type='radio']) {
  width: 100%;
  min-width: 0;
  max-inline-size: none;
  font-size: 1rem;
}
.collection-dialog .checkbox,
.collection-membership label {
  min-height: 44px;
  overflow-wrap: anywhere;
}
.collection-dialog:modal {
  overscroll-behavior: contain;
}
.collection-dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
}
.collection-membership {
  list-style: none;
  padding: 0;
  margin-block: 1rem;
}
.collection-membership li + li {
  border-block-start: 1px solid var(--color-line);
}
.gallery-upload-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 600px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
  .collection-inline-create > div {
    flex-wrap: wrap;
  }
  .collection-search > div {
    flex-wrap: wrap;
  }
  .collection-search > div input {
    flex-basis: 100%;
  }
  .collection-dialog {
    padding: 1rem;
  }
}

.collection-plan-dialog {
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 1.25rem;
  width: min(64rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.collection-plan-dialog footer {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.collection-plan-dialog header > div {
  min-width: 0;
}
.collection-plan-dialog h2 {
  margin-block-start: 0;
  font-size: 1.35rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.collection-plan-dialog select {
  width: 100%;
  font-size: 1rem;
  min-width: 0;
}
.collection-plan-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin-block: 1rem;
}
.collection-plan-format {
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  min-width: 0;
}
.collection-plan-format h3 {
  margin-block-start: 0;
}
.collection-plan-format p {
  overflow-wrap: anywhere;
}
.collection-plan-format img {
  display: block;
  width: 100%;
  height: 15rem;
  object-fit: contain;
  background: var(--surface-muted);
  margin-block-end: 1rem;
}
.collection-plan-format label {
  display: block;
  margin-block-end: 0.35rem;
}
.booking-collection-material > button + button {
  margin-block-start: 0.5rem;
}
.collection-plan-dialog header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
}
.collection-plan-format > a {
  display: inline-block;
  margin-block-end: 1rem;
}

/* Search in a collection, Filter and the list/grid choice share one row; the filters open on a row of their own. */
.gallery-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.gallery-tools .gallery-filters {
  display: flex;
  flex: 1 1 20rem;
  min-width: 0;
  max-width: 30rem;
  margin: 0;
}
.gallery-tools .gallery-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.gallery-tools .search-field {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}
.gallery-tools .search-field .icon {
  position: absolute;
  inset-inline-start: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}
.gallery-tools .search-field input {
  width: 100%;
  min-width: 0;
  padding-inline-start: 36px;
  font-size: 1rem;
}
.gallery-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gallery-filter-toggle .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.gallery-filter-toggle[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}
.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.gallery-filter-fields {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
}
.gallery-filter-fields[hidden] {
  display: none;
}
.gallery-filter-fields > label {
  flex: 0 1 13rem;
}
.gallery-filter-fields > .checkbox {
  flex: 0 1 auto;
  padding: 12px 0;
}
/* List or grid stays at the end of the row, beside Filter on a phone. */
.gallery-tools > .gallery-view {
  margin: 0 0 0 auto;
}
/* Sortera sits beside Filter; its label is read, not shown. */
.gallery-sort select {
  width: auto;
  min-width: 0;
}
/*
 * Denser material (13 November): the tile and row rules in pages.css load after this file, so these start from the
 * gallery element to take precedence. A name shows two lines in full and is then cut, with the whole name in its
 * title and in the inspection dialog.
 */
sv-media-gallery :is(.media-row-text, .media-tile-text) strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
sv-media-gallery .media-tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr));
  gap: 18px 14px;
}
sv-media-gallery .media-tile {
  position: relative;
  align-content: start;
  gap: 6px 2px;
  container: media-tile / inline-size;
}
/* Most material is 16:9 or 16:10, so a lower frame wastes less height; other shapes are shown whole inside it. */
sv-media-gallery .media-tile-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}
/* The ⋯ beside the name is smaller in a tile, so the name keeps its width, and centred on the name's first line. */
sv-media-gallery .media-tiles:not(.picking) .media-tile .media-row-actions {
  margin-block-start: -7px;
}
/* Choosing for a screen: Välj and its scaling note get the tile's width under the formats, so the name keeps its own. */
sv-media-gallery .media-tiles.picking .media-tile .media-tile-text {
  grid-column: 1 / -1;
}
sv-media-gallery .media-tiles.picking .media-tile .media-row-actions {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-content: space-between;
}
sv-media-gallery .media-tile .media-actions-menu > summary {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
}
/* In a narrow tile, as in two columns on a phone, ⋯ sits in the picture's corner and the name has the whole width. */
@container media-tile (inline-size < 180px) {
  /* A positioned grid item is placed in its grid area: the picture's row. */
  sv-media-gallery .media-tiles:not(.picking) .media-tile .media-row-actions {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: start;
    justify-self: end;
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    margin: 0;
  }
  sv-media-gallery .media-tiles:not(.picking) .media-tile .media-actions-menu > summary {
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
    box-shadow: 0 1px 3px rgb(20 24 40 / 0.25);
  }
  sv-media-gallery .media-tiles:not(.picking) .media-tile .media-tile-text {
    grid-column: 1 / -1;
  }
}
sv-media-gallery .media-tile .media-formats {
  gap: 4px;
}
/* A tile's chips are compact: the pixels, or a short dashed Saknas with the missing format's shape. */
sv-media-gallery .media-tile .format-chip {
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 13px;
  font-size: 11.5px;
}
sv-media-gallery .media-tile .format-chip.format-missing {
  gap: 4px;
  padding: 1.5px 6.5px;
}
sv-media-gallery .format-chip.format-missing .format-shape {
  border-style: dashed;
}
/* In the list the formats take the width they need, so a material's chips stay on one line beside its name. */
sv-media-gallery .media-rows:not(.picking) .media-row {
  grid-template-columns: 72px minmax(10rem, 1fr) minmax(0, max-content) auto;
}
sv-media-gallery .media-row .format-chip {
  min-height: 28px;
  padding-block: 3px;
}
sv-media-gallery .media-row .format-chip.format-missing {
  padding-block: 1.5px;
}
sv-media-gallery :is(.media-tiles, .media-rows) ~ button.secondary {
  margin-block-start: 16px;
}
@media (max-width: 740px) {
  sv-media-gallery .media-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }
  sv-media-gallery .media-rows:not(.picking) .media-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }
  sv-media-gallery .media-tile .format-chip {
    padding-inline: 7px;
  }
}
@media (pointer: coarse) {
  sv-media-gallery .media-tile .media-actions-menu > summary {
    inline-size: 40px;
    block-size: 40px;
  }
}
/* On the grid the upload form also asks where the image goes. */
.gallery-upload select {
  width: 100%;
}
/* The inspected image's collections, and the way to change them. */
.media-detail-collections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 14px;
  color: var(--color-muted);
  font-size: 13px;
}
.media-detail-collections .text-action {
  margin: 0;
  padding: 4px 0;
}
.media-detail-collections .icon {
  width: 16px;
  height: 16px;
  flex: none;
}
/* A name is saved with its own button; Arkivera or Återställ is a separate action below a line. */
.collection-dialog fieldset > button {
  justify-self: start;
}
.media-detail-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.media-detail-name {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.media-detail-dialog .media-detail-name label {
  flex: 0 1 36rem;
  min-width: 0;
  margin: 0;
}
.media-detail-name input {
  width: 100%;
}
.archive-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-line);
}
.archive-action .hint {
  flex: 1 1 260px;
  margin: 0;
}
.archive-action button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.archive-action .icon {
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-filter-toggle .icon,
  .collection-card > img,
  .collection-placeholder {
    transition: none;
  }
}