/*
 * CADENCE - Entity Drawer (WP02)
 *
 * Visual surface for the universal entity drawer. Reuses ONLY the CSS
 * custom properties defined in index.html:
 *   --color-bg, --color-surface, --color-surface-2,
 *   --color-border, --color-border-strong,
 *   --color-text, --color-text-soft, --color-text-muted,
 *   --color-primary, --color-primary-2,
 *   --color-success, --color-warning, --color-danger,
 *   --grad-primary,
 *   --radius-sm, --radius-md, --radius-lg, --radius-xl,
 *   --shadow-xs, --shadow-sm, --shadow-md, --shadow-lg,
 *   --sidebar-w, --sidebar-w-collapsed.
 *
 * No new top-level tokens (NFR-006). Where a value is needed that no
 * existing token provides, it is expressed inline or as a local
 * variable scoped to the drawer.
 *
 * z-index choice: 9000.
 *   The CADENCE Network Viewer / SLA reference / CF Inspector overlays
 *   sit at roughly z-index 1000-2000. The drawer must float above them
 *   per FR-016, so we pick 9000 to clear those plus the loading
 *   overlay (z-index 9999 is reserved for the global loader; the
 *   drawer is intentionally below the loader so a connection retry
 *   does not appear behind a ghost drawer).
 */

#entity-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

#entity-drawer-root.is-open {
    pointer-events: auto;
}

.entity-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    transition: opacity 120ms ease-out;
    pointer-events: none;
}

#entity-drawer-root.is-open .entity-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.entity-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(560px, max(480px, 36vw));
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    pointer-events: auto;
}

.entity-drawer.is-open {
    transform: translateX(0);
}

/* Header */

.entity-drawer__header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px 20px;

    /* WP02 (mission expanded-entity-chrome-01KQW1SX, ADR-1 / FR-004):
       tinted header band. Falls through to existing surface / border
       look for un-typed drawers (note / pricematrix / unknown / missing
       data-entity-type) via the var() fallback. NFR-004: degraded
       browsers without color-mix() drop these declarations and inherit
       the original surface look — no layout breakage. */
    background: color-mix(in srgb, var(--drawer-accent, transparent) 8%, var(--color-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent, var(--color-border)) 15%, var(--color-border));
}

.entity-drawer__header-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.entity-drawer__subject {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* WP02 (mission expanded-entity-chrome-01KQW1SX, ADR-1 / FR-005):
   the entity-type label is restyled as a colored chip in
   white-on-accent. Text content is unchanged — entity_drawer.js
   already populates this element via entityLabelFor(top.entityType).
   For un-typed drawers (note / pricematrix / unknown / missing
   data-entity-type), the var() fallback uses --color-surface-2 so
   the chip renders as a neutral grey pill rather than disappearing.
   align-self: flex-start keeps the chip tight to its content (the
   parent .entity-drawer__header-title is flex-direction: column;
   without this, the chip would stretch to fill the parent's width). */
.entity-drawer__type {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: var(--drawer-accent, var(--color-surface-2));
    color: white;
    line-height: 1.2;
    margin-top: 2px;
    align-self: flex-start;
}

.entity-drawer__header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.entity-drawer__badge-slot {
    display: flex;
    align-items: center;
}

.entity-drawer__status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--color-surface-2);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.entity-drawer__status-badge--success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
    border-color: rgba(16, 185, 129, 0.4);
}

.entity-drawer__status-badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.4);
}

.entity-drawer__status-badge--urgent,
.entity-drawer__status-badge--overdue {
    background: rgba(220, 38, 38, 0.12);
    color: var(--color-danger);
    border-color: rgba(220, 38, 38, 0.4);
}

.entity-drawer__status-badge--info {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary);
    border-color: rgba(99, 102, 241, 0.4);
}

.entity-drawer__status-badge--neutral {
    /* default surface-2 / text-soft already applied */
}

/* Per-entity-type accent on the drawer header
   (mission expanded-entity-chrome-01KQW1SX, ADR-1 / FR-007).
   Each entity-type sets a local --drawer-accent variable on the
   panel root; chrome rules in this file (header band, type chip,
   section bars) reference var(--drawer-accent) instead of
   hard-coded color tokens. This collapses the v1.2.0 (mission
   entity-type-color-polish-01KQVXAS) eleven per-type border-left
   declarations into eleven variable assignments + one shared
   border-left rule, satisfying FR-007 (CSS variable indirection)
   and FR-008 (no new top-level tokens — only local variables).
   The data-entity-type attribute is written to .entity-drawer
   panel root in entity_drawer.js renderHeader() per the v1.2.0
   ADR-1 C-005 relaxation. */
