/* ============================================================
   Side Panel — reusable pattern for secondary navigation panels
   Pairs with side-panel.js for behavior (see Behavior Spec).
   ============================================================ */

/* ---------- Container ---------- */
.side-panel {
    width: 0;
    background: #fff;
    border-right: 1px solid #e3e6f0;
    box-shadow: 4px 0 12px -6px rgba(58, 59, 69, 0.08);
    overflow: hidden;
    transition: width 0.22s ease;
    flex-shrink: 0;
    font-family: 'Nunito', sans-serif;
}

.side-panel.is-open {
    width: 14rem;
}

/* Fixed-width inner wrapper so content doesn't reflow during the transition */
.side-panel-inner {
    width: 14rem;
    padding-bottom: 12px;
}

/* ---------- Header ---------- */
.side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e3e6f0;
}

.side-panel-title {
    font-size: 14px;
    font-weight: 800;
    color: #5a5c69;
    letter-spacing: -0.2px;
}

.side-panel-close {
    background: transparent;
    border: 0;
    color: #858796;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.12s, color 0.12s;
}

.side-panel-close:hover {
    background: #f8f9fc;
    color: #5a5c69;
}

/* ---------- Section label ---------- */
.side-panel-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #858796;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 16px 16px 6px;
}

/* ---------- Item ---------- */
.side-panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #5a5c69;
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-left-color 0.12s, color 0.12s;
}

.side-panel-item:hover,
.side-panel-item:focus {
    background: #f8f9fc;
    border-left-color: #4e73df;
    color: #4e73df;
    text-decoration: none;
}

.side-panel-item i {
    font-size: 16px;
    color: #4e73df;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

/* ---------- Suppress sidebar toggle while a panel is open ---------- */
body.side-panel-open #sidebarToggle {
    visibility: hidden;
}

/* ---------- Pin-to-bottom utility ----------
   Applied to an element inside a flex-column container to push it (and all
   following siblings) to the bottom. Used on the sidebar's chevron-toggle
   wrapper so the toggle + divider + "My Settings" sit as a flush bottom cluster.
   Reusable for any future "pin to bottom of flex container" need. */
.pinned-bottom {
    margin-top: auto;
}