/* ─────────────────────────────────────────────────────────────────────────
   ids_card.css — the shared "External IDs" card (assets_ui/components/ids_card/).
   Linked once per page by ids_card_render() via fa_asset().
   ───────────────────────────────────────────────────────────────────────── */

/* ─── External-IDs card ─────────────────────────────────────────────────── */
#card-ids .ids-flow {
    column-width: 280px;
    column-gap: 2.5rem;
}
#card-ids .ids-category {
    break-inside: avoid;       /* keeps section headers + rows together  */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.5rem;
    display: inline-block;     /* extra insurance for break-inside       */
    width: 100%;
}
#card-ids .ids-cat-head {
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color);
    cursor: help;
}
#card-ids .ids-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--fs-sm);
    padding: 0.25rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 4px;
    transition: background-color .12s;
}
#card-ids .ids-row:hover {
    background-color: rgba(0, 123, 255, 0.10);
}
#card-ids .ids-row:hover .ids-label,
#card-ids .ids-row:hover .ids-value {
    color: #003c80;
}
#card-ids .ids-label {
    color: var(--text-muted);
    cursor: help;
    white-space: nowrap;
    border-bottom: 1px dotted #ccc;
}
#card-ids .ids-value {
    font-family: monospace;
    text-align: right;
    word-break: break-all;
}

/* Borderless, off the --icon-* ramp. */
#ids-about-btn {
    background: var(--icon-bg);
    border: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    transition: background-color .12s, color .12s;
}
#ids-about-btn:hover {
    background: var(--icon-bg-hover);
    color: var(--primary-color);
}
#ids-about-btn:active { background: var(--icon-bg-active); }

/* ─── About-the-references modal ────────────────────────────────────────── */
#ids-about-modal {
    position: fixed; inset: 0; z-index: 9998;
    display: none;
}
#ids-about-modal.open { display: block; }
#ids-about-modal .ids-about-backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
#ids-about-modal .ids-about-dialog {
    position: relative;
    margin: 5vh auto 0;
    width: min(880px, 92vw);
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
    overflow: hidden;
}
#ids-about-modal .ids-about-head {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #e2e6f0;
    display: flex; align-items: center; justify-content: space-between;
}
#ids-about-modal .ids-about-head h3 { margin: 0; font-size: var(--fs-lg); }
#ids-about-modal .ids-about-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; padding: 0;
    background: var(--icon-bg); border: 0; border-radius: 6px;
    font-size: var(--fs-2xl); line-height: 1;
    cursor: pointer; color: var(--text-muted);
    transition: background .12s, color .12s;
}
#ids-about-modal .ids-about-close:hover  { color: var(--primary-color); background: var(--icon-bg-hover); }
#ids-about-modal .ids-about-close:active { background: var(--icon-bg-active); }
#ids-about-modal .ids-about-controls {
    padding: 0.65rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex; align-items: center; gap: 0.4rem;
    font-size: var(--fs-sm); color: #666;
}
#ids-about-modal .ids-about-sort {
    background: none;
    border: 1px solid #d8dee8;
    border-radius: 5px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: #555;
}
#ids-about-modal .ids-about-sort.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}
#ids-about-modal .ids-about-list {
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    flex: 1;
}
#ids-about-modal .ids-about-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid #f0f0f0;
}
#ids-about-modal .ids-about-item:last-child { border-bottom: none; }
#ids-about-modal .ids-about-item-head {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
#ids-about-modal .ids-about-item-name {
    font-weight: 600;
    color: #1a1f2e;
}
#ids-about-modal .cat-badge {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em;
    background: #eef2fb; color: #4a5878;
    padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600;
}
#ids-about-modal .ids-about-item-desc {
    font-size: var(--fs-sm); color: #555; line-height: 1.45;
    margin-top: 0.15rem;
}
#ids-about-modal .ids-about-item-meta {
    font-size: var(--fs-xs); color: #888; margin-top: 0.25rem;
    display: flex; gap: 1rem; flex-wrap: wrap;
}
#ids-about-modal .ids-about-item-meta a {
    color: var(--primary-color); text-decoration: none;
}
#ids-about-modal .ids-about-item-meta a:hover { text-decoration: underline; }

/* ─── Card header row (replaces the inline-styled flex wrapper + title) ──── */
.idc-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.idc-title { margin: 0; }
.idc-header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.idc-toggle-label {
    cursor: pointer;
    font-size: var(--fs-md);
    color: var(--text-muted);
    user-select: none;
}
.idc-toggle-checkbox {
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* ─── Show/hide (the "Include all possible IDs" toggle) ────────────────── */
#card-ids .ids-row.u-hidden,
#card-ids .ids-category.u-hidden { display: none; }

/* ─── Empty-value placeholder (dash / no-value colouring) ───────────────── */
.idc-value--empty { color: #bbb; }
.idc-em-dash { font-style: italic; color: #ccc; }

/* ─── About-modal item extras ────────────────────────────────────────────── */
.idc-about-item-alt-name { font-size: var(--fs-sm); color: #777; margin-bottom: 0.15rem; }
.idc-about-link-icon { font-size: 0.75em; }

/* ─── ID value link (faProfile_buildIdLink()) ────────────────────────────── */
.idc-id-link { color: var(--primary-color); text-decoration: none; }
.idc-idlink-icon { font-size: 0.65em; opacity: .5; }

/* ─── About-modal lazy body (loading / error states) ─────────────────────────
   The reference list is fetched on first open (ajax/core/api_ids_about.php) and
   cached in sessionStorage, so these states are usually seen once per visit —
   and never at all when the hover/focus prefetch has already landed. */
#ids-about-modal .ids-about-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: #777;
    font-size: var(--fs-sm);
}
#ids-about-modal .ids-about-retry {
    margin-left: .5rem;
    padding: .2rem .6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}
#ids-about-modal .ids-about-retry:hover { background: #f3f3f3; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — one column below 820px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
    #card-ids .ids-flow {
        column-width: auto;
        column-count: 1;
        column-gap: 0;
    }

    /* Label above, value below, both left-aligned. Right-aligning a value that
       has wrapped onto its own line just makes it hard to scan. */
    #card-ids .ids-row {
        display: block;
        padding: 0.35rem 0.5rem;
    }
    #card-ids .ids-value {
        text-align: left;
        display: block;
        margin-top: 0.1rem;
    }
    #card-ids .ids-label { white-space: normal; }

    #card-ids .ids-category { margin-bottom: 1rem; }
}