luxtools-plugin/style.css

/* Dialog infrastructure styles are in dialog.css, loaded via CSS_STYLES_INCLUDED hook in action.php */

/* 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: @ini_luxtools_locationlink !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;
}

/* Page link status (unlinked blobs alias) */
span.luxtools-pagelink-status {
    display: inline-block;
    font-size: 0.85em;
    line-height: 1.3;
    margin: 0.25em 0;
    padding: 0.15em 0.4em;
    border: 1px solid @ini_border;
    border-radius: 0.2em;
    background-color: @ini_background_alt;
    color: inherit;
}

/* 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;
    /* Placeholder while lazy-loaded image is pending.
     * Uses custom property from inline style if thumb_placeholder is configured,
     * otherwise falls back to built-in SVG icon. */
    background-color: @ini_background;
    background-image: var(--luxtools-placeholder, url(images/placeholder.svg));
    background-position: center;
    background-repeat: no-repeat;
    /* contain works well for both: configured placeholder fills the area,
     * built-in SVG icon stays small and centered */
    background-size: contain;
}

/* 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;
    width: 100%;
    max-width: 100%;
}

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

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.luxtools-lightbox-no-nav button.luxtools-lightbox-zone {
    pointer-events: none;
}

.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.6);
    border-radius: 999px;
}

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

/* ========================================================================
 * Grouping wrapper (compact image layout container)
 * ======================================================================== */

.luxtools-grouping {
    display: grid;
    grid-template-columns: repeat(
        var(--luxtools-grouping-cols, 2),
        minmax(0, 1fr)
    );
    gap: var(--luxtools-grouping-gap, 0);
    justify-content: var(--luxtools-grouping-justify, start);
    align-items: var(--luxtools-grouping-align, start);
}

.luxtools-grouping.luxtools-grouping--flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luxtools-grouping-gap, 0);
}

/* Let the grouping layout fully control item placement. */
.luxtools-grouping .luxtools-imagebox {
    float: none;
    clear: none;
    margin: 0;
}

/* ========================================================================
 * 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;
}

/* ========================================================================
 * Calendar widget
 * ======================================================================== */

div.luxtools-calendar {
    width: 100%;
    max-width: 100%;
    font-size: 88%;
}

div.luxtools-calendar .luxtools-calendar-title {
    font-weight: bold;
    margin-bottom: 0.25em;
    font-size: 95%;
    text-align: center;
}

div.luxtools-calendar .luxtools-calendar-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 0.25em;
}

div.luxtools-calendar .luxtools-calendar-nav-prev {
    display: flex;
    justify-content: flex-start;
    gap: 0.25em;
}

div.luxtools-calendar .luxtools-calendar-nav-next {
    display: flex;
    justify-content: flex-end;
    gap: 0.25em;
}

div.luxtools-calendar .luxtools-calendar-nav-prev a,
div.luxtools-calendar .luxtools-calendar-nav-next a {
    text-decoration: none;
}

div.luxtools-calendar .luxtools-calendar-nav-button {
    border: 1px solid @ini_border;
    background-color: @ini_background_alt;
    color: @ini_text;
    font: inherit;
    line-height: 1;
    padding: 0.2em 0.45em;
    cursor: pointer;
}

div.luxtools-calendar .luxtools-calendar-nav-button:hover,
div.luxtools-calendar .luxtools-calendar-nav-button:focus {
    background-color: @ini_highlight;
    outline: none;
}

div.luxtools-calendar .luxtools-calendar-footer {
    margin-top: 0.35em;
    text-align: right;
}

div.luxtools-calendar table.luxtools-calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

div.luxtools-calendar table.luxtools-calendar-table th,
div.luxtools-calendar table.luxtools-calendar-table td {
    border: 1px solid @ini_border;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

div.luxtools-calendar table.luxtools-calendar-table th {
    background-color: @ini_background_alt;
    font-size: 85%;
    font-weight: normal;
}

div.luxtools-calendar td.luxtools-calendar-day-empty {
    background-color: @ini_background_alt;
}

div.luxtools-calendar td.luxtools-calendar-day-today {
    background-color: @ini_highlight;
}

div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.9em;
    background: transparent;
    text-decoration: none;
    border-bottom: 0;
    box-shadow: none;
    padding: 0.1em 0;
}

div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > a.wikilink2:link,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > a.wikilink2:visited,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a.wikilink2:link,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a.wikilink2:visited {
    color: @ini_missing;
    border-bottom: 0;
}

div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > a:hover,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > a:focus,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > a:active,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > a:visited,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:hover,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:focus,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:active,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:visited {
    text-decoration: none;
    border-bottom: 0;
    box-shadow: none;
}

div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:visited,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:hover,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:focus,
div.luxtools-calendar.luxtools-calendar-size-small
    td.luxtools-calendar-day
    > span.curid
    > a:active {
    font-weight: bold;
    text-decoration: underline;
    border-bottom: 0;
    box-shadow: none;
}

div.luxtools-calendar td.luxtools-calendar-day:hover {
    background-color: @ini_background_alt;
}

div.luxtools-calendar
    td.luxtools-calendar-day.luxtools-calendar-day-today:hover {
    background-color: @ini_highlight;
}

/* ============================================================
 * Calendar Widget Indicators
 * Colored corner markers showing which slots have events on a day.
 * Positions: general=top-left, slot2=top-right,
 *            slot3=bottom-right, slot4=bottom-left (clockwise)
 * ============================================================ */
div.luxtools-calendar td.luxtools-calendar-day {
    position: relative;
}

div.luxtools-calendar.luxtools-calendar-size-large
    table.luxtools-calendar-table
    td {
    text-align: left;
    vertical-align: top;
}

