.display-none {
    display: none;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.btn {
    min-height: 1rem;
}

.btn-xs {
    height: 1.8rem;
    min-height: 1.8rem;
}

.btn-sm {
    height: 2.2rem;
    min-height: 2.2rem;
}

.btn-md {
    height: 3rem;
    min-height: 3rem;
}

.btn-lg {
    height: 4rem;
    min-height: 4rem;
}

.join-unrounded {
    --rounded-btn: 0;
}

.bg-join {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--ctp-text), var(--tw-bg-opacity, 1));
}

.hidden {
    display: none !important;
}

.rotate-90-permanent {
    transform: rotate(-90deg) translate(100%);
    transform-box: fill-box;
    transform-origin: bottom right;
}

.b-vertical-right,
.b-vertical-left {
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: 2.2rem;
    text-align: center;
}

.b-vertical-right {
    writing-mode: sideways-lr;
}

.b-vertical-left {
    writing-mode: sideways-rl;
}

.join.join-vertical .join-item:first-child:not(:last-child),
.join.join-vertical *:first-child:not(:last-child) .join-item {
    border-start-start-radius: inherit;
    border-start-end-radius: 0;
    border-end-start-radius: inherit;
    border-end-end-radius: 0;
}

.join.join-vertical .join-item:last-child:not(:first-child),
.join.join-vertical *:last-child:not(:first-child) .join-item {
    border-end-start-radius: 0;
    border-end-end-radius: inherit;
    border-start-start-radius: 0;
    border-start-end-radius: inherit;
}

.join.join-vertical .join-item:first-child:not(:last-child):not(.b-vertical-left),
.join.join-vertical *:first-child:not(:last-child) .join-item:not(.b-vertical-left) {
    border-start-start-radius: 0;
    border-start-end-radius: inherit;
    border-end-start-radius: 0;
    border-end-end-radius: inherit;
}

.join.join-vertical .join-item:last-child:not(:first-child):not(.b-vertical-left),
.join.join-vertical *:last-child:not(:first-child) .join-item:not(.b-vertical-left) {
    border-end-start-radius: inherit;
    border-end-end-radius: 0;
    border-start-start-radius: inherit;
    border-start-end-radius: 0;
}

button div {
    display: none;
    position: absolute;
    top: 0;
    right: 110%;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    writing-mode: horizontal-tb;
}

#overlay-content{
    position: absolute; 
    pointer-events: auto; 
    z-index: 101; 
    background-color: var(--fallback-b1,oklch(var(--b2)/var(--tw-bg-opacity, 1)));
    max-width: 800px; 
    width: calc(-65px + 100vw);
    height: calc(100% - 45px);
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

#overlay-darken{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    z-index: 4;
    background-color: rgba(0, 0, 0, 0.5);
}
body:has(#fullscreen-menu-content:not(.hidden)) .draggable {
    z-index: 0 !important;
    pointer-events: none !important;
}

#fullscreen-menu-content{
    position: fixed;
    width: calc(100% - 10px);
    height: calc(100% - 35px);
    pointer-events: auto;
}

#overlay.mobile {
    width: 100% !important;
}

#overlay.mobile #overlay-content {
    overflow: scroll !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background-color: var(--fallback-b1,oklch(var(--b2)/var(--tw-bg-opacity, 1)));
    max-width: none !important;
    transform: none !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
}

#overlay.mobile #fullscreen-menu-content {
    overflow: scroll !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background-color: var(--fallback-b1,oklch(var(--b2)/var(--tw-bg-opacity, 1)));
    max-width: none !important;
    transform: none !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
}

