/* Standardized "details" page components -- the shared modernized look for the
   Members/Admissions/Claims/Providers/Employees details pages. Built entirely on
   the app's existing --theme-* custom properties (see theme-overrides.css for the
   same convention) so it matches the current palette and flips correctly in dark
   mode with no per-theme overrides needed here. */

.details-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 1rem rgba(var(--theme-body-color-rgb), 0.06);
}

.details-card > .card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background-color: var(--theme-card-cap-bg);
    border-bottom: 1px solid var(--theme-border-color);
    padding: 1rem 1.25rem;
}

.details-card > .card-header > i {
    font-size: 1.1rem;
    color: var(--theme-primary);
    flex-shrink: 0;
}

.details-card > .card-header h3,
.details-card > .card-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Profile summary card banner -- replaces a flat solid-color title bar with a
   soft primary-tinted gradient and a circular avatar, shared by every entity's
   profile card (member/provider/employee). */
.details-profile-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.14), rgba(var(--theme-primary-rgb), 0.02));
    border-bottom: 1px solid var(--theme-border-color);
}

.details-profile-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-primary);
    color: #fff;
    font-size: 1.4rem;
}

.details-profile-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-body-color);
    line-height: 1.3;
}

.details-profile-subtitle {
    font-size: 0.8125rem;
    color: var(--theme-body-color);
    opacity: 0.65;
}

/* Label/value info grid -- replaces bare <table> field layouts with a
   responsive grid of labeled stats. */
.details-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.5rem;
    padding: 1.25rem;
}

.details-info-item.details-info-item-full {
    grid-column: 1 / -1;
}

.details-info-item {
    min-width: 0;
}

.details-info-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-body-color);
    opacity: 0.55;
    margin-bottom: 0.2rem;
}

.details-info-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--theme-body-color);
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .details-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Status/plan pill -- rounded, subtly-tinted badge in place of an outline
   button, reusing each status's existing semantic color variable. */
.details-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.details-status-pill.details-status-primary {
    background-color: rgba(var(--theme-primary-rgb), 0.12);
    color: var(--theme-primary);
}

.details-status-pill.details-status-success {
    background-color: rgba(var(--theme-success-rgb), 0.12);
    color: var(--theme-success);
}

.details-status-pill.details-status-danger {
    background-color: rgba(var(--theme-danger-rgb), 0.12);
    color: var(--theme-danger);
}

.details-status-pill.details-status-warning {
    background-color: rgba(var(--theme-warning-rgb), 0.15);
    color: var(--theme-warning);
}

/* Group of two-or-more pills sitting side by side under a profile name
   (e.g. Claims' Plan pill + Claim Type pill), instead of packed into one. */
.details-pill-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

/* Plan-branded pill variants -- same --plan-* colors used everywhere else
   a plan badge appears (see theme-overrides.css's .btn-{plan} rules), so a
   plan reads as the same color here as on every other page. */
.details-status-pill.details-plan-freedom {
    color: var(--plan-freedom);
    background-color: color-mix(in srgb, var(--plan-freedom) 15%, transparent);
}

.details-status-pill.details-plan-optimum {
    color: var(--plan-optimum);
    background-color: color-mix(in srgb, var(--plan-optimum) 15%, transparent);
}

.details-status-pill.details-plan-united {
    color: var(--plan-united);
    background-color: color-mix(in srgb, var(--plan-united) 15%, transparent);
}

.details-status-pill.details-plan-careplus {
    color: var(--plan-careplus);
    background-color: color-mix(in srgb, var(--plan-careplus) 15%, transparent);
}

.details-status-pill.details-plan-wellcare {
    color: var(--plan-wellcare);
    background-color: color-mix(in srgb, var(--plan-wellcare) 15%, transparent);
}

.details-status-pill.details-plan-devoted {
    color: var(--plan-devoted);
    background-color: color-mix(in srgb, var(--plan-devoted) 15%, transparent);
}

.details-status-pill.details-plan-humana {
    color: var(--plan-humana);
    background-color: color-mix(in srgb, var(--plan-humana) 15%, transparent);
}

/* Claim line-items table header -- Bootstrap's bg-dark/text-light pairing
   inverts independently in this app's dark theme (--theme-light becomes a
   near-black navy, --theme-dark becomes a medium slate), landing dark text
   on a medium-gray background. Explicit colors instead, guaranteed to
   contrast in both themes. */
.details-table-head {
    background-color: var(--theme-primary);
}

.details-table-head th {
    color: #fff;
}

/* Copy-to-clipboard affordance for id values (member id, etc.), replacing the
   outline-button treatment with a plain inline text-button. */
.details-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--theme-primary);
    cursor: pointer;
}

.details-copy-btn > i {
    font-size: 0.8125rem;
}

.details-copy-btn:hover,
.details-copy-btn:focus-visible {
    filter: brightness(1.25);
}

.details-profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Chip list -- assigned clinics / coverage links (Employees), each with an
   inline remove action, in place of stacked plain-text rows. */
.details-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.details-chip-list:empty::after {
    content: 'None assigned';
    font-size: 0.8125rem;
    opacity: 0.55;
}

.details-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    background-color: rgba(var(--theme-primary-rgb), 0.08);
    border-radius: 999px;
    font-size: 0.8125rem;
}

.details-chip > a {
    display: inline-flex;
    color: var(--theme-body-color);
    opacity: 0.5;
}

.details-chip > a:hover {
    opacity: 1;
    color: var(--theme-danger);
}

/* Attachment list (Admissions) -- each file as its own row with a download
   link and a remove action, instead of stacked plain-text spans. */
.details-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.details-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--theme-tertiary-bg);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.details-attachment-item > a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Notes timeline (Admissions) -- each note as its own card instead of
   floated/stacked labels, newest first. */
.details-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.details-note {
    padding: 0.75rem 0.9rem;
    background-color: var(--theme-tertiary-bg);
    border-radius: 0.6rem;
}

.details-note-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.details-note-author {
    font-weight: 600;
    font-size: 0.8125rem;
}

.details-note-date {
    font-size: 0.75rem;
    opacity: 0.6;
    white-space: nowrap;
}

.details-note-body {
    font-size: 0.875rem;
    white-space: pre-wrap;
}