/* Gedeelde balk van de FinOps hub: dezelfde markup en stijl in de portal en in elke tool. */
.hubbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 48px; padding: 0 1.25rem; background: #2c3e3f; color: #e8edf2; font: 500 14px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.hubbar a { color: inherit; text-decoration: none; }
.hubbar a:hover { text-decoration: underline; }
.hubbar a:focus-visible, .hubbar .hubbar__out:focus-visible { outline: 2px solid #e9893d; outline-offset: 2px; }
.hubbar__path, .hubbar__end { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hubbar__home { font-weight: 600; font-size: 16px; }
.hubbar__sep { opacity: .4; }
.hubbar__env { padding: .15rem .55rem; border: 1px solid rgba(232, 237, 242, .4); border-radius: 999px; font-size: 12px; }
.hubbar__env { color: #e9893d; border-color: #e9893d; }
.hubbar__who { font-size: 13px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubbar .hubbar__out { font: inherit; font-size: 13px; color: inherit; background: none; border: 1px solid rgba(232, 237, 242, .4); border-radius: 100px 0 100px 7px; padding: .35rem .9rem; cursor: pointer; }
.hubbar .hubbar__out:hover { border-color: #e8edf2; }
.hubbar [hidden] { display: none !important; }
@media (max-width: 560px) { .hubbar__who { display: none; } }

.hubbar__logo { flex: none; width: 20px; height: 20px; background: #e9893d; border-radius: 100% 0 100% 5px; }
.hubbar .ico { flex: none; opacity: .85; }
.hubbar .hubbar__out { display: inline-flex; align-items: center; gap: .4rem; }

/* Kopband onder de balk: zelfde in de portal en in elke tool */
.band { background: #2c3e3f; color: #fff; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.band__inner { max-width: 1240px; margin: 0 auto; padding: 34px clamp(16px, 3vw, 34px) 30px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
.band__title h1 { display: flex; align-items: center; margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; }
.band__title p { margin: 10px 0 0; color: #e9893d; font-size: 15px; font-weight: 500; }
.band__ico { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; margin-right: 16px; background: rgba(255, 255, 255, .1); border-radius: 100% 0 100% 8px; color: #e9893d; }
.hubbar__who + .hubbar__out, #who .hubbar__who { margin-right: .5rem; }
.hubbar__path #crumb { display: inline-flex; align-items: center; gap: .6rem; }