/* luxtools plugin styles
 * Keep this minimal and scoped to the plugin container.
 */

/* DokuWiki often highlights rows on hover. Avoid highlighting header rows. */
div.luxtools-plugin table thead tr:hover > * {
    background-color: @ini_background_alt !important;
}


/* "Open Location" row above the header should be visually smaller. */
div.luxtools-plugin table thead tr.luxtools-openlocation-row td {
    font-size: 80%;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
div.luxtools-plugin table thead tr.luxtools-openlocation-row:hover td {
    background-color: @ini_background !important;
}

/* Ensure directories use a dedicated folder icon.
 * DokuWiki's icon CSS is generated primarily for file extensions; a custom
 * mf_folder class may otherwise fall back to the generic file icon.
 */
div.luxtools-plugin a.media.mediafile.mf_folder,
div.luxtools-plugin a.mediafile.mf_folder {
    background-image: url(images/folder.svg) !important;
}

/* DokuWiki templates often style .media links with higher specificity.
 * Ensure our custom color always wins.
 */
div.luxtools-plugin a.luxtools-open,
div.luxtools-plugin a.luxtools-open:visited,
a.luxtools-open,
a.luxtools-open:visited {
    color: #b57d35 !important;
}

/* Standalone {{open>...}} links are not wrapped in div.luxtools-plugin. */
a.luxtools-open.media.mediafile.mf_folder {
    background-image: url(images/open-folder.svg) !important;
}

/* Muted empty-state message when a listing has no results. */
div.luxtools-plugin .luxtools-empty {
    opacity: 0.65;
    font-style: italic;
    padding: 0.25em 0;
}

/* Image gallery spacing. */
div.luxtools-gallery {
    padding-bottom: 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}

div.luxtools-gallery a.media.luxtools-gallery-item {
    display: inline-block;
    position: relative;
    border: 1px solid @ini_border;
    background-color: @ini_background_alt;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
}

div.luxtools-gallery a.media.luxtools-gallery-item:hover,
div.luxtools-gallery a.media.luxtools-gallery-item:focus {
    border-color: @ini_text;
}

div.luxtools-gallery img.luxtools-thumb {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* Filename overlay (single line, muted). */
div.luxtools-gallery .luxtools-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0.75em;
    line-height: 1.3;
    padding: 0.25em 0.4em;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Scratchpad */
div.luxtools-scratchpad {
    position: relative;
}

/* Template hook: stable wrapper around scratchpad content + controls. */
div.luxtools-scratchpad .luxtools-scratchpad-frame {
    position: relative;
}

div.luxtools-scratchpad .luxtools-scratchpad-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4em;
    margin-bottom: 0.2em;
}

div.luxtools-scratchpad .luxtools-scratchpad-name {
    flex: 0 1 auto;
    min-width: 0;
    opacity: 0.65;
    font-size: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.luxtools-scratchpad a.luxtools-scratchpad-edit {
    text-decoration: none;
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    min-height: 2em;
    line-height: 1;
    font-style: italic;
    color: inherit;
}
div.luxtools-scratchpad a.luxtools-scratchpad-edit:hover,
div.luxtools-scratchpad a.luxtools-scratchpad-edit:focus {
    opacity: 1;
}

/* Edit mode: replace rendered view with editor. */
div.luxtools-scratchpad.is-editing .luxtools-scratchpad-view {
    display: none;
}

div.luxtools-scratchpad.is-editing .luxtools-scratchpad-bar {
    display: none;
}

div.luxtools-scratchpad .luxtools-scratchpad-editor {
    margin-top: 0.4em;
}

div.luxtools-scratchpad textarea.luxtools-scratchpad-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 8em;
}

div.luxtools-scratchpad .luxtools-scratchpad-actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.35em;
}

div.luxtools-scratchpad .luxtools-scratchpad-status {
    opacity: 0.8;
    font-size: 90%;
}

div.luxtools-scratchpad .luxtools-scratchpad-error {
    opacity: 0.8;
    font-style: italic;
}

/* Admin: settings page form layout */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    text-align: left;
}

div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > span {
    flex: 0 0 35%;
    text-align: left;
    margin: 0;
    padding-top: 0.2em;
}

/* The admin page markup uses <br/> to create a new line; in this layout we keep
 * label + control in one row.
 */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
    display: none;
}

div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
    flex: 1 1 auto;
    margin-left: auto;
    width: auto;
    max-width: 65%;
    box-sizing: border-box;
    text-align: left;
}

