/* Admin vertical menu base styles */
.admin-menu {
    height: calc(100vh - 120px); /* adjust if needed */
    overflow-y: auto;
    padding: 10px;
}

.admin-menu-root,
.admin-menu-root ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .admin-menu-root ul {
        margin-left: 12px;
    }

.admin-menu-button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 10px;
    background-color: #b7d9f5; /* light blue */
    color: #000;
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

    .admin-menu-button:hover {
        background-color: #d0d0d0; /* grey */
    }

    .admin-menu-button.active {
        background-color: #7fd17f; /* green */
        color: #000;
    }

.admin-menu-item > .admin-submenu {
    display: none;
}

.admin-menu-item.expanded > .admin-submenu {
    display: block;
}

.admin-menu-row {
    display: flex;
    align-items: center;
}

.admin-menu-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: 6px;
    font-size: 14px;
}

.admin-menu-item.expanded > .admin-menu-row .admin-menu-toggle {
    transform: rotate(90deg);
}

.admin-menu-button {
    position: relative;
}

.admin-menu-text {
    display: inline-block;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

/* Only animate on hover 
The animation:

Runs for 4 seconds per cycle
Uses ease-in-out timing (slow start, faster middle, slow end)
Repeats forever while hovering
Alternates direction (goes left, then back right)

So the motion is intentionally gentle. That’s why it feels like it takes a moment to get going.
animation: admin-text-scroll 4s ease-in-out infinite alternate;

    animation: admin-text-scroll 4s linear infinite alternate;
    animation: admin-text-scroll 4s ease-out infinite alternate;
*/
.admin-menu-button:hover .admin-menu-text {
    animation: admin-text-scroll 2s linear infinite alternate;
}

/* Keyframes for left-right scroll */
@keyframes admin-text-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-30%);
        /*transform: translateX(calc(-100% + 100%));*/
    }
}

/* The Admin shell should fill the available vertical space between header and footer */
.admin-shell {
    height: calc(100vh - var(--site-header-height, 120px) - var(--site-footer-height, 60px));
    overflow: hidden; /* prevent whole page scrolling inside admin shell */
}

/* Keep the row full height */
.admin-shell-row {
    height: 100%;
}



/*#main-body {
    height: 600px;
    overflow-y: auto;

    .parent > * {
        height: 100%;
        border: 1px solid purple;
    }
}*/

/* Admin workspace fills the area between header and footer */
.admin-workspace {
    height: calc(100vh - 120px - 60px); /* header + footer */
    overflow: hidden; /* never scroll */
}

/* Horizontal layout for menu + content */
.admin-workspace-inner {
    display: flex !important;
    height: 100%;
    overflow: hidden; /* never scroll */
}

/* Left menu pane */
.admin-menu-pane {
    width: 260px;
    min-width: 260px; /* or use Bootstrap columns if you prefer */
    overflow-x: hidden;
    overflow-y: auto; /* menu scrolls if tall */
    border-right: 1px solid #ddd;
    box-sizing: border-box;
    /*padding-right: 4px;*/ /* tiny breathing room to avoid overflow */
}
    .admin-menu-pane::-webkit-scrollbar {
        width: 8px;
    }

/* Right content pane */
.admin-content-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
    min-height: 0; /* critical: lets children shrink and scroll */
}

/* Apply zoom only to table body rows */
/*.admin-grid tbody td {
    font-size: 2rem !important;
}*/
.admin-grid tbody td {
    font-size: calc(0.875rem * (var(--grid-zoom, 100) / 100));
    padding-top: calc(0.1rem * (var(--grid-zoom, 100) / 100));
    padding-bottom: calc(0.1rem * (var(--grid-zoom, 100) / 100));
}

/* Container that scrolls vertically */
.admin-grid-container {
    flex: 1; /* take remaining height below toolbar */
    min-height: 0; /* critical: enables internal scrolling in flex layouts */
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #ddd;
}

/* Keep the table header visible if desired (optional) */
.admin-grid thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
}

.admin-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-grid-pager {
    display: flex;
    gap: 6px;
}
    .admin-grid-pager a.disabled {
        pointer-events: none;
        opacity: 0.5;
    }

/* Sortable grid headers */
.admin-grid th a {
    color: inherit; /* use normal text color */
    text-decoration: none; /* remove underline */
    display: inline-flex; /* align text + icon nicely */
    align-items: center;
    gap: 4px;
}

    .admin-grid th a:hover {
        text-decoration: none; /* no underline on hover */
        cursor: pointer;
    }

.admin-grid th {
    user-select: none; /* prevents awkward text selection */
}

/* Lightweight action icons */
.admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
    text-decoration: none;
}

    .admin-action:hover {
        opacity: 0.75;
    }

.admin-grid td.clamp {
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}