/* Labelled sidebar (Phase 4g) — js/modules/sidebar-labels.js.
   As a rail --sidebar-w is 68px and everything is exactly as before; with
   labels it widens, and everything positioned beside the sidebar follows. */
:root {
    --sidebar-w: 68px;
}

:root.sidebar-labelled {
    --sidebar-w: 176px;
}

.sidebar {
    width: var(--sidebar-w);
    transition: width var(--duration-normal) var(--ease-in-out);
}

.sidebar-label {
    display: none;
}

:root.sidebar-labelled .sidebar {
    align-items: stretch;
    padding-left: 12px;
    padding-right: 12px;
}

:root.sidebar-labelled .sidebar-logo {
    justify-content: flex-start;
    padding-left: 3px;
}

:root.sidebar-labelled .sidebar-icon,
:root.sidebar-labelled .sidebar-pilot-light {
    width: auto;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 11px;
}

:root.sidebar-labelled .sidebar-label {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-14);
    font-weight: 500;
    color: inherit;
}

:root.sidebar-labelled .sidebar-inbox-badge {
    position: static;
    margin-left: auto;
    box-shadow: none;
}

:root.sidebar-labelled .sidebar-user {
    align-self: center;
}

/* ‹ folds the labels away, › brings them back */
.sidebar-collapse {
    width: 44px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-collapse:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.sidebar-collapse:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.sidebar-collapse svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

:root.sidebar-labelled .sidebar-collapse {
    width: auto;
    justify-content: flex-start;
    padding: 0 13px;
}

:root.sidebar-labelled .sidebar-collapse svg {
    transform: none;
}

@media (max-width: 1023px) {
    .sidebar-collapse {
        display: none;
    }
}

/* Everything positioned beside the sidebar */
.desktop-drag-bar,
.task-modal.fullscreen,
.event-modal.fullscreen,
.project-modal.fullscreen,
.note-modal.fullscreen {
    left: var(--sidebar-w);
}

.task-modal.fullscreen,
.event-modal.fullscreen,
.project-modal.fullscreen {
    width: calc(100vw - var(--sidebar-w));
    max-width: calc(100vw - var(--sidebar-w));
}

.project-modal.expanded,
.note-modal.expanded {
    left: calc(var(--sidebar-w) + 220px);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-collapse svg {
        transition: none;
    }
}