.entity-drawer[data-entity-type="op"]          { --drawer-accent: var(--color-primary); }
.entity-drawer[data-entity-type="dp"]          { --drawer-accent: var(--color-accent-dp); }
.entity-drawer[data-entity-type="mission"]     { --drawer-accent: var(--color-accent-mission); }
.entity-drawer[data-entity-type="sp"]          { --drawer-accent: var(--color-primary-2); }
.entity-drawer[data-entity-type="training"]    { --drawer-accent: var(--color-accent-training); }
.entity-drawer[data-entity-type="amendment"]   { --drawer-accent: var(--color-danger); }
.entity-drawer[data-entity-type="fwc-meeting"] { --drawer-accent: var(--color-warning); }
.entity-drawer[data-entity-type="report"]      { --drawer-accent: var(--color-success); }
.entity-drawer[data-entity-type="sc-meeting"]  { --drawer-accent: var(--color-accent-sc-meeting); }
.entity-drawer[data-entity-type="consortium-agreement"],
.entity-drawer[data-entity-type="consortium-meeting"]   { --drawer-accent: var(--color-accent-consortium); }
.entity-drawer[data-entity-type="finance"]     { --drawer-accent: var(--color-accent-finance); }

/* Shared 4px left strip — preserves the v1.2.0 marker.
   Selector specificity (0,2,0) wins over the base
   .entity-drawer__header rule's border-left (0,1,0). */
.entity-drawer[data-entity-type="op"]          .entity-drawer__header,
.entity-drawer[data-entity-type="dp"]          .entity-drawer__header,
.entity-drawer[data-entity-type="mission"]     .entity-drawer__header,
.entity-drawer[data-entity-type="sp"]          .entity-drawer__header,
.entity-drawer[data-entity-type="training"]    .entity-drawer__header,
.entity-drawer[data-entity-type="amendment"]   .entity-drawer__header,
.entity-drawer[data-entity-type="fwc-meeting"] .entity-drawer__header,
.entity-drawer[data-entity-type="report"]      .entity-drawer__header,
.entity-drawer[data-entity-type="sc-meeting"]  .entity-drawer__header,
.entity-drawer[data-entity-type="consortium-agreement"]  .entity-drawer__header,
.entity-drawer[data-entity-type="consortium-meeting"]    .entity-drawer__header,
.entity-drawer[data-entity-type="finance"]     .entity-drawer__header {
    border-left: 4px solid var(--drawer-accent);
}

/* Fallback (FR-005): unknown / note / price-matrix / missing /
   empty attribute leave the header's existing chrome intact —
   no --drawer-accent assignment, no border-left override. The
   .entity-drawer__header band/border color-mix declarations and
   the .entity-drawer__type chip background fall through to their
   var() fallbacks (transparent / surface / surface-2). */

.entity-drawer__close {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.entity-drawer__close:hover,
.entity-drawer__close:focus-visible {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-border);
    outline: none;
}

/* Breadcrumb */

.entity-drawer__breadcrumb {
    position: sticky;
    /* Header height ~56px; sticky just below it. */
    top: 56px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px;
    color: var(--color-text-muted);
}

.entity-drawer__breadcrumb:empty {
    display: none;
}

.entity-drawer__crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
}

.entity-drawer__crumb:hover,
.entity-drawer__crumb:focus-visible {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text);
    outline: none;
}

.entity-drawer__crumb.is-top {
    color: var(--color-text);
    font-weight: 600;
    cursor: default;
    background: transparent;
    border-color: transparent;
}

.entity-drawer__crumb-icon {
    font-size: 12px;
    opacity: 0.85;
}

.entity-drawer__crumb-sep {
    color: var(--color-text-muted);
    padding: 0 2px;
    user-select: none;
}

/* Body container */

.entity-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--color-bg);
}

.entity-drawer__section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}

.entity-drawer__section.is-empty {
    display: none;
}

.entity-drawer__section-heading {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);

    /* WP02 (mission expanded-entity-chrome-01KQW1SX, ADR-1 / FR-006):
       3px leading bar in the entity-type accent on each drawer body
       section header (Key Fields / Related / Documents). For un-typed
       drawers the var() fallback uses --color-border-strong so the
       bar is still visible as a neutral accent. */
    border-left: 3px solid var(--drawer-accent, var(--color-border-strong));
    padding-left: 8px;
}

.entity-drawer__muted {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Layer dim treatment when stack > 1 (NFR-005). The visible top layer
   stays interactive; we softly fade the body content as a hint that
   you can navigate back via breadcrumb. */

.entity-drawer.has-stack .entity-drawer__body > .entity-drawer__section--key-fields {
    /* Subtle de-emphasis cue for stacked depth. The opacity is applied
       to underlying section detail rather than the entire panel so the
       sticky header / breadcrumb stay fully readable. */
    opacity: 0.92;
}

/* Key Fields */

.entity-drawer__kf-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.entity-drawer__kf-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 12px;
    align-items: baseline;
}

