DavidL72Code/UMB_Sustainable_Chatbot
0
1:root {2 --bg: #f0f5fb;3 --panel: #ffffff;4 --header-bg: #132245;5 --header-bg-alt: #005A8B;6 --brand: #005a8b;7 --brand-dark: #132245;8 --brand-light: #ddebf9;9 --accent: #fede42;10 --warning: #b45309;11 --danger: #b42318;12 --success: #256f46;13 --text: #201f1f;14 --muted: #5a6572;15 --line: #d9e1ea;16 --shadow: 0 4px 24px rgba(19, 34, 69, 0.10);17 --shadow-header: 0 2px 12px rgba(19, 34, 69, 0.18);18}19 20* {21 box-sizing: border-box;22}23 24body {25 margin: 0;26 min-height: 100vh;27 font-family: "Inter", sans-serif;28 color: var(--text);29 background: var(--bg);30}31 32a {33 color: inherit;34}35 36.dashboard-header {37 background: linear-gradient(135deg, var(--header-bg) 0%, var(--header-bg-alt) 50%, var(--header-bg) 100%);38 background-size: 200% 100%;39 animation: gradient-slide 16s ease-in-out infinite;40 border-bottom: 2px solid var(--accent);41 box-shadow: var(--shadow-header);42 color: #ffffff;43}44 45.dashboard-header-inner {46 width: min(1100px, calc(100vw - 32px));47 margin: 0 auto;48 min-height: 74px;49 display: flex;50 align-items: center;51 gap: 16px;52 padding: 18px 0;53 user-select: none;54}55 56.dashboard-umb-logo {57 height: 36px;58 width: auto;59 filter: brightness(0) invert(1);60 flex-shrink: 0;61}62 63.dashboard-logo {64 display: flex;65 flex-direction: column;66 gap: 2px;67}68 69.dashboard-logo-name {70 font-family: "Lora", serif;71 font-size: 22px;72 font-weight: 700;73 color: #ffffff;74 letter-spacing: 0.01em;75 line-height: 1.1;76}77 78.dashboard-logo-tagline {79 font-size: 12px;80 font-weight: 400;81 color: rgba(255, 255, 255, 0.72);82 letter-spacing: 0.06em;83 text-transform: uppercase;84}85 86.eyebrow {87 margin: 0 0 6px;88 color: rgba(255, 255, 255, 0.76);89 font-size: 12px;90 font-weight: 700;91 letter-spacing: 0.08em;92 text-transform: uppercase;93}94 95h1,96h2,97h3 {98 margin: 0;99}100 101h1 {102 font-family: "Lora", serif;103 font-size: 32px;104 line-height: 1.1;105}106 107h2 {108 font-size: 16px;109 color: var(--brand-dark);110}111 112h3 {113 font-size: 12px;114 color: var(--muted);115 letter-spacing: 0.06em;116 text-transform: uppercase;117}118 119.header-actions {120 margin-left: auto;121 display: flex;122 align-items: center;123 gap: 8px;124}125 126.header-actions a {127 display: inline-flex;128 align-items: center;129 min-height: 32px;130 padding: 6px 14px;131 border: 1px solid var(--accent);132 border-radius: 999px;133 background: var(--accent);134 color: var(--header-bg);135 text-decoration: none;136 font-size: 13px;137 font-weight: 600;138 transition: background 130ms ease, border-color 130ms ease;139}140 141.header-actions a:hover {142 background: #e8cc2a;143 border-color: #e8cc2a;144}145 146@keyframes gradient-slide {147 0%,148 100% {149 background-position: 0% 50%;150 }151 152 50% {153 background-position: 100% 50%;154 }155}156 157.dashboard-shell {158 width: min(1180px, calc(100vw - 32px));159 margin: 0 auto;160 padding: 22px 0 44px;161}162 163.metric-grid {164 display: grid;165 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));166 gap: 12px;167 margin-bottom: 16px;168}169 170.metric-card,171.panel {172 background: var(--panel);173 border: 1px solid var(--line);174 border-radius: 8px;175 box-shadow: var(--shadow);176}177 178.metric-card {179 min-height: 92px;180 padding: 16px;181 display: flex;182 flex-direction: column;183 justify-content: space-between;184}185 186.metric-card span {187 color: var(--muted);188 font-size: 12px;189 font-weight: 700;190 text-transform: uppercase;191 letter-spacing: 0.06em;192}193 194.metric-card strong {195 color: var(--brand-dark);196 font-size: 32px;197 line-height: 1;198}199 200.dashboard-grid,201.detail-layout {202 display: grid;203 grid-template-columns: 1.45fr 1fr;204 gap: 16px;205 align-items: start;206}207 208.panel {209 padding: 18px;210 overflow: hidden;211}212 213.panel-wide {214 grid-column: span 2;215}216 217.panel-header {218 display: flex;219 align-items: baseline;220 justify-content: space-between;221 gap: 16px;222 padding-bottom: 12px;223 margin-bottom: 12px;224 border-bottom: 1px solid var(--line);225}226 227.panel-header span {228 min-width: 0;229 color: var(--muted);230 font-size: 12px;231 overflow: hidden;232 text-overflow: ellipsis;233 white-space: nowrap;234}235 236.event-list,237.compact-list {238 display: flex;239 flex-direction: column;240 gap: 8px;241}242 243.event-row,244.compact-list a {245 display: grid;246 grid-template-columns: auto minmax(0, 1fr) auto;247 gap: 12px;248 align-items: center;249 padding: 12px;250 border: 1px solid var(--line);251 border-radius: 7px;252 color: var(--text);253 text-decoration: none;254 background: #fbfdff;255}256 257.event-row:hover,258.compact-list a:hover {259 border-color: #a9c8e4;260 background: var(--brand-light);261}262 263.event-main {264 min-width: 0;265 display: flex;266 flex-direction: column;267 gap: 4px;268}269 270.event-main strong,271.event-main em,272.compact-list a {273 overflow: hidden;274 text-overflow: ellipsis;275 white-space: nowrap;276}277 278.event-main strong {279 font-size: 14px;280}281 282.event-main em {283 color: var(--muted);284 font-size: 13px;285 font-style: normal;286}287 288.event-meta {289 color: var(--muted);290 font-size: 12px;291}292 293.history-table-wrap {294 overflow-x: auto;295}296 297.history-table {298 width: 100%;299 border-collapse: collapse;300 font-size: 13px;301}302 303.history-table th,304.history-table td {305 padding: 12px 10px;306 border-bottom: 1px solid var(--line);307 text-align: left;308 vertical-align: top;309}310 311.history-table th {312 color: var(--muted);313 font-size: 11px;314 font-weight: 800;315 letter-spacing: 0.06em;316 text-transform: uppercase;317}318 319.history-link {320 min-width: 260px;321 display: grid;322 gap: 4px;323 color: var(--text);324 text-decoration: none;325}326 327.history-link:hover strong {328 color: var(--brand);329 text-decoration: underline;330}331 332.history-link strong,333.history-link span {334 max-width: 620px;335 overflow: hidden;336 text-overflow: ellipsis;337 white-space: nowrap;338}339 340.history-link span,341.history-table small,342.muted-value {343 color: var(--muted);344}345 346.history-table small,347.muted-value,348.count-pair {349 display: block;350 margin-top: 4px;351 font-size: 12px;352}353 354.score-pill {355 display: inline-flex;356 align-items: center;357 justify-content: center;358 min-width: 42px;359 min-height: 26px;360 padding: 0 8px;361 border-radius: 999px;362 background: #e8f4ee;363 color: var(--success);364 font-size: 12px;365 font-weight: 800;366}367 368.score-low {369 background: #fff4dd;370 color: var(--warning);371}372 373.status-pill {374 display: inline-flex;375 align-items: center;376 justify-content: center;377 min-width: 86px;378 min-height: 26px;379 padding: 0 9px;380 border-radius: 999px;381 background: #e8f4ee;382 color: var(--success);383 font-size: 11px;384 font-weight: 800;385 letter-spacing: 0.04em;386 text-transform: uppercase;387}388 389.status-clarification {390 background: #fff4dd;391 color: var(--warning);392}393 394.status-blocked,395.status-error {396 background: #fde7e5;397 color: var(--danger);398}399 400.ranked-list,401.source-list {402 list-style: none;403 margin: 0;404 padding: 0;405 display: flex;406 flex-direction: column;407 gap: 10px;408}409 410.ranked-list li {411 display: flex;412 align-items: center;413 justify-content: space-between;414 gap: 12px;415 padding: 10px 0;416 border-bottom: 1px solid #edf1f5;417}418 419.ranked-list span {420 min-width: 0;421 color: var(--text);422 font-size: 13px;423}424 425.ranked-list strong {426 color: var(--brand);427}428 429.empty-state {430 margin: 0;431 color: var(--muted);432 font-size: 14px;433 line-height: 1.5;434}435 436.detail-stats {437 margin: 0;438 display: grid;439 grid-template-columns: repeat(2, minmax(0, 1fr));440 gap: 10px;441}442 443.single-column {444 grid-template-columns: 1fr;445}446 447.detail-stats div {448 padding: 12px;449 border: 1px solid var(--line);450 border-radius: 7px;451 background: #fbfdff;452}453 454dt {455 color: var(--muted);456 font-size: 11px;457 font-weight: 800;458 text-transform: uppercase;459 letter-spacing: 0.06em;460}461 462dd {463 margin: 6px 0 0;464 color: var(--brand-dark);465 font-size: 20px;466 font-weight: 800;467}468 469.mapping-strip {470 display: flex;471 flex-wrap: wrap;472 gap: 8px;473 align-items: center;474 padding: 10px 12px;475 border: 1px solid var(--line);476 border-radius: 7px;477 background: #fbfdff;478 color: var(--muted);479 font-size: 12px;480 font-weight: 700;481}482 483.mapping-strip span {484 color: var(--brand-dark);485}486 487.mapping-strip strong {488 color: var(--brand);489 font-size: 11px;490 letter-spacing: 0.06em;491 text-transform: uppercase;492}493 494.qa-block {495 display: grid;496 gap: 8px;497 padding: 14px 0;498 border-bottom: 1px solid #edf1f5;499}500 501.qa-block:last-child {502 border-bottom: none;503}504 505.qa-block p {506 margin: 0;507 line-height: 1.6;508 white-space: pre-wrap;509}510 511.source-list li {512 display: grid;513 gap: 5px;514 padding: 12px;515 border: 1px solid var(--line);516 border-radius: 7px;517 background: #fbfdff;518}519 520.source-list span,521.source-list a {522 color: var(--muted);523 font-size: 12px;524 word-break: break-word;525}526 527.reason-list {528 margin: 12px 0 0;529 padding-left: 18px;530 color: var(--muted);531 font-size: 13px;532 line-height: 1.5;533}534 535.metadata-table-wrap {536 overflow-x: auto;537}538 539.metadata-table {540 width: 100%;541 border-collapse: collapse;542 font-size: 13px;543}544 545.metadata-table th,546.metadata-table td {547 padding: 10px;548 border-bottom: 1px solid var(--line);549 text-align: left;550 vertical-align: top;551}552 553.metadata-table th {554 color: var(--muted);555 font-size: 11px;556 font-weight: 800;557 text-transform: uppercase;558 letter-spacing: 0.06em;559}560 561.json-block {562 max-height: 460px;563 margin: 0;564 padding: 14px;565 overflow: auto;566 border-radius: 7px;567 background: #0f1b2d;568 color: #edf6ff;569 font-size: 12px;570 line-height: 1.55;571}572 573@media (max-width: 860px) {574 .dashboard-header-inner {575 align-items: flex-start;576 flex-direction: column;577 justify-content: center;578 padding: 18px 0;579 }580 581 .header-actions {582 width: 100%;583 margin-left: 0;584 flex-wrap: wrap;585 }586 587 .metric-grid,588 .dashboard-grid,589 .detail-layout {590 grid-template-columns: 1fr;591 }592 593 .panel-wide {594 grid-column: span 1;595 }596 597 .event-row {598 grid-template-columns: 1fr;599 }600 601 .metric-grid {602 grid-template-columns: repeat(2, minmax(0, 1fr));603 }604}605 606 607/* Per-answer operational metrics: path, token cost, retrieval scores. */608.metric-note {609 margin-top: 6px;610 color: var(--muted);611 font-size: 11px;612 font-weight: 600;613}614 615.metric-card strong {616 font-size: 26px;617}618 619.path-label {620 display: inline-block;621 max-width: 220px;622 overflow: hidden;623 text-overflow: ellipsis;624 white-space: nowrap;625 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;626 font-size: 11px;627 color: var(--text);628 vertical-align: bottom;629}630 631.metrics-table {632 width: 100%;633 border-collapse: collapse;634 font-size: 12px;635 margin-top: 10px;636 display: block;637 overflow-x: auto;638}639 640.metrics-table th,641.metrics-table td {642 padding: 8px 8px;643 border-bottom: 1px solid var(--line);644 text-align: left;645 vertical-align: top;646 white-space: nowrap;647}648 649.metrics-table th {650 color: var(--muted);651 font-size: 11px;652 font-weight: 800;653 letter-spacing: 0.06em;654 text-transform: uppercase;655}656 657.kind-pill {658 display: inline-flex;659 align-items: center;660 padding: 2px 8px;661 border-radius: 999px;662 background: #eef1f6;663 color: var(--muted);664 font-size: 11px;665 font-weight: 700;666 text-transform: uppercase;667 letter-spacing: 0.04em;668}669 670.kind-pill.kind-llm {671 background: #e7eefb;672 color: var(--brand);673}674 675.kind-pill.kind-retrieval {676 background: #e8f4ee;677 color: var(--success);678}679 680.signed-in-as {681 display: inline-flex;682 align-items: center;683 padding: 4px 10px;684 border-radius: 999px;685 background: rgba(255, 255, 255, 0.16);686 color: #fff;687 font-size: 12px;688 font-weight: 700;689}690 691.flag-pill {692 display: inline-block;693 margin: 0 4px 4px 0;694 padding: 2px 8px;695 border-radius: 999px;696 background: #fff4dd;697 color: var(--warning);698 font-size: 11px;699 font-weight: 700;700}701 702.flag-pill.flag-blocked,703.flag-pill.flag-error {704 background: #fdecec;705 color: var(--danger, #b3261e);706}707