/* LIBRARY BROWSER (public/LibraryBrowser.js) - the room's Library (in its properties panel) and the ordering page's
   cabinet pop-up. One component, two hosts: everything here is scoped to .lib-browser, and only the
   two host rules at the bottom know where it sits. */

.lib-browser {
    --lib-rail-width: 120px;
    --lib-tile-width: 130px;
    --lib-tile-image: 120px;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--gap);
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    font-size: 0.8rem;
}

.lib-head {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding-bottom: calc(var(--gap) / 2);
    border-bottom: var(--default-border);
}
.lib-title { font-weight: bold; white-space: nowrap; }
.lib-search {
    flex: 1;
    min-width: 0;
    border: var(--default-border);
    border-radius: var(--small-border-radius);
    padding: 4px 8px;
}
.lib-search:focus { outline: 1px solid var(--primary-color); }
.lib-brand { max-width: 130px; }
.lib-close { cursor: pointer; line-height: 1; }

.lib-body {
    display: grid;
    grid-template-columns: var(--lib-rail-width) minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0;
}

.lib-rail {
    overflow-y: auto;
    min-height: 0;
    border-right: var(--default-border);
    padding-right: calc(var(--gap) / 2);
}
.lib-rail-item {
    padding: 4px 6px;
    border-radius: var(--small-border-radius);
    cursor: pointer;
    user-select: none;
}
.lib-rail-item.sub { padding-left: 16px; color: var(--grey); }
.lib-rail-item:hover { background-color: var(--light-grey); }
.lib-rail-item.selected { background-color: var(--selected); color: var(--black); font-weight: bold; }

.lib-main { overflow-y: auto; min-height: 0; }

.lib-section {
    margin: var(--gap) 0 calc(var(--gap) / 2) 0;
    text-transform: uppercase;
}
.lib-main > .lib-grid > .lib-section:first-child,
.lib-recent > .lib-section:first-child { margin-top: 0; }

.lib-recent { padding-bottom: var(--gap); margin-bottom: var(--gap); border-bottom: var(--default-border); }

.lib-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--lib-tile-width), 1fr));
    gap: var(--gap);
}
.lib-tiles.small { --lib-tile-width: 80px; --lib-tile-image: 60px; }

/* A tile is a <button>, and styles.css sizes every button (width/height: var(--button-*)),
   rounds one corner and upper-cases its text - all undone here, or the tiles squash to a strip,
   overlap, and the picture shrinks to nothing. */
.lib-tile {
    width: auto;
    height: auto;
    min-width: 0;
    text-transform: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--light-grey);
    border-radius: var(--small-border-radius);
    background-color: var(--white);
    cursor: pointer;
    font: inherit;
    text-align: center;
}
.lib-tile:hover { border-color: var(--primary-color); }
.lib-tile:focus-visible { outline: 2px solid var(--primary-color); }

