/* === Picker modal sizing === */
.files-picker-dialog {
  max-width: 90vw;
  width: 1200px;
  height: calc(100vh - 4rem);
  margin: 2rem auto;
}

.files-picker-dialog .modal-content {
  height: 100%;
}

@media (max-width: 768px) {
  .files-picker-dialog {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    margin: 0;
  }
}

/* === Two-pane shell === */
.files-picker-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  min-height: 480px;
}

@media (max-width: 768px) {
  .files-picker-shell {
    grid-template-columns: 1fr;
  }
  .files-picker-folders {
    display: none;
  }
}

.files-picker-folders {
  border-right: 1px solid var(--bs-border-color, #e5e7eb);
  background: #f9fafb;
  overflow-y: auto;
}

.files-picker-folders-header {
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}

.files-picker-folder-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.files-picker-folder-list .folder-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-picker-folder-list .folder-item:hover {
  background: rgba(99, 102, 241, 0.06);
}

.files-picker-folder-list .folder-item.is-active {
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
  font-weight: 500;
}

.files-picker-main {
  padding: 12px 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.files-picker-toolbar {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
  margin-bottom: 8px;
}

/* === Card grid === */
.files-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  align-content: start;
  flex: 1 1 auto;
}

.files-picker-card {
  position: relative;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  display: flex;
  flex-direction: column;
}

.files-picker-card:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

.files-picker-card.is-selected {
  border-color: var(--bs-primary, #03378b);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.4);
}

.files-picker-card .thumb {
  background: #f3f4f6;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.files-picker-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.files-picker-card .thumb .placeholder {
  font-size: 2rem;
  color: #9ca3af;
}

.files-picker-card .meta {
  padding: 6px 8px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.files-picker-card .meta .filename {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.files-picker-card .meta .size {
  color: #6b7280;
}

.files-picker-card .check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: transparent;
}

.files-picker-card.is-selected .check {
  background: var(--bs-primary, #03378b);
  border-color: var(--bs-primary, #03378b);
  color: #fff;
}

/* === Drop zone (inline below the grid) === */
.files-picker-dropzone {
  margin-top: 12px;
  padding: 14px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  text-align: center;
  background: #f9fafb;
  transition: border-color 120ms ease, background 120ms ease;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.files-picker-dropzone.is-dragging {
  border-color: var(--bs-primary, #03378b);
  background: rgba(99, 102, 241, 0.06);
}

.files-picker-progress {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #4b5563;
}

.files-picker-progress .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.files-picker-progress .bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.files-picker-progress .bar > div {
  height: 100%;
  background: var(--bs-primary, #03378b);
  width: 0%;
  transition: width 120ms ease;
}

/* === Inline media field on forms === */
/*
 * Cubane wraps every non-special field in `<div class="input-group">`. The
 * input-group is a flex container expecting an input child. Our widget is a
 * full card, so neutralise the input-group's flex constraints and let the
 * card take the full row width — this avoids the "small button + empty white
 * column" layout glitch.
 */
.input-group:has(> .media-picker-field) {
  display: block;
  border: 0;
  background: transparent;
}

.media-picker-field {
  width: 100%;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f9fafb;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  transition: border-color 120ms ease, background 120ms ease;
}

.media-picker-field:hover {
  border-color: #6366f1;
  background: #f5f3ff;
}

.media-picker-field .media-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 6px 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.media-picker-field .media-picker-empty > i {
  font-size: 1.5rem;
  color: #9ca3af;
}

/* Icon + label inside the picker buttons sit on one centered line. */
.media-picker-field .media-picker-open,
.media-picker-field .media-picker-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.media-picker-field .media-picker-thumbs {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.media-picker-field .media-picker-change {
  display: none;
  align-self: flex-start;
}

.media-picker-field.has-selection {
  border-style: solid;
  background: #fff;
}

.media-picker-field.has-selection .media-picker-empty {
  display: none;
}

.media-picker-field.has-selection .media-picker-thumbs {
  display: flex;
}

.media-picker-field.has-selection .media-picker-change {
  display: inline-flex;
}

.media-picker-field .media-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  font-size: 0.85rem;
  max-width: 100%;
}

.media-picker-field .media-picker-chip img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
}

.media-picker-field .media-picker-chip i.fas {
  font-size: 1.4rem;
  color: #6b7280;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-picker-field .media-picker-chip .filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.media-picker-field .media-picker-chip .remove {
  cursor: pointer;
  color: #6b7280;
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 4px;
  padding: 0 4px;
}

.media-picker-field .media-picker-chip .remove:hover {
  color: #dc2626;
}

/* === Listing grid view (MediaAsset) === */
.files-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.files-listing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.files-listing-card:hover {
  border-color: var(--bs-primary, #03378b);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 3, 55, 139), 0.08);
  color: inherit;
}

.files-listing-card-thumb {
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.files-listing-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.files-listing-card-thumb i {
  font-size: 2rem;
  color: #9ca3af;
}

.files-listing-card-meta {
  padding: 8px 10px;
}

.files-listing-card-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.files-listing-card-sub {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

/* === Folder tree view (MediaFolder) === */
.files-folder-tree {
  list-style: none;
  margin: 16px 0;
  padding-left: 0;
}

.files-folder-tree ul.files-folder-tree {
  margin: 0;
  padding-left: 24px;
  border-left: 1px dashed #d1d5db;
}

.files-folder-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.9rem;
}

.files-folder-tree-row a {
  text-decoration: none;
  color: inherit;
}

.files-folder-tree-row a:hover {
  color: var(--bs-primary, #03378b);
}

/* === Listing toolbar layout ===
   Cubane's listing template wraps "Show N entries" and the search form
   in two bootstrap columns. Our JS hoists the search form into the left
   column and hides the right one so all controls share a single
   flex-wrap row. This rule lays them out and pins the search to the
   far right when there's room.
*/
.files-listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

/* Push the search form to the right edge of the toolbar row. */
.files-listing-toolbar > .files-listing-search {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}
.files-listing-toolbar > .files-listing-search label {
  margin: 0;
}
.files-listing-toolbar > .files-listing-search input[type="search"] {
  min-width: 12rem;
}

/* Visual separator between the view toggle and the archive filter. */
.files-listing-toggle + .files-archive-filter {
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--bs-border-color, #e5e7eb);
}

/* On narrow viewports everything wraps; the inline divider then just
   looks like a stray vertical bar, so we drop it and let the search
   take its own row. */
@media (max-width: 767.98px) {
  .files-listing-toggle + .files-archive-filter {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .files-listing-toolbar > .files-listing-search {
    margin-left: 0;
    flex-basis: 100%;
  }
  .files-listing-toolbar > .files-listing-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .files-listing-toolbar > .ms-2 { margin-left: 0 !important; }
}

/* === Folders view (MediaAsset listing) === */
.files-folders-view {
  padding: 8px 0 24px;
}

.files-folders-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
  margin-bottom: 12px;
}

.files-folders-breadcrumb {
  font-size: 0.95rem;
  color: inherit;
}
.files-folders-breadcrumb a,
.files-folders-breadcrumb a:visited {
  color: inherit;
  text-decoration: none;
}
.files-folders-breadcrumb a:hover {
  color: var(--bs-primary, #03378b);
  text-decoration: underline;
}
.files-folders-breadcrumb-sep { color: #9ca3af; }


.files-folders-stats {
  font-size: 0.85rem;
  color: #4b5563;
}

.files-folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-content: start;
}

.files-folders-empty {
  grid-column: 1 / -1;
  padding: 24px 0;
  text-align: center;
}

.files-folder-tile {
  position: relative; /* anchor for the hover rename/trash controls */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  min-height: 78px;
}
.files-folder-tile:hover {
  border-color: var(--bs-primary, #03378b);
  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb, 3, 55, 139), 0.08);
}
.files-folder-tile.is-drop-target {
  border-color: #16a34a;
  background: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
.files-folder-tile.is-up { background: #f9fafb; }
.files-folder-tile.is-unfiled { background: #fff7ed; }
.files-folder-tile-icon i {
  font-size: 1.6rem;
  color: #f59e0b;
}
.files-folder-tile.is-up .files-folder-tile-icon i { color: #6b7280; }
.files-folder-tile.is-unfiled .files-folder-tile-icon i { color: #c2410c; }
.files-folder-tile-meta { flex: 1 1 auto; min-width: 0; }
.files-folder-tile-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-folder-tile-sub {
  color: #6b7280;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Folder management (new / rename / trash) === */
.files-folders-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.files-folders-newform {
  display: flex;
  align-items: center;
  gap: 6px;
}
.files-folders-newform input { width: 220px; }

.files-folders-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.875rem;
}
.files-folders-notice-close {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.files-folder-tile-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  gap: 4px;
}
.files-folder-tile:hover .files-folder-tile-actions,
.files-folder-tile:focus-within .files-folder-tile-actions {
  display: flex;
}
.files-folder-tile-action {
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 4px;
  background: #fff;
  color: #6b7280;
  font-size: 0.7rem;
  line-height: 1;
  padding: 4px 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.files-folder-tile-action:hover {
  color: var(--bs-primary, #03378b);
  border-color: var(--bs-primary, #03378b);
}
.files-folder-tile-action.is-trash:hover {
  color: #dc2626;
  border-color: #dc2626;
}
.files-folder-tile-action.is-armed,
.files-folder-tile-action.is-armed:hover {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

.files-folder-rename-form { margin-bottom: 2px; }
.files-folder-rename-form input {
  font-size: 0.85rem;
  padding: 2px 6px;
  height: auto;
}

.files-asset-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: grab;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.files-asset-tile:hover {
  border-color: var(--bs-primary, #03378b);
  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb, 3, 55, 139), 0.08);
}
.files-asset-tile.is-dragging { opacity: 0.5; cursor: grabbing; }
.files-asset-tile-thumb {
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.files-asset-tile-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.files-asset-tile-thumb i {
  font-size: 2rem;
  color: #9ca3af;
}
.files-asset-tile-meta { padding: 6px 10px 8px; }
.files-asset-tile-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-asset-tile-sub { font-size: 0.75rem; }

/* === Choices.js multi-select height alignment === */
/* By default Choices.js (used for tag inputs) renders taller than Bootstrap
   form-controls. Force min-height so rows containing tag pickers line up
   with rows containing text inputs. */
.choices__inner {
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
}
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-one"] .choices__inner {
  background-color: #fff;
}
.choices__list--multiple .choices__item {
  margin-bottom: 0;
}

/* === Image lightbox (click a thumbnail to enlarge) === */

/* Affordance: image thumbnails that open the lightbox. */
.files-listing-card-thumb.is-zoomable,
.files-asset-tile-thumb.is-zoomable {
  cursor: zoom-in;
  position: relative;
}
.files-listing-card-thumb.is-zoomable::after,
.files-asset-tile-thumb.is-zoomable::after {
  content: "\f00e"; /* fa-search-plus */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(17, 24, 39, 0.55);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.files-listing-card-thumb.is-zoomable:hover::after,
.files-asset-tile-thumb.is-zoomable:hover::after {
  opacity: 1;
}

.files-lightbox { position: fixed; inset: 0; z-index: 1080; display: none; }
.files-lightbox.is-open { display: block; }
.files-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.78);
}
.files-lightbox-dialog {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
  pointer-events: none; /* clicks fall through to the backdrop to close */
}
.files-lightbox-stage {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: 92vw; max-height: 80vh;
}
.files-lightbox-img {
  max-width: 92vw; max-height: 80vh;
  object-fit: contain;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.files-lightbox.is-loading .files-lightbox-img { opacity: 0; }
.files-lightbox-frame {
  border: 0;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  width: min(900px, 92vw);
  height: 85vh;
}
/* PDFs need a taller stage than the 80vh image cap. */
.files-lightbox.is-pdf .files-lightbox-stage {
  max-width: 92vw;
  max-height: 86vh;
}
/* DXF drawings render into a dxf-viewer canvas; it needs an explicitly-sized
   host (autoResize watches this container) and a taller stage like PDFs. */
.files-lightbox.is-dxf .files-lightbox-stage {
  max-width: 92vw;
  max-height: 86vh;
}
.files-lightbox-dxf {
  position: relative;
  width: min(1000px, 92vw);
  height: 85vh;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.files-lightbox-dxf canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.files-lightbox-spinner {
  display: none;
  position: absolute;
  width: 2.5rem; height: 2.5rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: files-lightbox-spin 0.7s linear infinite;
}
.files-lightbox.is-loading .files-lightbox-spinner { display: block; }
@keyframes files-lightbox-spin { to { transform: rotate(360deg); } }
.files-lightbox-error { color: #fff; font-size: 0.95rem; }
.files-lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  pointer-events: auto;
  background: none; border: 0;
  color: #fff; font-size: 2.4rem; line-height: 1;
  cursor: pointer; opacity: 0.85;
}
.files-lightbox-close:hover { opacity: 1; }
.files-lightbox-bar {
  pointer-events: auto;
  margin-top: 1rem;
  display: flex; gap: 0.5rem; align-items: center;
  max-width: 92vw; color: #fff;
}
.files-lightbox-name {
  font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 50vw;
}
.files-lightbox-actions a {
  color: #cfe2ff; margin-left: 1rem;
  font-size: 0.85rem; text-decoration: none;
}
.files-lightbox-actions a:hover { text-decoration: underline; }
body.files-lightbox-open { overflow: hidden; }