/* ============================================================================
   Government Affairs — "Legislative Dossier" design system
   ----------------------------------------------------------------------------
   One shared language for every GA detail page. Global (not scoped) so bills,
   rules, federal bills, legislators, committees and initiatives all share it
   with no ::deep hacks. Built on the app's existing --crm-* tokens (app.css),
   so it inherits light/dark automatically.

   Signature devices: the docket "stamp", the horizontal progress track, and
   the sticky "WSHA's read" rail. Everything else stays quiet and dense.
   ========================================================================== */

/* ── Docket masthead ──────────────────────────────────────────────────────── */

.ga-masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.15rem 1.4rem;
    margin-bottom: 1rem;
    background: var(--crm-white, #fff);
    border: 1px solid var(--crm-border, #d8dee7);
    border-radius: var(--crm-r, 10px);
    box-shadow: var(--crm-shadow-xs);
}

.ga-masthead-main { flex: 1 1 auto; min-width: 0; }

.ga-masthead-head {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    margin-top: 0.4rem;
}

/* The docket "stamp" — bill/WSR/federal number as a monospace case-file mark. */
.ga-docket {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 0.35rem 0.6rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--crm-navy, #0f172a);
    background: var(--crm-bg, #f5f7fa);
    border: 1.5px solid var(--crm-navy, #0f172a);
    border-radius: 7px;
    box-shadow: 2px 2px 0 rgba(15, 23, 42, 0.08);
    white-space: nowrap;
    text-transform: uppercase;
}

.ga-avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--crm-border, #d8dee7);
    background: var(--crm-bg, #f5f7fa);
}

.ga-masthead-text { min-width: 0; flex: 1 1 auto; }

.ga-masthead-title {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--crm-navy, #0f172a);
}

.ga-masthead-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.ga-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.7rem;
    margin-top: 0.45rem;
}

.ga-meta-item { font-size: 0.78rem; color: var(--crm-text-3, #9ca3af); }
.ga-meta-item strong { color: var(--crm-text-2, #4b5563); font-weight: 600; }

/* ── Chips (ONE vocabulary) ───────────────────────────────────────────────── */

.ga-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ga-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ga-chip-neutral   { background: var(--crm-bg, #f5f7fa); color: var(--crm-text-2, #4b5563); border-color: var(--crm-border, #d8dee7); }
.ga-chip-chamber   { background: rgba(31,41,55,.08);  color: var(--crm-navy, #0f172a); border-color: rgba(31,41,55,.18); }
.ga-chip-status    { background: rgba(13,110,253,.10); color: #0a58ca; border-color: rgba(13,110,253,.25); }
.ga-chip-request   { background: rgba(217,119,6,.10);  color: #b45309; border-color: rgba(217,119,6,.25); }
.ga-chip-teal      { background: rgba(0,197,168,.12);  color: var(--crm-teal-700, #00735f); border-color: rgba(0,197,168,.32); }
.ga-chip-terminal  { background: var(--crm-navy, #0f172a); color: #fff; border-color: var(--crm-navy, #0f172a); }
.ga-chip-dark      { background: var(--crm-navy, #0f172a); color: #fff; border-color: var(--crm-navy, #0f172a); }

/* Stance */
.ga-chip-support   { background: rgba(21,128,61,.12);  color: #15803d; border-color: rgba(21,128,61,.30); }
.ga-chip-oppose    { background: rgba(185,28,28,.10);  color: #b91c1c; border-color: rgba(185,28,28,.28); }
.ga-chip-amend     { background: rgba(180,83,9,.10);   color: #b45309; border-color: rgba(180,83,9,.28); }
.ga-chip-monitor   { background: var(--crm-bg, #f5f7fa); color: var(--crm-text-2, #4b5563); border-color: var(--crm-border, #d8dee7); }

/* Party */
.ga-chip-dem       { background: rgba(13,110,253,.10); color: #0a58ca; border-color: rgba(13,110,253,.25); }
.ga-chip-rep       { background: rgba(185,28,28,.10);  color: #b91c1c; border-color: rgba(185,28,28,.25); }
.ga-chip-ind       { background: rgba(120,53,15,.10);  color: #92400e; border-color: rgba(120,53,15,.22); }

/* Priority tier */
.ga-chip-tier1     { background: rgba(185,28,28,.10);  color: #b91c1c; border-color: rgba(185,28,28,.28); }
.ga-chip-tier2     { background: rgba(180,83,9,.10);   color: #b45309; border-color: rgba(180,83,9,.26); }
.ga-chip-tier3     { background: var(--crm-bg, #f5f7fa); color: var(--crm-text-2, #4b5563); border-color: var(--crm-border, #d8dee7); }

/* ── Progress track ───────────────────────────────────────────────────────── */

.ga-track {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.85rem 1.4rem;
    margin-bottom: 1rem;
    background: var(--crm-white, #fff);
    border: 1px solid var(--crm-border, #d8dee7);
    border-radius: var(--crm-r, 10px);
    box-shadow: var(--crm-shadow-xs);
    overflow-x: auto;
}

.ga-track-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    text-align: center;
}

.ga-track-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--crm-border, #d8dee7);
    border: 2px solid var(--crm-border, #d8dee7);
    flex: 0 0 auto;
}

.ga-track-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--crm-text-3, #9ca3af);
    max-width: 9ch;
    line-height: 1.15;
}

.ga-track-line {
    flex: 1 1 auto;
    min-width: 20px;
    height: 2px;
    margin: 0 2px;
    margin-bottom: 18px; /* align to the dot row, above the labels */
    background: var(--crm-border, #d8dee7);
}

.ga-track-line-done { background: var(--crm-teal, #00C5A8); }

.ga-track-done .ga-track-dot   { background: var(--crm-teal, #00C5A8); border-color: var(--crm-teal, #00C5A8); }
.ga-track-done .ga-track-label { color: var(--crm-text-2, #4b5563); }

.ga-track-current .ga-track-dot {
    background: var(--crm-white, #fff);
    border-color: var(--crm-teal, #00C5A8);
    box-shadow: 0 0 0 4px rgba(0,197,168,.18);
}
.ga-track-current .ga-track-label { color: var(--crm-teal-700, #00735f); font-weight: 700; }

.ga-track-skipped .ga-track-dot { background: transparent; border-style: dashed; }
.ga-track-skipped .ga-track-label { color: var(--crm-text-3, #9ca3af); text-decoration: line-through; }

.ga-track-fail .ga-track-dot   { background: #b91c1c; border-color: #b91c1c; }
.ga-track-fail .ga-track-label { color: #b91c1c; font-weight: 700; }

/* ── Workspace (main + sticky rail) ───────────────────────────────────────── */

.ga-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
}

.ga-workspace-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

.ga-workspace-rail {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .ga-workspace { grid-template-columns: 1fr; }
    .ga-workspace-rail { position: static; }
}

/* ── Panel (the info-panel card, generalizes .bd-info-panel) ──────────────── */

.ga-panel {
    background: var(--crm-white, #fff);
    border: 1px solid var(--crm-border, #d8dee7);
    border-radius: var(--crm-r, 10px);
    box-shadow: var(--crm-shadow-xs);
    overflow: hidden;
}

.ga-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--crm-border, #d8dee7);
    flex-wrap: wrap;
}

.ga-panel-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crm-navy, #0f172a);
}

.ga-panel-title::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--crm-teal, #00C5A8);
    border-radius: 2px;
    flex-shrink: 0;
}

.ga-panel-title i { color: var(--crm-teal-600, #009E88); font-size: 0.95rem; }

.ga-panel-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--crm-text-2, #4b5563);
    background: var(--crm-bg, #f5f7fa);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}

.ga-panel-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

.ga-panel-body { padding: 14px 16px; }
.ga-panel-body.ga-flush { padding: 0; }

.ga-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--crm-text-3, #9ca3af);
    font-size: 0.85rem;
}
.ga-empty i { font-size: 1.6rem; display: block; margin-bottom: 8px; color: var(--crm-border-2, #c5d3e8); }
.ga-empty p { margin: 0; }

.ga-lead { margin: 0 0 8px; color: var(--crm-text-1, #1f2937); font-size: 0.95rem; font-weight: 500; line-height: 1.5; }
.ga-longtext { color: var(--crm-text-2, #4b5563); font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap; }

/* ── Row lists (shared across panels) ─────────────────────────────────────── */

.ga-rows { display: flex; flex-direction: column; }

.ga-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--crm-border, #d8dee7);
}
.ga-row:last-child { border-bottom: none; }

.ga-row-main { min-width: 0; flex: 1 1 auto; }
.ga-row-title { font-size: 0.88rem; font-weight: 600; color: var(--crm-navy, #0f172a); }
.ga-row-sub { font-size: 0.75rem; color: var(--crm-text-3, #9ca3af); margin-top: 2px; }
.ga-row-aside { text-align: right; flex-shrink: 0; }

.ga-row-link { text-decoration: none; color: inherit; border-radius: 6px; transition: background 120ms ease; padding: 9px 6px; }
.ga-row-link:hover { background: var(--crm-bg, #f5f7fa); }

.ga-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 767.98px) { .ga-grid-2 { grid-template-columns: 1fr; } }

/* ── Rail "at a glance" key/value ─────────────────────────────────────────── */

.ga-kv { display: flex; flex-direction: column; gap: 8px; }
.ga-kv-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ga-kv-key { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--crm-text-3, #9ca3af); }
.ga-kv-val { font-size: 0.82rem; color: var(--crm-text-1, #1f2937); text-align: right; }

/* Big stance readout in the rail */
.ga-stance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ga-stance-label { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.ga-stance-support .ga-stance-label { color: #15803d; }
.ga-stance-oppose  .ga-stance-label { color: #b91c1c; }
.ga-stance-amend   .ga-stance-label { color: #b45309; }
.ga-stance-monitor .ga-stance-label { color: var(--crm-text-2, #4b5563); }

/* ── Workbench: restyle the embedded Bootstrap panel cards globally ───────────
   The workbench panels (BillPositionPanel / BillAssignmentPanel /
   BillTalkingPointPanel / TestimonyPanel / StakeholderCommunicationPanel) are
   plain Bootstrap .card components with NO scoped CSS, so these GLOBAL rules
   restyle them to the dossier language wherever they appear — no ::deep, and
   consistent on every page (not just BillDetail).
   ────────────────────────────────────────────────────────────────────────── */

.ga-workbench .card {
    background: var(--crm-white, #fff) !important;
    border: 1px solid var(--crm-border, #d8dee7) !important;
    border-radius: var(--crm-r, 10px) !important;
    box-shadow: var(--crm-shadow-xs) !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    transition: box-shadow var(--crm-mid, .25s) var(--crm-ease, ease);
}

/* Workbench panels are static content, not navigation — suppress the global
   .card:hover lift (translateY + shadow-lg) so they don't "bounce" on hover
   (talking points, stakeholder communications, position, assignment, testimony). */
.ga-workbench .card:hover {
    transform: none !important;
    box-shadow: var(--crm-shadow-xs) !important;
}

.ga-workbench .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--crm-border, #d8dee7) !important;
    padding: 12px 16px !important;
}

.ga-workbench .card-header strong {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crm-navy, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ga-workbench .card-header strong::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--crm-teal, #00C5A8);
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}

.ga-workbench .card-header strong i { color: var(--crm-teal-600, #009E88); font-size: 0.95rem; }

.ga-workbench .card-header .badge.bg-secondary {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--crm-text-2, #4b5563);
    background: var(--crm-bg, #f5f7fa) !important;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0;
}

.ga-workbench .card-body { padding: 14px 16px; }
.ga-workbench .card-body.text-muted { color: var(--crm-text-3, #9ca3af) !important; font-size: 0.85rem; }

.ga-workbench .form-label.small.text-muted {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--crm-text-3, #9ca3af);
    margin-bottom: 4px;
}

.ga-workbench .badge.bg-primary,
.ga-workbench .badge.bg-info,
.ga-workbench .badge.bg-success,
.ga-workbench .badge.bg-warning { border-radius: 999px !important; font-weight: 500; }

/* ── Doc-text reader (shared, was .bd-doc-text) ───────────────────────────── */

.ga-doc-text-panel { background: var(--crm-bg, #f5f7fa); border: 1px solid var(--crm-border, #d8dee7); border-radius: 6px; padding: 0.75rem; margin-top: 6px; }
.ga-doc-text { max-height: 520px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; font-family: var(--bs-font-monospace); font-size: 0.82rem; margin: 0; color: var(--crm-text-1, #1f2937); }

.ga-spin { display: inline-block; animation: ga-spin-kf 0.9s linear infinite; }
@keyframes ga-spin-kf { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Comment-period urgency text */
.ga-cc-success { color: #15803d; }
.ga-cc-warning { color: #b45309; }
.ga-cc-danger  { color: #b91c1c; }
.ga-cc-closed  { color: var(--crm-text-3, #9ca3af); }

/* ── Grounded AI rule summary + citations ─────────────────────────────────── */

.ga-summary-block + .ga-summary-block { padding-top: 2px; }

.ga-summary-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crm-text-3, #9ca3af);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}
.ga-summary-label i { color: var(--crm-teal-600, #009E88); }

/* Citation chips — the trust device. WAC + doc + register, clickable. */
.ga-citations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ga-citations-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--crm-text-3, #9ca3af);
    margin-right: 2px;
}

.ga-cite {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--crm-border, #d8dee7);
    background: var(--crm-bg, #f5f7fa);
    color: var(--crm-text-2, #4b5563);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--crm-fast, .15s) ease, border-color var(--crm-fast, .15s) ease, color var(--crm-fast, .15s) ease;
}
.ga-cite:hover {
    background: var(--crm-teal-50, rgba(0,197,168,.08));
    border-color: var(--crm-teal, #00C5A8);
    color: var(--crm-teal-700, #00735f);
}
.ga-cite-wac  { }
.ga-cite-doc  { }
.ga-cite-reg  { }

.ga-summary-foot {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--crm-border, #d8dee7);
    font-size: 0.72rem;
    color: var(--crm-text-3, #9ca3af);
}

.ga-official-subject { border-top: 1px solid var(--crm-border, #d8dee7); padding-top: 10px; }
.ga-official-subject > summary {
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crm-text-3, #9ca3af);
    list-style: revert;
}
.ga-official-subject > summary:hover { color: var(--crm-navy, #0f172a); }