.entity-drawer__kf-label {
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.entity-drawer__kf-value {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}

.entity-drawer__kf-hint {
    grid-column: 2 / -1;
    color: var(--color-text-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* v1.5.18: long-text key-field rows (training note, comment, etc.) —
   stack vertically with the label above the body, full-width body. */
.entity-drawer__kf-row--long {
    grid-template-columns: 1fr;
    row-gap: 4px;
    align-items: stretch;
    margin-top: 8px;
}
.entity-drawer__kf-value--long {
    line-height: 1.5;
    font-weight: 400;
    background: var(--color-surface-2, #f6f8fa);
    border-left: 3px solid var(--color-border, #e1e4e8);
    padding: 10px 12px;
    border-radius: 4px;
}
.entity-drawer__kf-value--long p {
    margin: 0 0 8px;
}
.entity-drawer__kf-value--long p:last-child { margin-bottom: 0; }
.entity-drawer__kf-value--long ul,
.entity-drawer__kf-value--long ol {
    margin: 0 0 8px;
    padding-left: 20px;
}
.entity-drawer__kf-value--long code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.92em;
}

/* Related */

.entity-drawer__rel-group + .entity-drawer__rel-group {
    margin-top: 14px;
}

.entity-drawer__rel-group-heading {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-soft);
}

.entity-drawer__rel-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-drawer__rel-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--color-surface);
    transition: background 100ms ease-out, border-color 100ms ease-out;
}

.entity-drawer__rel-row:hover,
.entity-drawer__rel-row:focus-within {
    background: var(--color-surface-2);
    border-color: var(--color-border);
}

.entity-drawer__rel-row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.entity-drawer__rel-icon {
    font-size: 14px;
    color: var(--color-text-soft);
    text-align: center;
}

.entity-drawer__rel-label-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entity-drawer__rel-label {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-drawer__rel-hint {
    color: var(--color-text-muted);
    font-size: 11px;
}

.entity-drawer__rel-chip {
    color: var(--color-text-muted);
    font-size: 11px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    white-space: nowrap;
}

.entity-drawer__rel-open {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.entity-drawer__rel-open:hover,
.entity-drawer__rel-open:focus-visible {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    outline: none;
}

/* Documents */

.entity-drawer__doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entity-drawer__doc-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.entity-drawer__doc-row-main {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.entity-drawer__doc-icon {
    font-size: 16px;
    color: var(--color-text-soft);
    text-align: center;
}

.entity-drawer__doc-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entity-drawer__doc-name {
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
}

.entity-drawer__doc-name:hover,
.entity-drawer__doc-name:focus-visible {
    text-decoration: underline;
    outline: none;
}

.entity-drawer__doc-meta {
    color: var(--color-text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-drawer__doc-open {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.entity-drawer__doc-open:hover,
.entity-drawer__doc-open:focus-visible {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text);
    outline: none;
}

.entity-drawer__doc-preview {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    padding: 8px;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.entity-drawer__preview-pdf {
    width: 100%;
    height: 600px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

/* v1.5.20: wrapper around the embed so a fallback "open in new tab"
   link sits right under the iframe — covers the case where embed
   renders blank without firing onerror. */
.entity-drawer__preview-pdf-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.entity-drawer__preview-pdf-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}
.entity-drawer__preview-pdf-hint a {
    color: var(--color-primary, #6366f1);
    text-decoration: underline;
}

.entity-drawer__preview-image {
    max-width: 100%;
    max-height: 600px;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.entity-drawer__preview-text {
    max-height: 600px;
    overflow: auto;
    padding: 12px;
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 12px;
    color: var(--color-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.entity-drawer__preview-error {
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entity-drawer__preview-error p {
    margin: 0;
}

.entity-drawer__preview-download {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    align-self: flex-start;
}

.entity-drawer__preview-download:hover,
.entity-drawer__preview-download:focus-visible {
    text-decoration: underline;
}

/* Inline error + Retry (relationships partial-failure) */

.entity-drawer__inline-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    font-size: 13px;
}

.entity-drawer__inline-error-text {
    flex: 1 1 auto;
}

.entity-drawer__retry-btn {
    appearance: none;
    background: var(--color-surface);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.entity-drawer__retry-btn:hover,
.entity-drawer__retry-btn:focus-visible {
    background: var(--color-danger);
    color: var(--color-surface);
    outline: none;
}

/* Top-level error (workpackage not loaded) */

.entity-drawer__error {
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.5;
}

.entity-drawer__error-text {
    margin: 0;
}

.entity-drawer__error-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.entity-drawer__error-link:hover,
.entity-drawer__error-link:focus-visible {
    text-decoration: underline;
}

/* Skeleton loading */

.entity-drawer__skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.entity-drawer__skel-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entity-drawer__skel-heading,
.entity-drawer__skel-row {
    height: 12px;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    animation: entity-drawer-pulse 1.4s ease-in-out infinite;
}

.entity-drawer__skel-heading {
    width: 30%;
    height: 14px;
    margin-bottom: 4px;
}

.entity-drawer__skel-row {
    width: 100%;
    height: 14px;
}

.entity-drawer__skel-row:nth-child(odd) {
    width: 80%;
}

@keyframes entity-drawer-pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Reduce motion: turn off slide and pulse animations. */

@media (prefers-reduced-motion: reduce) {
    .entity-drawer {
        transition: none;
    }
    .entity-drawer__backdrop {
        transition: none;
    }
    .entity-drawer__skel-heading,
    .entity-drawer__skel-row {
        animation: none;
    }
}

/* Compact viewports: shrink padding so the drawer doesn't crowd at 480 px. */

@media (max-width: 768px) {
    .entity-drawer {
        width: 100vw;
    }
    .entity-drawer__header,
    .entity-drawer__breadcrumb,
    .entity-drawer__body {
        padding-left: 14px;
        padding-right: 14px;
    }
    .entity-drawer__kf-row {
        grid-template-columns: 100px 1fr;
    }
}

/* ============================================================
   Price Matrix view (entity_drawer.js renderPriceMatrixSection)
   demo branch — rich rendering for Type 7.1 Price Matrix WPs.
   ============================================================ */

.entity-drawer__price-matrix {
    margin: 12px 0 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 51, 153, 0.10);
}

.entity-drawer__pm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background:
        linear-gradient(135deg, rgba(0, 51, 153, 1.0) 0%, #1e293b 100%);
    color: white;
    border-bottom: 3px solid #FFCC00;
    flex-wrap: wrap;
}

.entity-drawer__pm-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.entity-drawer__pm-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFCC00;
}

.entity-drawer__pm-year {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.3;
}

.entity-drawer__pm-applicability {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.entity-drawer__pm-applicability.is-current {
    background: #22c55e;
    color: white;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
    animation: entity-drawer__pm-pulse 2.4s ease-in-out infinite;
}

@keyframes entity-drawer__pm-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.20); }
    50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.10); }
}

.entity-drawer__pm-applicability.is-future {
    background: #fef3c7;
    color: #92400e;
}

.entity-drawer__pm-applicability.is-expired {
    background: #475569;
    color: #cbd5e1;
}

.entity-drawer__pm-body {
    background: white;
    overflow-x: auto;
    padding: 0;
    /* Custom scrollbar — subtle navy on white */
    scrollbar-color: #cbd5e1 #f8fafc;
    scrollbar-width: thin;
}

.entity-drawer__pm-body::-webkit-scrollbar {
    height: 8px;
}
.entity-drawer__pm-body::-webkit-scrollbar-track {
    background: #f8fafc;
}
.entity-drawer__pm-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.entity-drawer__pm-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* The OP-rendered table — beautify everything inside */
.entity-drawer__pm-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11.5px;
    line-height: 1.45;
    margin: 0;
    color: #1e293b;
}

.entity-drawer__pm-body th,
.entity-drawer__pm-body td {
    padding: 7px 10px;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.entity-drawer__pm-body th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid #cbd5e1;
}

/* First column (typically Profile names) — sticky-left, left-aligned */
.entity-drawer__pm-body td:first-child,
.entity-drawer__pm-body th:first-child {
    text-align: left;
    background: #f8fafc;
    position: sticky;
    left: 0;
    z-index: 1;
    font-weight: 600;
    color: #1e293b;
    box-shadow: 1px 0 0 #cbd5e1;
}

.entity-drawer__pm-body th:first-child {
    z-index: 3;
    background: #eef2ff;
    color: #1e293b;
}

.entity-drawer__pm-body tbody tr:nth-child(even) td {
    background: #fbfdfe;
}
.entity-drawer__pm-body tbody tr:nth-child(even) td:first-child {
    background: #f1f5f9;
}

.entity-drawer__pm-body tbody tr:hover td {
    background: #eef2ff;
}
.entity-drawer__pm-body tbody tr:hover td:first-child {
    background: #e0e7ff;
}

.entity-drawer__pm-body tr:last-child td {
    border-bottom: none;
}
.entity-drawer__pm-body td:last-child,
.entity-drawer__pm-body th:last-child {
    border-right: none;
}