/*
 * SCHILLER Media Previews — FileBird document library (front end).
 *
 * This is the folder grid on a page like /marketing-materials/, which is different markup from the
 * wp-admin sidebar. Here FileBird is generous: each folder card carries its own name in an
 * attribute, so everything below is plain CSS with no JavaScript at all.
 *
 *   <li class="fbdl-nested-folders-item" data-label="Classen" data-folder-id="2">
 *     <i><svg>…folder glyph…</svg></i>
 *     <div class="fbdl-folder-tooltip-trigger"><span …>Classen</span></div>
 *     <span class="fbdl-nested-folders-item-counter">1</span>
 *   </li>
 *
 * So the convention is an attribute match on the folder name, case-insensitively via the `i` flag:
 *
 *     #filebird-document-library .fbdl-nested-folders-item[data-label="hang tags" i] > i { … }
 *
 * Two things to keep in mind, both learned the hard way against the live page:
 *
 * 1. Every selector MUST start with #filebird-document-library. FileBird ships a Tailwind preflight
 *    scoped to that ID which sets `svg { display: block }`, and an ID beats a class-only selector —
 *    without the prefix the folder glyph refuses to hide and you get the logo behind it. Adding the
 *    ID outranks it cleanly, so nothing here needs !important.
 * 2. You MUST set an explicit height on the <i>. FileBird gives it a width via `flex: 0 0 20px`,
 *    but its height comes from the svg inside it -- so the moment you hide that glyph the box
 *    collapses to 20x0 and the background image has nowhere to paint. Width needs no override
 *    (the flex-basis already wins on the main axis and 20px is what we want anyway).
 *
 * Brand logos are added separately as inline CSS by includes/document-library.php, because the file
 * paths come from PHP (and stay filterable). Icon images come from folder-icons.css.
 */

/* -------------------------------------------------------------- icon by name */

/*
 * TO ADD AN ICON: copy one block, change the data-label and the variable. Keep both declarations
 * together — hiding the glyph without supplying a background leaves the card with no icon at all.
 */

#filebird-document-library .fbdl-nested-folders-item[data-label="marketing materials" i] > i > svg { display: none; }
#filebird-document-library .fbdl-nested-folders-item[data-label="marketing materials" i] > i {
  background: var(--sgc-icon-marketing) center / contain no-repeat;
  height: 20px; /* required: the svg supplied the height, and it is now hidden */
}

#filebird-document-library .fbdl-nested-folders-item[data-label="logos" i] > i > svg,
#filebird-document-library .fbdl-nested-folders-item[data-label="logo's" i] > i > svg { display: none; }
#filebird-document-library .fbdl-nested-folders-item[data-label="logos" i] > i,
#filebird-document-library .fbdl-nested-folders-item[data-label="logo's" i] > i {
  background: var(--sgc-icon-image) center / contain no-repeat;
  height: 20px; /* required: the svg supplied the height, and it is now hidden */
}

#filebird-document-library .fbdl-nested-folders-item[data-label="hang tags" i] > i > svg { display: none; }
#filebird-document-library .fbdl-nested-folders-item[data-label="hang tags" i] > i {
  background: var(--sgc-icon-tag) center / contain no-repeat;
  height: 20px; /* required: the svg supplied the height, and it is now hidden */
}

#filebird-document-library .fbdl-nested-folders-item[data-label="examples of dethatching" i] > i > svg { display: none; }
#filebird-document-library .fbdl-nested-folders-item[data-label="examples of dethatching" i] > i {
  background: var(--sgc-icon-camera) center / contain no-repeat;
  height: 20px; /* required: the svg supplied the height, and it is now hidden */
}

/* ----------------------------------------------------------------- card polish */

/* Lift the card on hover instead of leaving it inert, and give the count pill some contrast. */
#filebird-document-library .fbdl-nested-folders-item {
  transition: box-shadow 120ms ease-out, transform 120ms ease-out;
}
#filebird-document-library .fbdl-nested-folders-item:hover {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}
#filebird-document-library .fbdl-nested-folders-item-counter {
  font-variant-numeric: tabular-nums;
}