.lib-tile-img {
    width: 100%;
    height: var(--lib-tile-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.lib-tile-img.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-grey);
    color: var(--grey);
    font-size: 1.2rem;
    font-weight: bold;
}
.lib-tile-name { font-weight: bold; word-break: break-word; }
.lib-tile-desc {
    color: var(--grey);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lib-tiles.small .lib-tile-desc { display: none; }

.lib-mine {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0 4px;
    border-radius: var(--small-border-radius);
    background-color: var(--primary-color);
    color: var(--black);
    font-size: 0.65rem;
    font-weight: bold;
}

.lib-empty { color: var(--grey); text-align: center; margin-top: 24px; }

/* the header's "add to the library" button and a tile's edit / delete buttons */
.lib-add {
    /* a <button> too - see .lib-tile */
    width: auto;
    height: auto;
    flex: 0 0 auto;
    text-transform: none;
    border: var(--default-border);
    border-radius: var(--small-border-radius);
    background-color: var(--white);
    cursor: pointer;
    font-weight: bold;
    padding: 0 8px;
}
.lib-add:hover { border-color: var(--primary-color); }
.lib-tile-actions {
    position: absolute;
    top: 4px;
    left: 4px;
    display: none;
    gap: 2px;
}
.lib-tile:hover .lib-tile-actions { display: flex; }
.lib-tile-action {
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: var(--small-border-radius);
    background-color: var(--white);
    border: var(--default-border);
    font-size: 0.75rem;
    text-align: center;
}
.lib-tile-action:hover { border-color: var(--red); color: var(--red); }

/* the library object form (RoomObjects.js, editLibraryObject) */
.lib-form {
    position: absolute;
    top: var(--editor-margin);
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 2 * var(--editor-margin)));
    max-height: calc(100% - 2 * var(--editor-margin));
    overflow-y: auto;
    box-sizing: border-box;
    padding: calc(var(--gap) * 2);
    font-size: 0.85rem;
}
.lib-form-title { margin-top: 0; }
.lib-form-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--gap);
    align-items: center;
}
.lib-form-grid input:not([type="checkbox"]):not([type="color"]), .lib-form-grid select { width: 100%; box-sizing: border-box; }
.lib-form-grid input[type="checkbox"], .lib-form-grid input[type="color"] { justify-self: start; }
/* a size its model sets (RoomObjects.js, editLibraryObject) */
.lib-form-grid input[readonly] { background-color: var(--light-grey); color: var(--grey); }
.lib-form-note { color: var(--grey); }
/* a row the full width of the grid - the built window's pane editor (RoomObjects.js, libraryGlazingEditor) */
.lib-form-wide { grid-column: 1 / -1; }
.lib-glazing-view { display: block; width: 100%; max-height: 260px; background-color: var(--light-grey); }
.lib-glazing-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin-top: var(--gap); }
.lib-form-grid .lib-glazing-tools select { width: auto; }
.lib-form-grid .lib-glazing-tools input:not([type="checkbox"]):not([type="color"]) { width: 80px; }
.lib-form-buttons { display: flex; justify-content: flex-end; gap: var(--gap); }

/* ---- host: the ordering page's pop-up (LibraryBrowser.choose) ---- */
/* Centred on all four sides by inset 0 + margin auto, so it stays on screen at any window size.
   Its own width and height must be set here: .lib-browser's 100% would otherwise win, and the box
   would run off the right and bottom edges by the margin. */
.lib-modal-box {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(960px, calc(100% - 2 * var(--editor-margin)));
    height: min(760px, calc(100% - 2 * var(--editor-margin)));
    padding: var(--gap) calc(var(--gap) * 2);
    background-color: var(--white);
    box-sizing: border-box;
}
.lib-modal-box.lib-browser {
    --lib-rail-width: 160px;
    --lib-tile-width: 170px;
    --lib-tile-image: 150px;
}

/* ---- host: the room's properties panel (views/OrderingPage.php, #re-library) ----
   It shares the panel with the selected object's properties (RoomEditor.showLibraryInPanel), and
   the tabs above say which is showing. The
   panel starts narrow, so the category list is narrower here; widen the panel with its resizer
   for more tiles a row. min-height 0 lets it shrink into the panel's 1fr row and scroll inside. */
#re-library {
    min-height: 0;
    overflow: hidden;
}
#re-library > .lib-browser {
    --lib-rail-width: 100px;
}

/* the Library / Properties tabs over it (RoomEditor.initPanelTabs) - styles.css's .tab, smaller */
#re-panel-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--gap);
    border: var(--default-border);
    border-radius: var(--small-border-radius);
    overflow: hidden;
}
#re-panel-tabs .tab { height: 28px; font-size: 0.8rem; user-select: none; }
#re-panel-tabs .tab.disabled { opacity: 0.4; cursor: default; }

/* the panel's resizer (RoomEditor.initPanelResizer) - a strip over the gap on its right edge */
#re-control-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--gap) / 2 - 4px);
    width: 8px;
    cursor: col-resize;
    z-index: 1;
    touch-action: none;
}
#re-control-resizer:hover, #re-control-resizer.dragging { background-color: var(--primary-color); opacity: 0.5; }