/* 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. Link list: the System Sidebar's child links (the Support panel's My
   Support Tickets / Announcements / … links, plus the same list in the
   desktop sidebar column and on other Client Area pages). Parent paint:
   cloudx.css:3846-3871 gives every .card-sidebar .list-group-item 13px
   #000 with 20px side padding and a 10px top padding on the .list-group;
   cloudx.css:12942/12951 paint .active as a lavender/#673de6 pill and
   cloudx.css:821 turns .badge into a 20px blue circle. Reset here to a
   14px near-black link, one neutral rule between rows, primary hover, and
   token-only active/disabled/badge states. */
.sidebar .card.card-sidebar .list-group {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}
.sidebar .card.card-sidebar .list-group .list-group-item {
    display: block;
    /* 11 + 22 line + 11 = 44px touch row at phone width */
    padding: 11px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--cp-gray-900);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}
/* Between rows only: the first row has no rule above and the last none
   below, so the card-header divider and the frame stay the outer rules. */
.sidebar .card.card-sidebar .list-group .list-group-item + .list-group-item {
    border-top: 1px solid var(--cp-border-neutral);
}
.sidebar .card.card-sidebar .list-group .list-group-item:hover,
.sidebar .card.card-sidebar .list-group .list-group-item:focus {
    color: var(--cp-primary-500);
    text-decoration: none;
}
/* Active row: token tint plus primary ink and a heavier weight — a soft row,
   not a pill (a link list can carry an active row on any page). */
.sidebar .card.card-sidebar .list-group .list-group-item.active {
    background: var(--cp-primary-50);
    color: var(--cp-primary-600);
    font-weight: 600;
}
/* Disabled row reads inert; Bootstrap's pointer-events: none still stops the
   hover/focus rules above from firing on it. */
.sidebar .card.card-sidebar .list-group .list-group-item.disabled,
.sidebar .card.card-sidebar .list-group .list-group-item:disabled {
    color: var(--cp-gray-600);
    background: transparent;
}
/* Badge: a plain muted count, not the parent's blue circle. */
.sidebar .card.card-sidebar .list-group .list-group-item .badge {
    padding: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--cp-gray-600);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
}

/* 5b. Your Recent Tickets body — FALLBACK pass (2026-10-13). That panel's
   body is core-generated and ionCube-encoded, so its classes are not readable
   in-repo and no staging DOM was available. These rules therefore target only
   what is certain — the `.card-body` wrapper from
   `twenty-one/includes/sidebar.tpl` — plus the shape visible in the staging
   screenshot: a ticket title link, a muted status line, a right-aligned
   relative time, and rows separated by a rule. When the real DOM arrives,
   replace the two structural guesses (`> div + div`, `small`) with the actual
   classes; everything here is additive and cannot affect the card chrome. */
.sidebar .card.card-sidebar .card-body {
    color: var(--cp-gray-900);
    font-size: 14px;
    line-height: 22px;
}
.sidebar .card.card-sidebar .card-body a {
    color: var(--cp-gray-900);
    font-weight: 600;
    text-decoration: none;
}
.sidebar .card.card-sidebar .card-body a:hover,
.sidebar .card.card-sidebar .card-body a:focus {
    color: var(--cp-primary-500);
}
/* Row separation by shape: sibling blocks inside the body. */
.sidebar .card.card-sidebar .card-body > div + div {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-border-neutral);
}
/* Muted meta — the status line and the relative time, whatever element
   carries them. */
.sidebar .card.card-sidebar .card-body small,
.sidebar .card.card-sidebar .card-body .text-muted {
    color: var(--cp-gray-600);
    font-size: 13px;
}

/* 6. 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;
    }
}