.ui-menu{
    pointer-events: none;
    /* removes scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* removes scrollbar on webkit browsers */
.ui-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Side-menu vertical tab strip: pin + reorder arrows reveal on strip hover only */
.menu-strip-hover-host .menu-strip-hover-item {
    display: none;
}
.menu-strip-hover-host:hover .menu-strip-hover-item {
    display: inline-flex;
}

/* Side-menu vertical tab strip: the always-visible close button sits at the
   top and the clickable header fills the middle (clipping its sideways title).
   The hover-only controls live in an absolutely-positioned flyout (below), so
   revealing them never reflows the strip. */
.menu-strip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2.2rem;
    margin-left: auto;
    pointer-events: auto;
}
.menu-strip-header {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* reconcile the sideways header button with the flex middle region */
.menu-strip-header.b-vertical-right {
    width: 100%;
    height: auto;
}
/* Hover flyout: a second control column (pin + reorder arrows) beside the
   close button, revealed on strip hover. Absolutely positioned just left of
   the strip so it never reflows it, and a descendant of the hover host so the
   cursor can move from the strip onto it without it disappearing. */
.menu-strip-flyout {
    position: absolute;
    top: 0;
    right: 100%;
    z-index: 30;
    flex-direction: column;
    align-items: center;
    padding: 0.125rem;
    border-radius: var(--rounded-btn, 0.5rem) 0 0 var(--rounded-btn, 0.5rem);
    background-color: var(--fallback-b2, oklch(var(--b2) / 1));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.form-control {
    display: flex;
    flex-direction: column;
    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
    /*background-color: var(--fallback-bg,oklch(var(--b3)/var(--tw-bg-opacity)));*/
}

.boxed {
    border-radius: var(--rounded-btn, 0.5rem);
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b2,oklch(var(--b1)/var(--tw-bg-opacity)));
    padding: 0.25rem;
    margin: 0.25rem;
}

/*TODO: think of a better way/name*/
.boxed2 {
    border-radius: var(--rounded-btn, 0.5rem);
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
    padding: 0.25rem;
    margin: 0.25rem;
}

.draggable {
    border-radius: var(--rounded-btn, 0.5rem);;
    cursor: grab; 

    position: absolute; 
    top: 50px; 
    left: 50px; 

    
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.draggable.dragging {
    cursor: grabbing; 
}

.draggable .handle {
    color: white;
    font-weight: bold;
    text-align: center;
    cursor: grab;
    position: relative;
    z-index: 100;
}

.draggable.dragging .handle {
    cursor: grabbing;
}

.draggable.mobile {
    position: relative !important;
    top: 0px !important; 
    left: 0px !important;     
}

.right-side-menu.mobile {
    /* Right-aligned overlay: keep the menu pinned to the right edge at content
       width so the tissue remains visible to its left. Cards inside carry their
       own `glass`/DaisyUI backgrounds; no opaque backdrop here. */
    width: auto !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    overflow: auto !important;
    background-color: transparent !important;
}

.opaque-bg {
    background-color: rgba(0, 0, 0, 0.406);
}

.pointer-events-auto {
    pointer-events: auto;
}

.pointer-events-none {
    pointer-events: none;
}

/* ensure close/overlay buttons sit above fullscreen menu */
#overlay-content > button,
#overlay-content .btn.absolute {
    z-index: 1100 !important;
}

/* mobile overlay: keep button above fixed content */
#overlay.mobile #overlay-content > button,
#overlay.mobile #overlay-content .btn.absolute {
    z-index: 1100 !important;
}

/* DaisyUI's .glass utility paints a hardcoded white linear-gradient, which
   washes the right-side-menu headers, scalebar LINK chip / collapse pill and
   other glass chrome into an unreadable milky overlay on dark themes. Repaint
   the gradient with a black tint when the active DaisyUI theme reports a dark
   color-scheme so the chrome stays legible. */
[data-theme="xOpat-dark"] .glass,
[data-theme="xOpat-dark"] .glass.btn-active,
[data-theme="xOpat-detached-mode"] .glass,
[data-theme="xOpat-detached-mode"] .glass.btn-active {
    background-image: linear-gradient(
            135deg,
            rgb(0 0 0 / var(--glass-opacity, 45%)) 0%,
            rgb(0 0 0 / 0%) 100%
        ),
        linear-gradient(
            var(--glass-reflex-degree, 100deg),
            rgb(255 255 255 / var(--glass-reflex-opacity, 6%)) 25%,
            rgb(0 0 0 / 0%) 25%
        );
    box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 8%)) inset,
        0 0 0 2px rgb(0 0 0 / 5%);
    text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 30%));
}