/* Theme colors */

/* Define theme variables */
:root {
    /* Light theme (default) */
    --landlord-background: var(--bulma-white-bis);
    --landlord-panel-background: var(--bulma-white-ter);
    --landlord-border-color: var(--bulma-grey-darker);
}

/* Dark theme class */
.theme-dark {
    --landlord-background: var(--bulma-grey-dark);
    --landlord-panel-background: var(--bulma-grey-darker);
    --landlord-border-color: var(--bulma-grey-lighter);
}

.landlord-background-section {
    background-color: var(--landlord-background);
}

.landlord-panel {
    background-color: var(--landlord-panel-background);
    border-color: var(--landlord-border-color);
}

/*  Toggle button styles */

.theme-toggle-btn {
    cursor: pointer;
    margin: 0.5rem;
}

.theme-toggle-btn .icon {
    margin-right: 0.5rem;
}


/* Tooltip styles */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
    visibility: hidden;
    width: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 9999;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    min-width: 256px;
}

.tooltip-wrapper:hover .tooltip {
    visibility: visible;
    opacity: 1;
}


/* Table styles */

.narrow-numeric {
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    width: auto !important;
    min-width: 0 !important;
}

/* Make sure the header also matches */
th.narrow-numeric {
    text-align: right;
}

.drag-area {
    border: 2px dashed #b5b5b5;
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.drag-area.is-dragover {
    background-color: rgba(72, 199, 142, 0.1);
    border-color: #48c78e;
}

form.htmx-request {
    opacity: .5;
    transition: opacity 300ms linear;
    cursor: not-allowed;
}

.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline;
}
.htmx-request.button {
    opacity: 0.5;
    pointer-events: none;
}

.submit-indicator{
    opacity:0;
    transition: opacity 100ms ease-in;
}