/**
 * sidebar-collapse.css
 * Edge-mounted collapse handle, and the content reflow that goes with it.
 *
 * The toggle used to sit beside the company name in the header, where it read as
 * part of the branding rather than as a control for the panel. It now rides on
 * the sidebar's right edge, so it travels with the panel it operates and its
 * arrow points the way the panel will move.
 *
 * Layout note: the shell is NOT a grid. global-hrms.css positions .sidebar
 * `fixed` at 240px and offsets .main-content with a matching `margin-left`, so
 * collapsing has to drive both of those numbers from the same variable.
 *
 * Loaded after global-hrms.css and theme.css so these win.
 */

:root {
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 68px;
    --sidebar-ease: .24s cubic-bezier(.4, 0, .2, 1);
}

/* Keep `position: fixed` from global-hrms.css -- a fixed element is still a
   containing block for absolutely positioned children, so the edge handle can
   anchor to it without changing the layout mode. */
.sidebar {
    width: var(--sidebar-width);
    transition: width var(--sidebar-ease);
    overflow-x: visible;
}

.main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--sidebar-ease), padding var(--sidebar-ease);
}

/* Collapsed: narrow rail, and the content reclaims the width. */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }

/* A little more breathing room once there is space for it. */
body.sidebar-collapsed .main-content { padding-inline: clamp(20px, 2.6vw, 40px); }

/* ------------------------------------------------------ panel toggle --- */
/*
 * Placed at the top of the sidebar itself (the ChatGPT arrangement) rather than
 * on the outer edge or in the header: it sits with the panel it controls and
 * stays put whether the rail is open or closed.
 */

.sidebar-toolbar {
    display: flex;
    align-items: center;
    padding: 12px 14px 4px;
}

body.sidebar-collapsed .sidebar-toolbar { justify-content: center; padding: 12px 0 4px; }

.sidebar-panel-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sidebar-panel-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-panel-toggle svg { width: 19px; height: 19px; }

/* On phones the sidebar is an off-canvas overlay driven by the hamburger, so
   the edge handle would float over the content and the margin must not shrink. */
@media (max-width: 900px) {
    body.sidebar-collapsed .sidebar { width: var(--sidebar-width); }
    body.sidebar-collapsed .main-content { margin-left: 0; }
}