/* Service sidebar panel — Vercel-like restyle (#418), approved mock
   docs/redesign/vercel-list/sidebar-panel.html, variant B (quiet card, the
   back link demoted to an outline neutral button).

   CSS-only. The panel markup is vendor-generated: the `sidebar.tpl` include in
   header.tpl resolves (theme inheritance) to templates/twenty-one/includes/sidebar.tpl,
   which prints .card.card-sidebar blocks. Verified on staging the DOM shape:
   .card.card-sidebar > .card-header > h3.card-title.m-0 (item icon + label +
   i.fas.fa-chevron-up.card-minimise.float-right), then .collapsable-card-body
   holding an optional .card-body (the vendor bodyHtml) and/or .list-group, and
   an optional .card-footer (the vendor footerHtml). The vendor body/factory
   HTML itself is ionCube and not readable in-repo: per the approved mock and
   issue it renders label text nodes inside <p> with values inside <strong> and
   a back-to-service anchor at the end; cloudx.css:335-339 paints that body
   (.card-body, .card-body strong at 13px #6b788b Poppins), so this sheet
   replaces its paint on the same surface.

   Every top-level selector scopes under .sidebar .card.card-sidebar (or a
   longer chain containing it). Tokens come from palette.css only; no hex,
   no cascade-priority flags except the single pinned heading weight. */

/* 1. Panel frame: quiet card — surface, 1px neutral border, 12px radius,
   no shadow. The stack gap lives on the wrapper: cloudx.css:321 pins
   margin: 0 with an importance flag on every .card-sidebar (it outranks
   Bootstrap's .mb-3), and the gap must not re-fight a pinned value. */
.sidebar .card.card-sidebar {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border-neutral);
    border-radius: 12px;
    box-shadow: none;
    padding: 20px 16px 16px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: var(--cp-gray-900);
}
.sidebar:has(.card.card-sidebar) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 2. Heading: 14px/700 near-black in Plus Jakarta Sans. The divider is the
   card-header's own border-bottom (the mock's top <hr>) — no new element. */
.sidebar .card.card-sidebar .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cp-border-neutral);
    padding: 0 0 12px;
    margin: 0 0 14px;
}
/* cloudx.css:13000 forces its h1-h6 weight with an importance flag, so the
   title weight below carries the sheet's single pinned cascade-priority
   declaration — exactly 1, counted by cloudpedia_sidebar_panel_css_test.php. */
.sidebar .card.card-sidebar .card-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700 !important;
    line-height: 22px;
    color: var(--cp-gray-900);
}
.sidebar .card.card-sidebar .card-minimise.minimised,
.sidebar .card.card-sidebar .card-minimise {
    color: var(--cp-gray-600);
    position: relative;
    top: 0;
}

/* 3. Body: the p/strong device proven on the sibling sheet
   (clientarea-upgrade.css section 3, #416). cloudx.css:317-342 paints
   .card-body (and its strong) at 13px #6b788b Poppins — reset here:
   label paragraphs (no <strong>) get the 11px/600 uppercase 0.06em
   gray-600 treatment; the strong values reset to 14px/600 near-black. */
.sidebar .card.card-sidebar .collapsable-card-body .card-body {
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: var(--cp-gray-900);
}
.sidebar .card.card-sidebar .collapsable-card-body .card-body > p {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-gray-600);
}
/* A paragraph that carries a value terminates the label run: roomier gap
   after it (the mock's .val margin), and its own text stops reading as a
   label — the <strong> inside resets the type below. */
.sidebar .card.card-sidebar .collapsable-card-body .card-body > p:has(strong) {
    margin: 0 0 12px;
}
.sidebar .card.card-sidebar .collapsable-card-body .card-body strong {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--cp-gray-900);
    letter-spacing: normal;
    text-transform: none;
}

/* 4. Back anchor: outline neutral button — 36px, 13px, 8px radius, 1px
   strong border, near-black ink; hover darkens the border. NOT filled: the
   page's own primary button stays the only filled one on screen. The
   divider above it reads from .card-footer's own border-top (the mock's
   bottom <hr>). cloudx.css:352 paints this anchor as a lavender pill
   (.card-sidebar .card-footer a.btn.btn-default.btn-sm.btn-block,
   .sidebar .card-footer .btn-success) — both chains are re-schemed here,
   plus the same a.btn.btn-default.btn-sm.btn-block chain as a direct
   card-body child in case the vendor body ships the anchor there. */
.sidebar .card.card-sidebar .card-footer {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--cp-border-neutral);
    padding: 14px 0 0;
    margin: 14px 0 0 0;
}
/* Staging-verified (#418 review): the vendor renders the back control as
   <button type="submit" class="btn btn-block btn-primary"> (its own kit
   paints btn-primary purple) — not an anchor chain. The concrete button
   chain joins the anchor chains the mock models below. */
.sidebar .card.card-sidebar .card-footer .btn-success,
.sidebar .card.card-sidebar .card-footer a.btn.btn-default.btn-sm.btn-block,
.sidebar .card.card-sidebar .card-body a.btn.btn-default.btn-sm.btn-block,
.sidebar .card.card-sidebar .card-footer button.btn.btn-primary.btn-block,
.sidebar .card.card-sidebar .card-body button.btn.btn-primary.btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* the vendor ships the arrow-icon glyph; the flex gap keeps it off the label */
    gap: 6px;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 16px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border-strong);
    border-radius: 8px;
    color: var(--cp-gray-900);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}
.sidebar .card.card-sidebar .card-footer .btn-success:hover,
.sidebar .card.card-sidebar .card-footer .btn-success:focus,
.sidebar .card.card-sidebar .card-footer a.btn.btn-default.btn-sm.btn-block:hover,
.sidebar .card.card-sidebar .card-footer a.btn.btn-default.btn-sm.btn-block:focus,
.sidebar .card.card-sidebar .card-body a.btn.btn-default.btn-sm.btn-block:hover,
.sidebar .card.card-sidebar .card-body a.btn.btn-default.btn-sm.btn-block:focus,
.sidebar .card.card-sidebar .card-footer button.btn.btn-primary.btn-block:hover,
.sidebar .card.card-sidebar .card-footer button.btn.btn-primary.btn-block:focus,
.sidebar .card.card-sidebar .card-body button.btn.btn-primary.btn-block:hover,
.sidebar .card.card-sidebar .card-body button.btn.btn-primary.btn-block:focus {
    border-color: var(--cp-gray-900);
    background: var(--cp-surface);
    color: var(--cp-gray-900);
    text-decoration: none;
}

/* Accepted CSS-only limit: cloudx.css:13011 forces .btn through a
   cascade-priority declaration, so the anchor's font family and weight stay
   the parent's Poppins Medium / normal — the same limit the Up/Downgrade
   sheet accepted in #416. Size (13px), height, radius, border, padding and
   colour come from this sheet. */

/* 5. Mobile: the sidebar column collapses naturally; the card keeps its
   padding at every width. cloudx_responsive.css:981 (inside its 767px block)
   re-pads the card through an id-bearing chain that outranks classes, so the
   same chain re-asserts the frame padding — one small mirror, no breakpoint
   web. The header/body rules above already outrank the parent's mobile
   header/body padding rules. */
@media (max-width: 767px) {
    section#main-body .sidebar .card.card-sidebar {
        padding: 20px 16px 16px;
    }
}