/* 藥品決策歷程 (drug decision history). Uses only the :root tokens in style.css. */

/* .main-content is 100vh with overflow hidden, so every view scrolls itself
   (.app-view already has flex: 1 and min-height: 0). */
#drugHistoryView.app-view-active {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Same topbar layout the other explore views get in style.css: the sub-toggle
   takes its own full-width row instead of being squeezed beside the actions. */
body[data-active-view="drug-history"] .topbar { flex-wrap: wrap; }
body[data-active-view="drug-history"] .topbar-main { flex-basis: 100%; }

/* A fifth explore subtab made the phone strip 5px too wide, hiding 關係人
   behind the strip's invisible scrollbar on every explore view. */
@media (max-width: 520px) {
    .explore-subtab { padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* With the sidebar open, below 1280px the strip got ~160px of the 402px it
   needs, hiding the last tabs behind an invisible scrollbar (two tabs on
   every explore view before this one was added, three after). Give it its
   own row there. */
@media (min-width: 521px) and (max-width: 1279px) {
    .topbar-main { flex-wrap: wrap; }
    .explore-subtabs:not([hidden]) { flex-basis: 100%; }
}

.drug-history-view {
    padding: var(--panel-padding);
    max-width: var(--layout-content-max);
    font-family: var(--font-ui);
    color: var(--text-1);
}

.dh-title { margin-bottom: 0.75rem; }

.dh-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.dh-form label { font-size: var(--fs-sm); color: var(--text-2); }
.dh-form input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    background: var(--surface);
}
.dh-form button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--surface);
    font: inherit;
    cursor: pointer;
}
.dh-form button:hover { background: var(--accent-strong); }
.dh-form input:focus-visible,
.dh-form button:focus-visible,
.dh-case-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.dh-statement {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-muted);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    margin-bottom: 0.75rem;
}

.dh-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: var(--fs-xs);
    color: var(--text-2);
    margin-bottom: 0.75rem;
}

.dh-empty,
.dh-warning {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-2);
    background: var(--surface);
}
.dh-warning { border-style: solid; border-color: var(--orange); margin-bottom: 0.75rem; }

.dh-legend {
    margin-bottom: 1rem;
    font-size: var(--fs-xs);
    color: var(--text-2);
}
.dh-legend summary { cursor: pointer; color: var(--text-1); }
.dh-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.4rem;
}
.dh-legend-name { min-width: 2.5rem; font-weight: 600; }

.dh-timeline {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.dh-grid {
    display: grid;
    grid-template-columns: 7rem repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
}
.dh-grid-head {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-2);
}
.dh-row + .dh-row { border-top: 1px solid var(--border); }
.dh-date { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-2); }
.dh-col-2 { grid-column: 2; }
.dh-col-3 { grid-column: 3; }
.dh-col-4 { grid-column: 4; }
.dh-lane-tag { display: none; }

.dh-card { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-sm); }
.dh-card-head { font-weight: 600; font-size: var(--fs-xs); color: var(--text-2); }
.dh-case-link {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-1);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}
.dh-case-link:hover { color: var(--accent-strong); }

.dh-field { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.dh-field-name { color: var(--text-2); font-size: var(--fs-xs); }
.dh-field-value { font-weight: 600; }
.dh-source,
.dh-muted { color: var(--text-3); font-size: var(--fs-xs); }

.dh-items { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.dh-items li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.dh-code { font-variant-numeric: tabular-nums; font-weight: 600; }

.dh-labels { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.dh-chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: var(--fs-min);
    line-height: 1.5;
    color: var(--text-2);
    background: var(--surface-2);
}
.dh-avail-sourced { border-color: var(--green); color: var(--text-1); }
.dh-avail-to_confirm { border-color: var(--orange); color: var(--text-1); }
.dh-avail-not_collected,
.dh-avail-not_public,
.dh-avail-not_applicable { border-style: dashed; }
.dh-review { background: var(--surface); }

.dh-not-shown {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: var(--fs-xs);
}
.dh-not-shown-title { font-weight: 600; margin-bottom: 0.35rem; color: var(--text-1); }
.dh-not-shown ul { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.dh-not-shown li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }

/* One DOM for every width: below 768px the lanes stack and each row names its lane. */
@media (max-width: 767px) {
    .dh-grid { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
    .dh-grid-head { display: none; }
    .dh-col-2, .dh-col-3, .dh-col-4 { grid-column: 1; }
    .dh-lane-tag {
        display: inline-block;
        margin-bottom: 0.2rem;
        font-size: var(--fs-min);
        font-weight: 600;
        color: var(--text-2);
    }
    .dh-lane-meeting .dh-lane-tag { color: var(--accent-strong); }
}

/* Entry point in the drug drawer (app.js showDrugDrawerEnhanced). */
.drawer-history-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: none;
}
.drawer-history-link:hover { text-decoration: underline; }
.drawer-history-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.dh-brand-links {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: var(--fs-sm);
}
.dh-candidates { margin: 0; padding-left: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.dh-candidates a { color: var(--accent-strong); font-weight: 600; }
.dh-candidates + .dh-not-shown-title { margin-top: 0.75rem; }
.dh-not-shown-title .dh-muted { font-weight: 400; margin-left: 0.35rem; }
.dh-more { margin-top: 0.5rem; }