div.luxtools-calendar.luxtools-calendar-size-large td.luxtools-calendar-day {
    height: 8.25em;
}

div.luxtools-calendar.luxtools-calendar-size-large
    td.luxtools-calendar-day-empty {
    height: 8.25em;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-frame {
    min-height: 8.25em;
    padding: 0.35em 0.4em 0.4em 0.4em;
    box-sizing: border-box;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number {
    text-align: right;
    margin-bottom: 0.25em;
    line-height: 1.1;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    > a,
div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    > span.curid
    > a,
div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    span.curid
    > a {
    display: inline;
    min-height: 0;
    padding: 0;
    background: transparent;
    text-decoration: none;
    border-bottom: 0;
    box-shadow: none;
    font-weight: bold;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    > a.wikilink2:link,
div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    > a.wikilink2:visited,
div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    span.curid
    > a.wikilink2:link,
div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-number
    span.curid
    > a.wikilink2:visited {
    color: @ini_missing;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-day-events {
    overflow: hidden;
}

div.luxtools-calendar.luxtools-calendar-size-large
    ul.luxtools-calendar-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.luxtools-calendar.luxtools-calendar-size-large li.luxtools-calendar-event {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    margin: 0 0 0.2em 0;
    padding: 0.1em 0.2em 0.1em 0.35em;
    border-left: 3px solid var(--luxtools-slot-color, @ini_border);
    background-color: @ini_background_alt;
    overflow: hidden;
    cursor: pointer;
}

div.luxtools-calendar.luxtools-calendar-size-large
    li.luxtools-calendar-event:hover {
    background-color: @ini_highlight;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-event-time {
    flex: 0 0 auto;
    font-weight: bold;
    white-space: nowrap;
}

div.luxtools-calendar.luxtools-calendar-size-large
    .luxtools-calendar-event-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.luxtools-calendar.luxtools-calendar-size-large
    li.luxtools-calendar-event-more {
    border-left-color: @ini_border;
    justify-content: flex-end;
    font-style: italic;
}

@media (max-width: 800px) {
    div.luxtools-calendar.luxtools-calendar-size-large td.luxtools-calendar-day,
    div.luxtools-calendar.luxtools-calendar-size-large
        td.luxtools-calendar-day-empty,
    div.luxtools-calendar.luxtools-calendar-size-large
        .luxtools-calendar-day-frame {
        height: 7em;
        min-height: 7em;
    }
}

.luxtools-calendar-indicators {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.luxtools-calendar-indicator {
    position: absolute;
    width: 6px;
    height: 6px;
}

.luxtools-indicator-top-left {
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.luxtools-indicator-top-right {
    top: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.luxtools-indicator-bottom-right {
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.luxtools-indicator-bottom-left {
    bottom: 0;
    left: 0;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* ============================================================
 * Chronological Events on Day Pages
 * ============================================================ */
div.luxtools-chronological-events ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5em 0;
}

div.luxtools-chronological-events li {
    padding: 0.35em 0.5em;
    margin: 0.25em 0;
    border-left: 3px solid @ini_border;
    cursor: pointer;
}

div.luxtools-chronological-events li:hover {
    background-color: @ini_background_alt;
}

div.luxtools-chronological-events li[data-luxtools-event] .luxtools-event-time {
    font-weight: bold;
    margin-right: 0.25em;
}

/* ============================================================
 * Event Popup (content-specific styles – structural dialog
 * styles live in dialog.css)
 * ============================================================ */
.luxtools-event-popup-description {
    white-space: pre-wrap;
    word-break: break-word;
}

.luxtools-event-popup-slot {
    margin-top: 1em;
    opacity: 0.6;
    font-size: 0.9em;
}

.luxtools-recurrence-actions {
    flex-direction: column;
}

/* Day popup */
.luxtools-day-popup-events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.luxtools-day-popup-event-item {
    padding: 0.3em 0.4em;
    margin: 0.2em 0;
    border-radius: 0.2em;
    cursor: pointer;
}

.luxtools-day-popup-event-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.luxtools-day-popup-empty {
    opacity: 0.6;
    font-style: italic;
}

/* Event form */
.luxtools-event-form .luxtools-event-form-field {
    margin: 0.5em 0;
}

.luxtools-event-form .luxtools-event-form-field label {
    display: block;
}

.luxtools-event-form .luxtools-event-form-field input[type="text"],
.luxtools-event-form .luxtools-event-form-field input[type="date"],
.luxtools-event-form .luxtools-event-form-field input[type="time"],
.luxtools-event-form .luxtools-event-form-field textarea,
.luxtools-event-form .luxtools-event-form-field select {
    width: 100%;
    box-sizing: border-box;
}

.luxtools-event-form-time-fields {
    display: flex;
    gap: 0.75em;
}

.luxtools-event-form-time-fields .luxtools-event-form-field {
    flex: 1;
}

/* Calendar sync widget (syntax) */
.luxtools-calendar-sync-widget {
    margin: 0.5em 0;
}

.luxtools-calendar-sync-status {
    margin-left: 0.75em;
}

/* Clickable day cells */
td.luxtools-calendar-day[data-luxtools-day] {
    cursor: pointer;
}

/* ============================================================
 * Notifications (fallback)
 * ============================================================ */
.luxtools-notification {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 10001;
    padding: 0.75em 1em;
    border-radius: 0.3em;
    font-size: 0.9em;
    max-width: 400px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.luxtools-notification-error {
    background: #c0392b;
    color: #fff;
}

.luxtools-notification-warning {
    background: #e67e22;
    color: #fff;
}