:root { --ru-topbar-h: 56px; --ru-action-rail-w: 56px; --ru-action-rail-w-open: 220px; }

#topMenuDialog {
    margin: 0 auto;
    margin-top: var(--ru-topbar-h);
    width: 75%;
    max-width: 1000px;
    transition: transform 0.25s ease-out;
}
#topMenuDialog .modal-content {
    max-height: calc(100dvh - var(--ru-topbar-h));
    max-height: calc(100vh - var(--ru-topbar-h)); /* fallback */
}
/* fullscreen behavior on small devices */
@media (max-width: 767.98px) {
    #topMenuDialog {
        width: 100%;
        height: calc(100dvh - var(--ru-topbar-h));
        height: calc(100vh - var(--ru-topbar-h)); /* fallback */
        margin-top: var(--ru-topbar-h);
        border-radius: 0;
    }
    #topMenuDialog .modal-content {
        height: 100%;
        border-radius: 0;
    }
}

/* Slide-down animation */
.modal.fade #topMenuDialog {
    transform: translateY(-10px);
}
.modal.show #topMenuDialog {
    transform: translateY(0);
}

/* Quick actions */
.ru-quick-actions .btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
}

/* Section titles */
.ru-section-title {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9rem;
}

.modal-backdrop.show {
    opacity: .2;   /* lighter backdrop */
}

.bg-secondary-custom {
    --bs-secondary-rgb: 36, 36, 36; /* Equivalent to #2E2E2E */
    --bs-bg-opacity: 1; /* Adjust opacity globally if needed */
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
}
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Helps iOS Safari modal height + scrolling */
.modal {
    -webkit-overflow-scrolling: touch;
}
.modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Shared scanner container */
.scanner-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

/* Fixed height for mobile stability */
.scanner-wrap.scanner-mobile {
    height: 320px;          /* sweet spot for phones */
}

/* Desktop can be taller */
@media (min-width: 768px) {
    .scanner-wrap.scanner-mobile {
        height: 420px;
    }
}

/* Force video to behave */
.scanner-wrap video,
.scanner-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.image-wrap {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: .375rem; /* matches Bootstrap rounded */
}

.image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills container, crops if needed */
    display: block;
}

/* ----------------------------------------
   Right-hand Action Rail
----------------------------------------- */
.ru-action-rail {
    position: fixed;
    top: var(--ru-topbar-h);
    right: 0;
    height: calc(100vh - var(--ru-topbar-h));
    width: var(--ru-action-rail-w);
    background: var(--bs-light);
    border-left: 1px solid var(--bs-border-color);
    z-index: 1025; /* below navbar, above content */
    transition: width 0.2s ease;
    overflow-x: hidden;
}

/* expand on hover */
.ru-action-rail:hover {
    width: var(--ru-action-rail-w-open);
}

/* Reserve space so rail doesn't overlap content */
@media (min-width: 768px) {
    #main_content.has-action-rail {
        padding-right: calc(var(--bs-gutter-x) * .5 + var(--ru-action-rail-w));
    }
    #main_content.has-action-rail.ru-action-rail-open {
        padding-right: calc(var(--bs-gutter-x) * .5 + var(--ru-action-rail-w-open));
    }
}
/* expand on hover */
/* nav links */
.ru-action-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.75rem;
    border-radius: 0;
    white-space: nowrap;
    color: var(--bs-body-color);
}

/* active state */
.ru-action-link.active {
    background-color: var(--bs-primary);
    color: #fff;
}

/* icon */
.ru-action-icon {
    width: 24px;
    min-width: 24px;
    font-size: 1.25rem;
}

/* text */
.ru-action-text {
    margin-left: 0.75rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* reveal text on hover */
.ru-action-rail:hover .ru-action-text {
    opacity: 1;
    transform: translateX(0);
}

/* keep alignment consistent when collapsed */
.ru-action-rail:not(:hover) .ru-action-link {
    justify-content: flex-start;
}