/* Dropdowns: don't stretch; size to content, but keep them on the right. */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
    flex: 0 0 auto;
    margin-left: 0;
    width: max-content;
    max-width: 65%;
}

/* Checkbox controls: keep them in the control column, left-aligned. */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block input[type="checkbox"] {
    margin-left: 0;
    align-self: center;
}

/* On narrow screens, stack label and control to keep things readable. */
@media (max-width: 600px) {
    div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block {
        display: block;
    }

    div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
        display: block;
    }

    div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
    div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
    div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
    div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
        width: 100%;
        max-width: 100%;
    }
}

/* Disable background scrolling while the lightbox is open. */
html.luxtools-noscroll,
html.luxtools-noscroll body {
    overflow: hidden !important;
}

/* Fullscreen lightbox viewer (client-side). */
.luxtools-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.luxtools-lightbox.is-open {
    display: block;
}

.luxtools-lightbox .luxtools-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.luxtools-lightbox .luxtools-lightbox-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8em;
}

.luxtools-lightbox .luxtools-lightbox-media {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

.luxtools-lightbox img.luxtools-lightbox-img {
    display: block;
    /* Use viewport constraints so tall images always fit.
     * Percent max-height is unreliable here because the wrapper doesn't have a fixed height.
     */
    max-width: calc(100vw - 1.6em);
    max-height: calc(100vh - 1.6em);
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

.luxtools-lightbox .luxtools-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 1.2em;
    transform: translateX(-50%);
    display: block;
    max-width: 60rem;
    padding: 0.4em 0.8em;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 0.4em;
    font-size: 0.9em;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Image-anchored prev/next zones.
 * These are sized relative to the displayed image (not the viewport) and show
 * a subtle indicator only on hover/focus.
 */
.luxtools-lightbox button.luxtools-lightbox-zone {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 25%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.luxtools-lightbox button.luxtools-lightbox-zone-prev {
    left: 0;
}

.luxtools-lightbox button.luxtools-lightbox-zone-next {
    right: 0;
}

.luxtools-lightbox button.luxtools-lightbox-zone::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 120ms ease-in-out;
    pointer-events: none;
}

.luxtools-lightbox button.luxtools-lightbox-zone-prev::after {
    content: '‹';
    left: 0.35em;
}

.luxtools-lightbox button.luxtools-lightbox-zone-next::after {
    content: '›';
    right: 0.35em;
}

.luxtools-lightbox button.luxtools-lightbox-zone:hover::after,
.luxtools-lightbox button.luxtools-lightbox-zone:focus-visible::after {
    opacity: 1;
}

/* Top-right close button. */
.luxtools-lightbox button.luxtools-lightbox-close {
    position: absolute;
    top: 0.8em;
    right: 0.8em;
    z-index: 3;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
    background: transparent;
    border: none;
    font-size: 2.5em;
    cursor: pointer;
}

.luxtools-lightbox button.luxtools-lightbox-close:hover,
.luxtools-lightbox button.luxtools-lightbox-close:focus-visible {
    background: rgba(0, 0, 0, 0.60);
    border-radius: 999px;
}

@media (max-width: 600px) {
    .luxtools-lightbox button.luxtools-lightbox-zone::after {
        font-size: 2.4em;
    }
}

/* ========================================================================
 * Imagebox (Wikipedia-style image with caption)
 * ======================================================================== */

.luxtools-imagebox {
    margin-bottom: 0.5em;
    display: block;
}

.luxtools-imagebox.tleft {
    clear: left;
    float: left;
    margin-right: 1.4em;
}

.luxtools-imagebox.tright {
    clear: right;
    float: right;
    margin-left: 1.4em;
}

.luxtools-imagebox.tcenter {
    clear: both;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.luxtools-imagebox.tcenter .luxtools-imagebox-inner {
    display: inline-block;
    text-align: left;
}

.luxtools-imagebox .luxtools-imagebox-inner {
    display: inline-block;
    background-color: @ini_background_alt;
    border: 1px solid @ini_border;
    padding: 3px;
    font-size: 94%;
    overflow: hidden;
}

.luxtools-imagebox .luxtools-imagebox-inner > a {
    display: block;
    line-height: 0;
    background-color: @ini_background;
}

.luxtools-imagebox .luxtools-imagebox-inner img {
    display: block;
    max-width: 100%;
    height: auto;
}

.luxtools-imagebox .luxtools-imagebox-caption {
    border: none;
    font-size: 94%;
    line-height: 1.4em;
    padding: 3px;
    text-align: left;
}