:root{ --paper:#f6f7f9; --surface:#fff; --surface-2:#f0f2f5; --rule:#dfe3e8; --ink:#1b1f24; --ink-2:#4a525c; --ink-3:#79828d; --accent:#0b6bcb; --accent-ink:#fff; --green:#1a7f47; --green-bg:#e4f4ea; --yellow:#9a6700; --yellow-bg:#fdf3d7; --red:#b3261e; --red-bg:#fbe6e4; --orange:#b85200; --orange-bg:#fde9da; --grey:#6b7280; --grey-bg:#eceef1; --row-h:34px; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } :root[data-theme="dark"]{ --paper:#14171a; --surface:#1b1f23; --surface-2:#22272c; --rule:#2f353c; --ink:#e6e9ed; --ink-2:#b3bcc6; --ink-3:#8b95a1; --accent:#4c9be8; --accent-ink:#0b1116; --green:#5fd08a; --green-bg:#14301f; --yellow:#e5b03d; --yellow-bg:#332a12; --red:#f0837c; --red-bg:#3a1c1a; --orange:#f29a4a; --orange-bg:#35220f; --grey:#9aa3ad; --grey-bg:#262b31; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#14171a; --surface:#1b1f23; --surface-2:#22272c; --rule:#2f353c; --ink:#e6e9ed; --ink-2:#b3bcc6; --ink-3:#8b95a1; --accent:#4c9be8; --accent-ink:#0b1116; --green:#5fd08a; --green-bg:#14301f; --yellow:#e5b03d; --yellow-bg:#332a12; --red:#f0837c; --red-bg:#3a1c1a; --orange:#f29a4a; --orange-bg:#35220f; --grey:#9aa3ad; --grey-bg:#262b31; } } *{box-sizing:border-box} [hidden]{display:none !important} /* beats display set on .btn/.brand */ body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 var(--sans)} .grow{flex:1} .btn{ font:500 13px/1 var(--sans);color:var(--ink);background:var(--surface); border:1px solid var(--rule);border-radius:6px;padding:8px 12px;cursor:pointer; display:inline-flex;align-items:center;gap:6px;white-space:nowrap; } .btn:hover{background:var(--surface-2)} /* A link that is drawn as a button should not also be underlined. */ a.btn{text-decoration:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.primary:hover{filter:brightness(1.08)} .btn[disabled]{opacity:.5;cursor:default} .ico{font-size:14px;line-height:1} /* ---------- top bar ---------- */ .topbar{ position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px; padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--rule); } .brand{display:flex;align-items:center;gap:10px} /* The standalone pages draw it as a link home; it should still read as the mark. */ a.brand{text-decoration:none;color:inherit;cursor:pointer} /* Inline rather than , so the mark can follow the in-app theme. An external SVG cannot inherit currentColor or a custom property; the standalone copy at /img/xramp-mark.svg carries its own colors for the tab icon. */ .brand-mark{height:30px;width:30px;flex:none;display:block} .brand-mark .m-n{fill:var(--ink-2)} .brand-mark .m-a{fill:var(--accent)} .mark{font:700 18px/1 var(--sans);letter-spacing:-.02em} .tag{font-size:11.5px;color:var(--ink-3)} .snapmeta{font:12px/1.3 var(--mono);color:var(--ink-3);flex:1} .snapmeta b{color:var(--ink-2);font-weight:600} /* Pinned right in its own right, rather than relying on the snapshot line to push it there: that line is hidden outside Ingest Management, which otherwise leaves the account badge stranded mid-bar. */ .actions{display:flex;gap:8px;margin-left:auto;align-items:center} .banner{padding:9px 20px;font-size:13px;border-bottom:1px solid var(--rule)} .banner.info{background:var(--surface-2);color:var(--ink-2)} .banner.err{background:var(--red-bg);color:var(--red)} .banner.ok{background:var(--green-bg);color:var(--green)} /* ---------- panels ---------- */ .view{padding:18px 20px 40px;max-width:1600px;margin:0 auto} .panel{background:var(--surface);border:1px solid var(--rule);border-radius:8px;margin-bottom:18px;overflow:hidden} .panel-head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap} .panel-head h2{margin:0;font-size:15px;font-weight:600} .detail-for{font-weight:400;color:var(--ink-3);font-size:13px} .thresh{font:12px var(--mono);color:var(--ink-3)} .legend{display:flex;gap:6px;flex-wrap:wrap} .chip{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid transparent;white-space:nowrap} .chip.green{background:var(--green-bg);color:var(--green);border-color:var(--green)} .chip.yellow{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)} .chip.red{background:var(--red-bg);color:var(--red);border-color:var(--red)} .chip.grey{background:var(--grey-bg);color:var(--grey);border-color:var(--grey)} .filter{font:13px var(--sans);padding:7px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2);color:var(--ink);min-width:200px} .onlyalerts{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:5px} /* ---------- tables: 15 rows then scroll ---------- */ .tablewrap{overflow:auto;max-height:calc(var(--row-h) * 15 + 62px)} .tablewrap.short{max-height:calc(var(--row-h) * 9 + 62px)} table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13px} table.grid thead th{ position:sticky;background:var(--surface-2);z-index:2; text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.02em; color:var(--ink-2);padding:7px 10px;border-bottom:1px solid var(--rule);white-space:nowrap; } table.grid thead tr th{top:0} /* Only the second row of a two-row header offsets; a single-row header must stay at top:0 or it slides down and hides the first data row. The offset is the measured height of the group row, set by the page as --head1, because a fixed guess leaves a band between the two rows for data to slide through. */ table.grid thead tr.group + tr th{top:var(--head1,25px)} table.grid thead th.grouphead{text-align:center;border-left:1px solid var(--rule);color:var(--ink-3);text-transform:uppercase;font-size:10.5px} table.grid thead th.alt{background:color-mix(in srgb,var(--surface-2) 82%,var(--accent))} table.grid thead th.var{background:color-mix(in srgb,var(--surface-2) 86%,var(--ochre,var(--yellow)))} td.mvar{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px} td.mvar.pos{color:var(--red)} td.mvar.neg{color:var(--green)} td.mvar.none{color:var(--ink-3)} td.var.held{background:transparent;color:var(--ink-3);font-weight:400;box-shadow:none} th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--ink)} th.sortable.on::after{content:" ▾";color:var(--accent)} th.sortable.on.asc::after{content:" ▴"} .num{text-align:right !important} table.grid tbody td{padding:0 10px;height:var(--row-h);border-bottom:1px solid var(--rule);white-space:nowrap} table.grid tbody td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px} table.grid tbody tr{cursor:pointer} table.grid tbody tr:hover{background:var(--surface-2)} table.grid tbody tr.sel{background:color-mix(in srgb,var(--surface-2) 60%,var(--accent) 22%)} table.grid tbody tr.empty td{color:var(--ink-3);text-align:center;cursor:default;font-style:italic} table.grid tbody tr.empty:hover{background:none} td.name{max-width:340px;overflow:hidden;text-overflow:ellipsis} .rowcount{padding:8px 16px;font:11.5px var(--mono);color:var(--ink-3);border-top:1px solid var(--rule)} /* Counts on the left, the key that explains them on the right, on one line under the table rather than competing with the controls above it. */ .tablefoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:8px 16px;border-top:1px solid var(--rule)} .tablefoot .rowcount{padding:0;border-top:0} .tablefoot .legend{margin-left:auto} /* status pill on the account id cell */ .st{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px} .dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--surface) 70%,transparent)} .dot.green{background:var(--green)} .dot.yellow{background:var(--yellow)} .dot.red{background:var(--red)} .dot.grey{background:var(--grey)} td.var{ font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums; font-weight:600;padding:0 12px; border-bottom:1px solid var(--rule); box-shadow:inset 3px 0 0 var(--vc,transparent); background:var(--vbg,transparent);color:var(--vfg,var(--ink-3)); } td.var.red {--vbg:var(--red-bg); --vfg:var(--red); --vc:var(--red)} td.var.yellow{--vbg:var(--yellow-bg);--vfg:var(--yellow);--vc:var(--yellow)} td.var.green {--vbg:var(--green-bg); --vfg:var(--green); --vc:var(--green)} td.var.grey {--vbg:var(--grey-bg); --vfg:var(--grey); --vc:var(--grey)} /* keep the fill legible when the row is hovered or selected */ table.grid tbody tr:hover td.var, table.grid tbody tr.sel td.var{filter:brightness(1.06) saturate(1.1)} /* ---------- setup form ---------- */ .form{padding:16px} /* New Relic and Ingest variance thresholds sit side by side at the top of Admin. They stretch to a shared height so the two boxes line up, and stack below 1000px where two columns would squeeze the labelled inputs. */ .form-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px} /* The grid's default stretch already equalizes the two boxes. Forcing height here instead would swallow the margin and leave them touching once stacked. */ .form-top > fieldset{margin-bottom:18px} @media (max-width:1000px){ .form-top{grid-template-columns:1fr} } fieldset{border:1px solid var(--rule);border-radius:8px;padding:14px 16px 18px;margin:0 0 18px} legend{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:0 6px} .field{display:block;margin-bottom:14px;max-width:640px} .field.narrow{max-width:340px} .field>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px} .field em{font-weight:400;color:var(--ink-3);font-style:normal} /* Every text-like control, including the dated ones. A type left off this list falls back to the browser's own widget: white box, its own font and padding, and in dark mode a clock or calendar icon that disappears into the field. */ input[type=text],input[type=password],input[type=number],input[type=email], input[type=time],input[type=date],input[type=month],input[type=search]:not(.filter),select{ width:100%;font:13px var(--sans);padding:8px 10px;border:1px solid var(--rule); border-radius:6px;background:var(--surface-2);color:var(--ink); /* Tells the native picker which palette to draw itself in. */ color-scheme:light dark; } /* The native time and date widgets carry an inner spin control that makes them taller than a text field with the same padding: 37.6px against 34. A shared line-height settles all of them on one height, so a row of controls lines up. */ input[type=text],input[type=password],input[type=number],input[type=email], input[type=time],input[type=date],input[type=month],input[type=search]:not(.filter),select{line-height:1.25;min-height:36px} /* A search box in a form field is a text box that happens to clear itself, so it takes the same treatment as the rest. Left off this list it fell back to the browser's own widget, which is what the comment above warns about: its own font, its own padding, and a width set by a native size attribute rather than by the column it sits in, so it read as narrower and paler than the selects beside it. The .filter boxes in the panel heads are excluded because they have a style of their own, sized to sit in a row of buttons rather than a form. */ input[type=search]:not(.filter){-webkit-appearance:none;appearance:none} input[type=time],input[type=date],input[type=month]{ font-variant-numeric:tabular-nums; /* Chrome gives these a default inner padding of its own on top of ours. */ padding-top:7px;padding-bottom:7px; } input[type=time]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(var(--picker-invert,0));opacity:.65;cursor:pointer; } input.sm{width:130px} .suffixed{display:flex;align-items:center;gap:8px} .suffixed span{font-size:12.5px;color:var(--ink-3);white-space:nowrap} .hint{display:block;color:var(--ink-3);font-size:11.5px;margin-top:5px;line-height:1.4} .row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap} /* A row that sits between fields rather than at the end of a fieldset needs the same gap under it that the fields have. */ .row-sep{margin-bottom:16px} .check{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px} .check .hint{display:inline;margin:0} .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px;margin-top:6px} /* Controls in these rows line up along their bottoms, whatever the label does. The label above each one is a block, so a caption that wraps to two lines used to push its input a line below its neighbours: "Busiest accounts to cache (when none are ticked)" sat lower than Frequency, Time and Time zone. Making the label grow rather than fixing its height keeps that true if the wording changes again. Scoped to .grid2, which only these three panes use. */ .grid2 .field{display:flex;flex-direction:column;height:100%;margin-bottom:14px} .grid2 .field>span{flex:1 0 auto} .colorkey{display:grid;gap:7px;margin:12px 0 4px;font-size:12.5px;color:var(--ink-2)} .colorkey div{display:flex;align-items:center;gap:9px} h4{margin:18px 0 4px;font-size:13px} .savebar{display:flex;align-items:center;gap:12px;padding-top:4px} .verify{font-size:12.5px} .verify.ok{color:var(--green)} .verify.err{color:var(--red)} .verify.busy{color:var(--ink-3)} dialog{border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);max-width:640px;padding:22px 24px} dialog::backdrop{background:rgba(0,0,0,.45)} dialog h3{margin:0 0 12px;font-size:16px} dialog p{font-size:13px;color:var(--ink-2);margin:0 0 11px} dialog code{font:12px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px} dialog form{margin-top:16px;text-align:right} @media (max-width:900px){ .tag,.snapmeta{display:none} } /* ---------- expandable panels ---------- */ .panel{display:flex;flex-direction:column} .panel .tablewrap{flex:1 1 auto} .btn.icon{padding:6px 9px;font-size:13px;line-height:1} .panel.expanded{ position:fixed;inset:0;z-index:60;margin:0;border-radius:0; max-width:none;height:100vh; } .panel.expanded .tablewrap, .panel.expanded .tablewrap.short{max-height:none} body.has-expanded{overflow:hidden} body.has-expanded .topbar{filter:blur(1px);pointer-events:none} /* ---------- theme buttons ---------- */ .themeset{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden} .themeset .btn{border:0;border-radius:0;padding:8px 11px} .themeset .btn + .btn{border-left:1px solid var(--rule)} .themeset .btn.on{background:var(--accent);color:var(--accent-ink)} .mlab{font:9.5px var(--mono);color:var(--ink-3);font-weight:400;letter-spacing:0} /* ---------- module launcher ---------- */ button.brand{ background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:left; display:flex;align-items:center;gap:10px;font:inherit; } button.brand:hover .mark{color:var(--accent)} .hero{max-width:760px;margin:26px auto 4px;text-align:center} .hero h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em} .hero p{margin:8px 0 0;color:var(--ink-3);font-size:14px} /* Five across on a wide screen, stepping down rather than squeezing: below each width the cards would be too narrow for a title and a line of description. */ .modules{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px;max-width:1460px;margin:28px auto 0; } @media (max-width:1320px){.modules{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:1080px){.modules{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:800px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.modules{grid-template-columns:1fr}} .mod{ position:relative;text-align:left;cursor:pointer;font:inherit;color:inherit; background:var(--surface);border:1px solid var(--rule);border-radius:10px; padding:20px 18px 18px;display:flex;flex-direction:column;gap:7px; transition:border-color .12s,transform .12s,box-shadow .12s; } .mod:hover:not([aria-disabled="true"]):not(.locked){ border-color:var(--accent);transform:translateY(-2px); box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 16%,transparent); } .mod[aria-disabled="true"]{opacity:.62} .mod[aria-disabled="true"]:hover{border-color:var(--ink-3)} /* Listed, so the launcher is the same shape for everyone, but plainly not yours: flatter than a card you can open, and the pointer says so before the click does. */ .mod.locked{opacity:.55;cursor:not-allowed;background:var(--surface-2)} .mod.locked:hover{border-color:var(--rule);transform:none;box-shadow:none} .mod.locked .mod-ic{color:var(--ink-3)} .mod.locked h2{color:var(--ink-2)} .mod-ic{font-size:19px;color:var(--accent);line-height:1} .mod-ic svg{display:block;height:1.05em;width:1.05em} .mod[aria-disabled="true"] .mod-ic{color:var(--ink-3)} .mod h2{margin:2px 0 0;font-size:16px;font-weight:600;letter-spacing:-.01em;padding-right:72px} .mod p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)} .mod-s{ position:absolute;top:15px;right:15px;font:10px/1 var(--mono);text-transform:uppercase; letter-spacing:.07em;padding:5px 8px;border-radius:3px; background:var(--grey-bg);color:var(--grey);border:1px solid var(--grey); } .mod-s.ready{background:var(--green-bg);color:var(--green);border-color:var(--green)} /* A card that announces itself rather than opening anything yet. */ .mod-s.soon{background:var(--surface-2);color:var(--ink-3);border-color:var(--rule)} /* Built and working, but not granted to whoever is reading. */ .mod-s.noaccess{background:var(--grey-bg);color:var(--grey);border-color:var(--grey)} .home-note{ transition:opacity .15s; max-width:1100px;margin:18px auto 0;text-align:center;font-size:13px; color:var(--ink-3);min-height:20px; } /* ---------- alert analysis report ---------- */ .rep-hd{padding:2px 0 18px} .rep-eyebrow{font:11px var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px} .rep-title{font-size:24px;font-weight:650;letter-spacing:-.4px;margin:0 0 8px} /* The title keeps the line; anything beside it sits at the right end of it. */ .rep-titlerow{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .rep-titlerow .rep-title{flex:1;min-width:280px} .rep-titlerow .btn{margin-left:auto;flex:none} .rep-sub{color:var(--ink-3);font-size:13.5px;margin:0} .crit{ display:flex;gap:16px;align-items:flex-start;background:var(--red-bg); border:1px solid var(--red);border-radius:8px;padding:17px 19px;margin-bottom:20px; } .crit.ok{background:var(--green-bg);border-color:var(--green)} .crit-i{font-size:18px;color:var(--red);line-height:1.3} .crit.ok .crit-i{color:var(--green)} .crit-h{font-weight:650;font-size:15px;color:var(--red);margin-bottom:5px} .crit.ok .crit-h{color:var(--green)} .crit-b{font-size:13.5px;line-height:1.65;color:var(--ink)} .crit-n{text-align:center;padding-left:18px;border-left:1px solid var(--red);min-width:106px} .crit.ok .crit-n{border-left-color:var(--green)} .crit-n b{font:650 28px/1 var(--mono);color:var(--red);display:block} .crit.ok .crit-n b{color:var(--green)} .crit-n span{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;display:block;margin-top:5px} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;margin-bottom:30px} .tile{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:13px 14px} .tile b{font:650 21px/1 var(--mono);letter-spacing:-.4px;display:block} .tile b.bad{color:var(--red)} .tile b.warn{color:var(--yellow)} .tile b.ok{color:var(--green)} /* Direct child only. This styles the tile's label, but as a descendant selector it also caught spans nested inside the value: the as-built trend arrow and the .unit suffix both lost to it on specificity and rendered at 11px instead of their own sizes. */ .tile > span{font-size:11px;color:var(--ink-3);margin-top:5px;display:block;line-height:1.35} .sec{margin-bottom:34px} .sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--rule)} .sec-n{font:600 12px var(--mono);color:var(--accent)} .sec-t{font-size:17px;font-weight:650;letter-spacing:-.2px} .sec-b{font-size:14px;color:var(--ink-2);line-height:1.7;max-width:880px;margin-bottom:14px} .sec-b strong{color:var(--ink)} .subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px} .sub{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:12px 14px} .sub-n{font-weight:600;font-size:13.5px;margin-bottom:3px} .sub-m{font:12px var(--mono);color:var(--ink-3);margin-bottom:8px} .sub-bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden} .sub-bar i{display:block;height:100%;background:var(--red)} .sub-bar i.ok{background:var(--green)} .lives{display:flex;flex-direction:column;gap:8px} .live{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:11px 14px} .live-d{width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:7px;flex:none} .live-p{font:600 12.5px var(--mono)} .live-c{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5} @media print{ /* Force the light palette whatever the screen theme is. Without this a dark session prints its own dark surfaces, which is what print-color-adjust:exact was telling the browser to do faithfully. */ :root, :root[data-theme="dark"], :root:not([data-theme="light"]){ --paper:#fff; --surface:#fff; --surface-2:#f7f7f8; --rule:#c9ccd1; --ink:#111; --ink-2:#333; --ink-3:#666; --accent:#0b5cad; --accent-dim:#eaf1fa; --accent-ink:#fff; --green:#1a7f37; --green-bg:#eaf6ee; --yellow:#8a6100; --yellow-bg:#fdf5e0; --red:#b32318; --red-bg:#fdeceb; --orange:#a84b00; --orange-bg:#fdeee2; --grey:#5a5f66; --grey-bg:#f0f1f2; } body{background:#fff !important;color:#111 !important} .panel,.tile,.sub,.rem,.crit,.grp,details.tk,tr.tk-detail > td,.ua-id,.rem-total,.dlg-src{ background:#fff !important;box-shadow:none !important; } /* Chrome that means nothing on paper. */ .mod,.hero,#al-run,#al-print,#al-account,.panel-head .btn,.expander, .actions,.filter,.onlyalerts,#ab-filter,#ab-nonempty,#ws-filter,#ws-new, .mk-task,.tk-print,.tk-del,.ws-del,#wsd-print,#wsd-addtask,.tk-note-wrap{display:none !important} .topbar{position:static;border-bottom:1px solid #ccc;padding:10px 0 12px;background:none} .tag,.snapmeta{display:none !important} .brand-mark{height:40px !important;width:40px !important} .brand-mark .m-n{fill:#555 !important} .brand-mark .m-a{fill:#111 !important} .mark{font-size:22px !important;color:#111 !important} /* Only the small tinted badges keep their fill; a blanket rule here is what dragged every dark surface onto the page. */ .pri,.st-pill,.risk,.chip,.pill,.dlg-tag,.mod-s,.tracked,.rpt-badge, .dot,.st-dot,.ab-tr,.subsystem-bar-fill,.sub-bar i,.pbar i,.bar i{ -webkit-print-color-adjust:exact;print-color-adjust:exact; } /* Wide tables have to shrink to the sheet rather than run off it. */ .tablewrap,.tw{max-height:none !important;overflow:visible !important;border:0} /* auto layout, not fixed: 20 columns of very different natural widths need sizing to content, and a fixed grid squeezes identifiers into two lines or pushes them over their neighbour. */ table.grid{width:100% !important;table-layout:auto;font-size:7pt} table.grid th,table.grid td{ padding:3px 4px !important;white-space:normal !important; word-break:normal;overflow-wrap:break-word; /* break long words, not every word */ } /* Identifiers, figures and dates must never be split — a wrapped account id reads as two different numbers. */ table.grid td.num,table.grid td.mono,table.grid .mono, table.grid td.var,table.grid td.mvar,table.grid td.trend{ white-space:nowrap !important;word-break:keep-all;overflow-wrap:normal; } table.grid thead th{position:static} td.name,.tk-name-in,td.tk-desc-cell .clamp2{max-width:none !important} td.tk-desc-cell .clamp2{-webkit-line-clamp:unset;display:block} .tk-name-t{overflow:visible;text-overflow:clip;white-space:normal} .unit{font-size:6pt} .sec,.rem,.crit,.tiles,.sub,.live,.note,tr{break-inside:avoid;page-break-inside:avoid} .tk-details,.rpt-block pre{max-height:none !important;overflow:visible !important;white-space:pre-wrap} } /* table wrapper used by the alert report */ .tw{border:1px solid var(--rule);border-radius:6px;overflow-x:auto;background:var(--surface)} .tw table.grid{font-size:13px} .tw table.grid thead th{position:static} .mono{font-family:var(--mono);font-size:12px} /* ---------- user audit ---------- */ .ua-id{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:15px 17px;margin-bottom:14px} .ua-id-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:3px} .ua-name{font-size:17px;font-weight:650;letter-spacing:-.2px} .ua-mail{font:12.5px var(--mono);color:var(--ink-3)} .ua-meta{font:12px var(--mono);color:var(--ink-3);margin-bottom:12px} .grp{border:1px solid var(--rule);border-radius:6px;margin-bottom:9px;overflow:hidden;background:var(--surface-2)} .grp-h{display:flex;align-items:center;gap:11px;padding:10px 13px;flex-wrap:wrap} .grp-n{font-weight:600;font-size:13.5px} .grp-c{font:11.5px var(--mono);color:var(--ink-3)} .grp-b{padding:0 13px 11px;display:flex;flex-wrap:wrap;gap:5px} .gr{font:11px var(--mono);background:var(--surface);border:1px solid var(--rule); border-radius:3px;padding:3px 7px;color:var(--ink-2)} .gr.org{border-color:var(--yellow);color:var(--yellow);background:var(--yellow-bg)} .gr.noacc{opacity:.6;font-style:italic} .ua-empty{padding:16px;color:var(--ink-3);font-size:13.5px;font-style:italic} details.grp > summary{cursor:pointer;list-style:none;user-select:none} details.grp > summary::-webkit-details-marker{display:none} details.grp > summary::before{content:"\25B8";color:var(--ink-3);font-size:10px;margin-right:2px;transition:transform .12s;display:inline-block} details.grp[open] > summary::before{transform:rotate(90deg)} details.grp > summary:hover{background:var(--surface)} /* ---------- denser tables: fit six months without horizontal scroll ---------- */ table.grid thead th{padding:5px 7px;font-size:10.5px} table.grid thead th.grouphead{font-size:9.5px;letter-spacing:.04em} table.grid tbody td{padding:0 7px;height:30px} table.grid tbody td.num{font-size:11.5px} td.var,td.mvar{padding:0 8px;font-size:11.5px} td.name{max-width:210px} .mlab{font-size:9px;opacity:.75} :root{--row-h:30px} /* unit suffix rides alongside the figure without competing with it */ .unit{font-size:9px;color:var(--ink-3);margin-left:2px;letter-spacing:.02em} /* A percent sign belongs to its number, so it is drawn at the number's size, weight and color. */ .unit.pct{font-size:inherit;font-weight:inherit;color:inherit;margin-left:0;letter-spacing:inherit} .pct{font-size:inherit;font-weight:inherit;color:inherit;margin-left:0;letter-spacing:inherit} .zero{color:var(--ink-3)} /* ---------- trend indicators ---------- */ th.trendhead{ text-align:center !important;font-size:9.5px;letter-spacing:.03em; border-left:1px solid var(--rule);color:var(--ink-3); } td.trend{ text-align:center;font-size:15px;line-height:1;font-weight:700; border-left:1px solid var(--rule);cursor:default;width:34px; } td.trend.up{color:var(--red)} td.trend.down{color:var(--green)} td.trend.flat{color:var(--ink-3);font-size:13px} td.trend.none{color:var(--ink-3);font-weight:400} /* ---------- always-visible horizontal scrollbar on the account tables ---------- */ /* macOS hides overlay scrollbars until you scroll, which makes it easy to miss that there are more columns. Styling them explicitly keeps them on screen. */ .tablewrap{overflow-x:auto;overflow-y:auto;scrollbar-width:thin; scrollbar-color:var(--ink-3) var(--surface-2)} .tablewrap::-webkit-scrollbar{height:11px;width:11px} .tablewrap::-webkit-scrollbar-track{background:var(--surface-2);border-top:1px solid var(--rule)} .tablewrap::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--ink-3) 65%,transparent); border-radius:6px;border:2px solid var(--surface-2); } .tablewrap::-webkit-scrollbar-thumb:hover{background:var(--ink-3)} .tablewrap::-webkit-scrollbar-corner{background:var(--surface-2)} /* ---------- dialogs ---------- */ dialog.dlg{ border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink); width:min(720px,92vw);padding:22px 24px; } dialog.dlg::backdrop{background:rgba(0,0,0,.5)} dialog.dlg h3{margin:0 0 14px;font-size:17px;font-weight:650;letter-spacing:-.2px} .dlg-src{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;padding:9px 12px; background:var(--surface-2);border:1px solid var(--rule);border-radius:6px;font-size:12.5px; } .dlg-tag{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px; border-radius:3px;background:var(--accent);color:var(--accent-ink)} .dlg-impact{margin-left:auto;font:12px var(--mono);color:var(--red);font-weight:600} .dlg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px} .dlg-row{display:flex;gap:8px;align-items:center} .dlg-row select{flex:1} dialog.dlg .field{margin-bottom:12px;max-width:none} dialog.dlg textarea{ width:100%;font:12.5px/1.55 var(--mono);padding:9px 11px;border:1px solid var(--rule); border-radius:6px;background:var(--surface-2);color:var(--ink);resize:vertical; } .dlg-err{color:var(--red);font-size:13px;margin:4px 0 0} .dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px} /* ---------- workstreams ---------- */ .pri{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px; border-radius:3px;border:1px solid;white-space:nowrap} .pri.high{background:var(--red-bg);color:var(--red);border-color:var(--red)} .pri.medium{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)} .pri.low{background:var(--green-bg);color:var(--green);border-color:var(--green)} .pri.backlog{background:var(--grey-bg);color:var(--grey);border-color:var(--grey)} .st-pill{font:10px var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 7px; border-radius:3px;background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap} .st-pill.complete{background:var(--green-bg);color:var(--green);border-color:var(--green)} .st-pill.in-progress{background:var(--accent-dim,var(--surface-2));color:var(--accent);border-color:var(--accent)} .st-pill.backlog{color:var(--ink-3)} .st-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none} .st-dot.complete{background:var(--green)} .st-dot.in-progress{background:var(--accent)} .st-dot.started{background:var(--yellow)} .st-dot.backlog{background:var(--grey)} .pbar{height:8px;background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;overflow:hidden;min-width:90px} .pbar i{display:block;height:100%;background:var(--green)} tr.ws-row{cursor:pointer} details.tk{border:1px solid var(--rule);border-radius:7px;margin-bottom:9px;background:var(--surface-2);overflow:hidden} details.tk > summary{list-style:none;cursor:pointer;user-select:none} details.tk > summary::-webkit-details-marker{display:none} .tk-h{display:flex;align-items:center;gap:10px;padding:11px 14px;flex-wrap:wrap} details.tk[open] .tk-h{border-bottom:1px solid var(--rule);background:var(--surface)} .tk-n{font-weight:600;font-size:13.5px} .tk-b{padding:13px 15px} .tk-src{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px} .tk-desc{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)} .tk-details{margin:0 0 12px;padding:11px 13px;background:var(--surface);border:1px solid var(--rule); border-radius:5px;font:12px/1.6 var(--mono);white-space:pre-wrap;color:var(--ink-2);max-height:260px;overflow:auto} .tk-edit{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding-bottom:12px; border-bottom:1px solid var(--rule);margin-bottom:12px} .tk-edit .field{margin:0} .tk-log-h{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em; color:var(--ink-3);margin-bottom:8px;display:flex;gap:8px;align-items:baseline} .note{border-left:2px solid var(--rule);padding:7px 0 7px 11px;margin-top:9px} .note-m{font-size:11px;color:var(--ink-3)} .note-b{font-size:13px;color:var(--ink);white-space:pre-wrap;margin-top:2px} .tracked{font:11px var(--mono);color:var(--green);background:var(--green-bg); border:1px solid var(--green);border-radius:3px;padding:4px 8px;white-space:nowrap} button.mktask{padding:5px 10px;font-size:12px} /* The Help dialog right-aligns its single close button; these forms must not inherit that. */ dialog.dlg form{text-align:left} dialog.dlg .dlg-actions{text-align:right} /* Work-log entry box spans the same width as the edit row above it, which ends at the Delete task button. */ .tk-note-wrap{margin-bottom:4px} textarea.tk-note{ display:block;width:100%;box-sizing:border-box; font:12.5px/1.55 var(--sans);padding:9px 11px; border:1px solid var(--rule);border-radius:6px; background:var(--surface);color:var(--ink); resize:vertical;overflow:auto;min-height:calc(4 * 1.55em + 20px); } textarea.tk-note:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-1px} .tk-note-actions{display:flex;justify-content:flex-end;margin-top:7px} /* ---------- task table ---------- */ table.tk-table tbody tr.tk-row{cursor:pointer} table.tk-table tbody tr.tk-row.open{background:var(--surface-2)} table.tk-table td{vertical-align:top} /* display:flex on a takes it out of table layout, so the flex box goes on an inner span and the cell stays a cell. */ td.tk-name{font-weight:600} /* A task at or past its target date, so a list can be scanned for what needs chasing. The marker sits in a column beside the status dot, so it lines up under the name rather than under the dot, and opens the follow-up window. */ .tk-name-col{display:flex;flex-direction:column;min-width:0} .tk-name-t.tk-over{color:var(--red)} /* The same pill as a HIGH priority, since it says the same kind of thing. */ .tk-followup{align-self:flex-start;margin-top:3px;cursor:pointer; font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px; border-radius:3px;border:1px solid var(--red);background:var(--red-bg);color:var(--red);white-space:nowrap} .tk-followup:hover{background:var(--red);color:var(--surface)} .tk-followup:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} #dlg-followup .field{margin-bottom:12px} #dlg-followup textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--rule); border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical} .tk-name-in{display:flex;align-items:center;gap:8px;max-width:260px;min-width:0} /* A flex child will not shrink below its content unless min-width is cleared, which is what lets the ellipsis actually engage. */ .tk-name-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* max-width on a is advisory; constraining an inner block is what holds. */ td.tk-desc-cell{color:var(--ink-2);font-size:12.5px} td.tk-desc-cell .clamp2{ max-width:340px;line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .tk-impact{color:var(--red);font-weight:600} .tk-value{color:var(--green);font-weight:600} tr.tk-detail > td{background:var(--surface-2);padding:14px 16px;border-bottom:2px solid var(--rule)} tr.tk-detail .tk-edit{border-bottom:1px solid var(--rule)} .ws-save{color:var(--red);font-weight:600} .ws-value{color:var(--green);font-weight:600} .partial{color:var(--ink-3);font-weight:400;margin-left:2px} /* ---------- printed report ---------- */ td.nowrap{white-space:nowrap} button.tk-print{padding:5px 8px;font-size:12px;margin-right:6px} #print-doc{display:none} @page{ margin:14mm 13mm; } @media print{ /* Only the generated report prints; the app itself is not on paper. */ body[data-print="doc"] > *:not(#print-doc){display:none !important} body[data-print="doc"] #print-doc{display:block !important} #print-doc{ color:#111;background:#fff; font:11pt/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } #print-doc *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } .rpt-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:12px; border-bottom:2px solid #111;margin-bottom:16px} .rpt-logo{display:flex;align-items:center;gap:10px;flex:none} .rpt-logo .brand-mark{height:42px !important;width:42px !important} .rpt-logo b{font:700 20px/1 var(--sans);letter-spacing:-.3px;color:#111} .rpt-head-t{flex:1} .rpt-kicker{font:8.5pt/1 ui-monospace,Menlo,monospace;letter-spacing:.14em; text-transform:uppercase;color:#666;margin-bottom:5px} .rpt-head h1{font-size:20pt;line-height:1.15;margin:0 0 7px;letter-spacing:-.4px} .rpt-badges{display:flex;gap:6px;flex-wrap:wrap} .rpt-badge{font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em; border:1px solid #999;border-radius:3px;padding:2px 7px;color:#333} .rpt-stamp{font:8pt/1.5 ui-monospace,Menlo,monospace;color:#666;text-align:right;flex:none} .rpt-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0; border:1px solid #bbb;border-radius:4px;overflow:hidden;margin:0 0 18px} .rpt-figs > div{padding:9px 12px;border-right:1px solid #ddd} .rpt-figs > div:last-child{border-right:0} .rpt-figs .k{display:block;font:7.5pt ui-monospace,Menlo,monospace;text-transform:uppercase; letter-spacing:.09em;color:#777;margin-bottom:3px} .rpt-figs .v{display:block;font:600 15pt/1 ui-monospace,Menlo,monospace} .rpt-figs .v2{display:block;font:600 10.5pt/1.2 ui-monospace,Menlo,monospace} .rpt-figs .v small{font-size:9pt;font-weight:400;color:#666} /* Log Partition Explorer reports. */ .rpt-t{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:9pt} .rpt-t th{text-align:left;border-bottom:1.5px solid #111;padding:5px 6px;font-size:8pt; text-transform:uppercase;letter-spacing:.06em;color:#444} .rpt-t td{border-bottom:1px solid #ddd;padding:5px 6px;vertical-align:top} .rpt-t .r{text-align:right;font-family:ui-monospace,Menlo,monospace} .rpt-t tr{break-inside:avoid;page-break-inside:avoid} .rpt-sub{font:7.5pt ui-monospace,Menlo,monospace;color:#777} .rpt-q{font:7.5pt/1.35 ui-monospace,Menlo,monospace;color:#444;word-break:break-word} .rpt-note{font-size:8.5pt;color:#555;margin:0 0 14px} .rpt-rule{border:1px solid #bbb;border-radius:4px;padding:8px 10px;margin-bottom:10px; break-inside:avoid;page-break-inside:avoid} .rpt-rule-h{font:600 10pt/1.3 ui-monospace,Menlo,monospace;margin-bottom:5px} .rpt-rule-h span{font-weight:400;font-size:8pt;color:#666;margin-left:8px} .rpt-code{font:8.5pt/1.45 ui-monospace,Menlo,monospace;background:#f7f7f8;border:1px solid #ddd; border-radius:3px;padding:6px 8px;margin:0 0 6px;white-space:pre-wrap;word-break:break-word} .rpt-code.small{font-size:7.5pt;color:#444} .rpt-figs .s{display:block;font-size:8pt;color:#666;margin-top:4px} .rpt-h2{font-size:12pt;margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid #111; text-transform:uppercase;letter-spacing:.08em} .rpt-block{margin:0 0 13px} .rpt-block h4{font:8.5pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.09em; color:#666;margin:0 0 4px} .rpt-block p{margin:0;font-size:10.5pt} .rpt-block pre{margin:0;padding:9px 11px;background:#f5f5f5;border:1px solid #ddd;border-radius:3px; font:8.5pt/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word} .rpt-table{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:4px} .rpt-table th{text-align:left;font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase; letter-spacing:.06em;color:#555;border-bottom:1.5px solid #111;padding:6px 7px} .rpt-table td{padding:5px 7px;border-bottom:1px solid #ddd;vertical-align:top} .rpt-table .rn{width:22px;color:#777} .rpt-table .r{text-align:right;font-family:ui-monospace,Menlo,monospace;white-space:nowrap} .rpt-table tr{break-inside:avoid} .rpt-task{break-inside:avoid;page-break-inside:avoid;margin:0 0 16px;padding:11px 13px; border:1px solid #ccc;border-radius:4px} .rpt-task h3{font-size:11.5pt;margin:0 0 8px} .rpt-facts{display:grid;grid-template-columns:repeat(2,auto 1fr);gap:2px 10px;margin:0 0 11px; font-size:9pt} .rpt-facts dt{font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.05em; color:#777;white-space:nowrap} .rpt-facts dd{margin:0;font-family:ui-monospace,Menlo,monospace} .rpt-note{border-left:2px solid #ccc;padding:4px 0 4px 9px;margin-top:7px;break-inside:avoid} .rpt-note-m{font:8pt ui-monospace,Menlo,monospace;color:#777;display:block} .rpt-none{font-size:9.5pt;color:#777;font-style:italic;margin:0} } /* movement against the previous as-built inventory */ /* Sized to match td.trend in the ingest tables: 15px, and 13px for the flat arrow, which is a lighter mark and reads too heavy at full size. */ .ab-tr{font-size:15px;margin-left:5px;font-weight:700;vertical-align:1px;cursor:default} .ab-tr.up{color:var(--red)} .ab-tr.down{color:var(--green)} .ab-tr.flat{color:var(--ink-3);font-size:13px} /* ---------- per-screen help ---------- Help bodies run long enough to need their own scroll; without it a dialog sized to the content pushes its Close button off the bottom of the viewport. */ #help{width:min(660px,92vw)} .helpbody{max-height:min(62vh,540px);overflow-y:auto;padding-right:6px} .helpbody p{font-size:13px;color:var(--ink-2);margin:0 0 11px;line-height:1.55} .helpbody h4{margin:18px 0 7px;font-size:12px;font-weight:650;letter-spacing:.04em; text-transform:uppercase;color:var(--ink)} .helpbody h4:first-child{margin-top:0} .helpbody ul{margin:0 0 11px;padding-left:20px} .helpbody li{font-size:13px;color:var(--ink-2);margin-bottom:5px;line-height:1.5} .helpbody b{color:var(--ink);font-weight:620} .helpbody code{font:12px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px} /* ---------- app accounts (Admin > Users) ---------- */ .chip.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--rule)} /* Superuser: a white ring on a filled chip, so the row stands out of a roster that is otherwise admins and standard users, in either theme. */ .chip.su{background:var(--accent);color:#fff;border-color:#fff;font-weight:600; box-shadow:0 0 0 1px var(--rule)} .btn.danger{border-color:var(--red);color:var(--red)} .btn.danger:hover:not(:disabled){background:var(--red-bg)} .btn:disabled{opacity:.5;cursor:not-allowed} /* Create on the left, roster on the right. The form keeps a fixed column so the table takes the slack; below 900px they stack rather than crush. */ .usr-split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;padding:16px 18px 18px} @media (max-width:900px){ .usr-split{grid-template-columns:1fr} } .usr-new{border:1px solid var(--rule);border-radius:8px;padding:16px;background:var(--surface-2); align-self:start} .usr-new h3{margin:0 0 14px;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase} .usr-new .field{display:block;margin-bottom:12px} .usr-new .field > span{display:block;font-size:12px;font-weight:600;margin-bottom:4px} .usr-new input,.usr-new select{width:100%} .usr-mods{border:1px solid var(--rule);border-radius:6px;padding:10px 12px 6px;margin:4px 0 14px} .usr-mods legend{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-2);padding:0 5px} .usr-mods .check{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:6px} .usr-mods .check input{width:auto;margin:0} .usr-list .tablewrap{max-height:none} /* Twenty users deep, then it scrolls under its own heading, so a long list does not push the welcome email off the bottom of the page. */ .usr-list .tablewrap.usr-rows{max-height:calc(var(--row-h) * 20 + 36px);overflow:auto} .usr-find{display:flex;align-items:center;gap:10px;margin-bottom:10px} .usr-find .filter{max-width:280px} #tbl-users tbody tr{cursor:pointer} /* The welcome email, under the roster: the message on the left, the mail server beside it for an admin. */ .usr-welcome{margin:0 18px 18px;border:1px solid var(--rule);border-radius:8px;padding:16px;background:var(--surface-2)} .usr-welcome .wl-head{display:flex;align-items:baseline;gap:12px} .usr-welcome h3{margin:0 0 8px;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase} .usr-welcome .wl-on{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 14px} .usr-welcome .wl-on input{margin:0} .usr-welcome .wl-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px} @media (max-width:900px){ .usr-welcome .wl-grid{grid-template-columns:1fr} } .usr-welcome .wl-grid:has(.wl-mail[hidden]){grid-template-columns:minmax(0,1fr)} .usr-welcome .field{display:block;margin-bottom:12px} .usr-welcome .field > span{display:block;font-size:12px;font-weight:600;margin-bottom:4px} .usr-welcome input:not([type=checkbox]),.usr-welcome select{width:100%} .usr-welcome textarea{width:100%;font:13px/1.55 var(--sans);padding:9px 11px;border:1px solid var(--rule); border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical} .usr-welcome .wl-mail{margin:0;align-self:start} .usr-welcome .wl-pair{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px} .usr-welcome .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .verify.warn{color:var(--orange)} .usr-welcome .warn-text{color:var(--orange)} .usr-welcome .ok-text{color:var(--green)} /* The grid's cells do not wrap, so a user with every module ran their access list across the columns beside it. This one wraps instead; the columns it used to cover stay on one line. */ #tbl-users tbody td.usr-access{font-size:12px;color:var(--ink-2);max-width:380px;min-width:220px; white-space:normal;overflow-wrap:break-word;line-height:1.45;padding-top:7px;padding-bottom:7px} #tbl-users tbody td.usr-status,#tbl-users tbody td.mono{white-space:nowrap} #tbl-users tbody tr{height:auto} #tbl-users tr.row-off td{opacity:.55} .whoami{font-size:12.5px;color:var(--ink-2);margin-left:4px;white-space:nowrap} .whoami b{color:var(--ink);font-weight:600} @media print{ #panel-users,.whoami,#btn-signout{display:none !important} } /* ---------- API keys ---------- */ .dlg-wide{width:min(920px,94vw)} /* The account badge sits last in the bar, so it lands in the top right corner. The rule to its left separates identity from the action buttons. */ /* The account is the avatar alone, a round image that opens it; the name and role are on its hover and read out to screen readers. */ button.whoami{ display:flex;align-items:center;background:none;border:0;font:inherit;cursor:pointer; padding:2px;margin-left:6px;border-radius:50%; } button.whoami:hover .avatar{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)} button.whoami:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Initials rather than a silhouette: it reads as a profile icon and says who is signed in, which matters on a shared machine. */ .avatar{ flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; transition:box-shadow .12s ease; background:var(--accent);color:var(--accent-ink);font:600 11.5px/1 var(--sans); letter-spacing:.03em; } .whoami-text{display:none} .whoami-text b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap} #whoami-role{font-size:11px;color:var(--ink-3)} .ak-form-row{display:grid;grid-template-columns:1fr 200px;gap:0 16px} .ak-form .field{display:block;margin-bottom:12px} .ak-form .field>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px} #ak-scopes .check{align-items:flex-start} #ak-scopes code{font:11.5px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px;margin-right:6px} #tbl-keys td.ak-scopelist{font-size:11.5px;line-height:1.5;color:var(--ink-2)} #tbl-keys tr.row-off td{opacity:.55} #tbl-keys td.empty{text-align:center;color:var(--ink-3);padding:18px;font-style:italic} /* The secret is shown once and never again, so it gets a loud, deliberate box. */ .ak-reveal{border:1px solid var(--yellow);background:var(--yellow-bg);border-radius:8px; padding:12px 14px;margin-bottom:16px} .ak-reveal b{display:block;font-size:12.5px;margin-bottom:8px;color:var(--ink)} .ak-secret-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .ak-secret-row code{flex:1 1 320px;font:12px var(--mono);background:var(--surface);border:1px solid var(--rule); border-radius:6px;padding:8px 10px;word-break:break-all;user-select:all} .ak-docs{margin-top:16px;border-top:1px solid var(--rule);padding-top:12px} .ak-docs summary{font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-2)} .ak-docs pre{margin:12px 0 0;padding:12px;background:var(--surface-2);border:1px solid var(--rule); border-radius:6px;overflow-x:auto;font:11.5px/1.6 var(--mono)} @media (max-width:640px){ .ak-form-row{grid-template-columns:1fr} } /* ---------- CCU Management ---------- */ .ccu-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:14px 18px 4px} .ccu-tiles .tile{background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;padding:11px 13px; display:flex;flex-direction:column;gap:3px} .ccu-tiles .tile b{font:600 18px/1 var(--mono);letter-spacing:-.3px} .ccu-tiles .tile span{font-size:11px;color:var(--ink-3)} /* Three across on a wide screen, two then one as it narrows: below that the account and name columns stop being readable side by side. */ .ccu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:14px 18px 18px} @media (max-width:1500px){ .ccu-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1000px){ .ccu-grid{grid-template-columns:1fr} } .ccu-col{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--surface)} .ccu-col > header{padding:10px 12px;border-bottom:1px solid var(--rule);background:var(--surface-2)} .ccu-col h3{margin:0 0 2px;font-size:13px;font-weight:650} .ccu-col header .hint{margin:0;font-size:10.5px} /* Twenty rows deep, then it scrolls; the other thirty are a flick away. */ .ccu-scroll{max-height:calc(20 * 30px + 34px);overflow:auto} .ccu-scroll table.grid{font-size:12px} .ccu-scroll td,.ccu-scroll th{padding:6px 9px;white-space:nowrap} .ccu-scroll td:not(.num){overflow:hidden;text-overflow:ellipsis;max-width:190px} .ccu-acct{max-width:120px !important;color:var(--ink-2)} .ccu-email{max-width:170px !important} .ccu-scroll td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:18px} .ccu-tr{font:11.5px var(--mono);font-weight:600} .ccu-tr.up{color:var(--red)} /* more compute is more cost, so up is the bad direction */ .ccu-tr.down{color:var(--green)} .ccu-tr.flat{color:var(--ink-3)} .ccu-new{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em; background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow);padding:2px 5px;border-radius:3px} @media print{ #ccu-refresh,#ccu-print{display:none !important} .ccu-grid{grid-template-columns:1fr;gap:10px} .ccu-scroll{max-height:none !important;overflow:visible !important} .ccu-col{break-inside:avoid} } /* Condition over policy, so the alerts table keeps the same four columns as its neighbours and the trend stays visible without a sideways scroll. */ .ccu-cond{white-space:normal !important;line-height:1.3} .ccu-cond-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ccu-cond-p{display:block;font-size:10.5px;color:var(--ink-3);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* The GB / $ switch reuses the segmented look of the theme control. */ .unitset .btn{min-width:38px;justify-content:center;font-weight:600} .unitset .btn:disabled{opacity:.45;cursor:not-allowed} .unitset .btn:disabled.on{background:none;color:var(--ink-2)} @media print{ .unitset{display:none !important} } /* ---------- Chargeback ---------- */ .cb-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:12.5px; background:var(--yellow-bg);border-bottom:1px solid var(--yellow);color:var(--ink)} .cb-bar .hint{display:inline;margin:0} #tbl-chargeback td,#tbl-chargeback th{padding:6px 9px;font-size:12.5px;vertical-align:top} #tbl-chargeback td:not(.cb-cell){max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cb-notes{max-width:340px !important;color:var(--ink-2)} .cb-accountId{font-family:var(--mono)} .cb-gbl{font-family:var(--mono)} .cb-opt{font:9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:400} .cb-flags{white-space:normal;min-width:130px;max-width:170px;line-height:1.9} .cb-flags .chip{font-size:9.5px;padding:2px 5px;display:inline-block;white-space:nowrap} .cb-cell{padding:3px 4px !important} .cb-cell input{width:100%;min-width:110px;font:12px var(--sans);padding:5px 7px; border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--ink)} /* A required field left blank is shown as you type, not only on save. */ .cb-cell input.bad{border-color:var(--red);background:var(--red-bg)} #tbl-chargeback td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:18px} #cb-new .field{display:block;margin-bottom:11px} #cb-new .field>span{display:block;font-size:12px;font-weight:600;margin-bottom:4px} #cb-new .field input{width:100%} @media print{ .cb-bar,#cb-filter,.onlyalerts{display:none !important} } /* ---------- Chargeback: ten rows, then scroll ---------- */ /* Ten data rows plus the sticky header. Expand lifts the cap. */ .tablewrap.cb-ten{max-height:calc(10 * 31px + 38px);overflow:auto} .panel.expanded .tablewrap.cb-ten{max-height:none} /* ---------- Create invoice ---------- */ .inv-form{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;padding:16px 18px 18px} @media (max-width:1100px){ .inv-form{grid-template-columns:1fr} } .inv-controls .field{display:block;margin-bottom:14px} .inv-controls .field > span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px} .inv-controls .field > span em{font-weight:400;font-style:normal;color:var(--ink-3)} .inv-controls input,.inv-controls select{width:100%} .inv-accounts{border:1px solid var(--rule);border-radius:6px;max-height:260px;overflow:auto; background:var(--surface-2);margin-top:7px} .inv-acct{display:grid;grid-template-columns:auto 1fr auto;gap:3px 9px;align-items:center; padding:7px 10px;border-bottom:1px solid var(--rule);cursor:pointer;font-size:12.5px} .inv-acct:last-child{border-bottom:0} .inv-acct:hover{background:var(--surface)} .inv-acct.on{background:var(--accent);color:var(--accent-ink)} .inv-acct.on .inv-acct-m,.inv-acct.on .inv-acct-gb{color:inherit;opacity:.85} .inv-acct input{width:auto;margin:0;grid-row:span 2} .inv-acct-n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .inv-acct-gb{font:11px var(--mono);color:var(--ink-3);grid-row:span 2;white-space:nowrap} .inv-acct-m{grid-column:2;font-size:10.5px;color:var(--ink-3);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .inv-warn{color:var(--yellow)} .inv-preview{border:1px solid var(--rule);border-radius:8px;padding:18px 20px;background:var(--surface); min-height:180px;overflow:auto} /* The invoice header owns its styling rather than borrowing the workstream report's classes, which are defined only inside the print block and so left this unstyled and misaligned on screen. */ .inv-head{padding-bottom:14px;border-bottom:1px solid var(--rule)} /* The header text lines up with the "Accounts" label in the totals box below, which sits one box-padding in from the invoice's content edge. Both read that inset from the same place so they cannot drift apart. */ .invoice{--inv-inset:16px;--inv-border:1px} /* The header has no border of its own, so it has to add the totals box's border width to land on the same pixel as the text inside it. */ .inv-head{display:flex;flex-direction:column;justify-content:center;align-items:flex-start; text-align:left;min-height:92px;padding-left:calc(var(--inv-inset) + var(--inv-border))} .inv-kicker{font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);margin-bottom:8px} .invoice h1{margin:0 0 6px;font-size:21px;line-height:1.2;letter-spacing:-.3px} .inv-untitled{color:var(--ink-3);font-weight:400;font-style:italic} .inv-sub{font-size:12px;color:var(--ink-3)} /* Each table scrolls on its own. Letting the whole invoice scroll dragged the header off the left edge whenever a wide table was read. */ .inv-preview{overflow:visible} .inv-tw{overflow-x:auto;max-width:100%} .inv-tw table.grid{min-width:100%} .invoice h3{margin:20px 0 8px;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-2)} .inv-flag{font-size:12px;background:var(--yellow-bg);border:1px solid var(--yellow);color:var(--ink); border-radius:6px;padding:8px 11px;margin:12px 0 0} .inv-total{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0 4px;padding:13px var(--inv-inset); background:var(--surface-2);border:var(--inv-border) solid var(--rule);border-radius:8px} .inv-total div{display:flex;flex-direction:column;gap:2px} .inv-total span{font-size:11px;color:var(--ink-3)} .inv-total b{font:600 17px/1 var(--mono)} .inv-total .inv-amt{color:var(--accent)} .inv-actions{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px; border-top:1px solid var(--rule)} #tbl-invoices td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:18px} /* Printing an invoice prints the invoice, not the page it happens to sit on. */ /* Printing an invoice prints the invoice alone: no other panel, none of the controls that made it, and none of the app chrome around it. What is left is the document itself, sitting on the page margins rather than inside a box. */ body.printing-invoice .view > .panel{display:none !important} body.printing-invoice #view-chargeback > .panel:nth-child(2){ border:0 !important;background:none !important;box-shadow:none !important; padding:0 !important;margin:0 !important; } /* The panel head is the app talking about the invoice, not part of the bill. The top bar goes too: its mark and wordmark are the last of the X-RAMP branding on the page, and a bill carries the biller's identity, not the tool's. */ body.printing-invoice .panel-head, body.printing-invoice .topbar, body.printing-invoice #banner{display:none !important} body.printing-invoice #inv-preview{border:0;padding:0;overflow:visible} body.printing-invoice .inv-form{display:block;padding:0;gap:0} body.printing-invoice .inv-controls,body.printing-invoice .inv-actions{display:none !important} /* The header keeps its inset so it still lines up with the totals box, which keeps its own. Zeroing the page padding is what made the text hug the edge. */ body.printing-invoice .invoice{padding:0} @media print{ body.printing-invoice #view-chargeback > .panel:nth-child(2){display:block !important} /* Room around the bill, independent of whatever margins the printer applies. */ @page{margin:16mm} /* A bill goes out on the recipient's terms, not the tool's, so the invoice header carries no mark at all. */ .inv-kicker{color:#666} .invoice h1{font-size:19pt} .inv-tw{overflow:visible !important} .invoice table.grid{width:100%;font-size:9pt} .inv-total{break-inside:avoid} } /* ---------- ingest against budget, in the Accounts header ---------- */ .hdr-stats{display:flex;align-items:center;gap:8px;margin-left:14px} /* Sized to the buttons alongside them, so the row reads as one band. */ /* One width for all three, so the row reads as a set rather than as three differently sized labels. */ .hdr-box{display:flex;flex-direction:column;justify-content:center;gap:1px; padding:3px 11px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2); height:32px;width:104px;white-space:nowrap;overflow:hidden} .hdr-box small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1} .hdr-box b{font:600 13px/1 var(--mono)} .hdr-box b .unit{font-size:10px;color:var(--ink-3);margin-left:1px} /* Over budget is the state worth noticing, so it is the one that is tinted. */ .hdr-box.over{border-color:var(--red);background:var(--red-bg)} .hdr-box.over b{color:var(--red)} .hdr-box.under{border-color:var(--green);background:var(--green-bg)} .hdr-box.under b{color:var(--green)} /* The glyph is scaled to stand as tall as the boxes beside it, rather than sitting as a small mark against them. */ .hdr-trend{display:flex;align-items:center;justify-content:center;min-width:30px;height:32px; font-size:26px;font-weight:700;line-height:1} .hdr-trend.up{color:var(--red)} .hdr-trend.down{color:var(--green)} .hdr-trend.flat,.hdr-trend.none{color:var(--ink-3);font-size:22px} @media (max-width:1100px){ .hdr-stats{display:none} } @media print{ .hdr-stats{display:none !important} } /* ---------- edit a workstream in place ---------- */ /* The affordance is deliberately quiet: a hover tint rather than a permanent border, so the header still reads as a header and not as a form. */ .ws-edit{cursor:pointer;border-radius:6px;transition:background .12s} .ws-edit:hover{background:var(--surface-2);outline:1px solid var(--rule)} #ws-pri-slot{display:inline-flex;align-items:center;padding:2px 4px;margin:-2px -4px} .ws-desc{display:block;margin:8px 0 14px;padding:6px 8px;margin-left:-8px;margin-right:-8px} .ws-desc p{margin:0} .ws-inline-pri{width:auto;font-size:12.5px;padding:4px 8px} .ws-owner{display:inline-block;padding:1px 4px;margin:-1px -2px;color:var(--ink)} .ws-owner:has(select){background:none;outline:0;cursor:default} .ws-inline-owner{width:auto;font-size:12px;padding:3px 7px} .ws-inline-desc{width:100%;font:13px/1.5 var(--sans);padding:9px 11px;border:1px solid var(--accent); border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical} .ws-desc:has(textarea){background:none;outline:0;cursor:default} @media print{ .ws-edit:hover{background:none;outline:0} } /* ---------- email template ---------- */ #dlg-mail .mail-to{font-size:13px;padding:9px 12px;background:var(--surface-2); border:1px solid var(--rule);border-radius:6px;margin-bottom:10px} #dlg-mail #mail-note{margin:0 0 10px;color:var(--yellow)} /* Monospace so the indented blocks in the template line up as written. */ #dlg-mail textarea{width:100%;font:12px/1.55 var(--mono);padding:12px 14px; border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical} /* ---------- flat action icons ---------- Drawn rather than typed. U+1F5A8 and U+2709 sit in the emoji block and render in the platform's own colors, which put a full-color printer next to the monochrome glyph set on the launcher. These inherit the button's text color like every other icon in the app. */ .ico-svg{ width:14px;height:14px;flex:none; fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round; vertical-align:-2px; } .btn .ico-svg + *{margin-left:2px} /* Icon-only buttons in a table row want the glyph a touch larger. */ .tk-mail .ico-svg,.tk-print .ico-svg{width:15px;height:15px;vertical-align:-3px} /* ---------- Migration workflows ---------- */ /* The one action this page exists to offer, so it gets the middle of the page rather than a corner of the toolbar. */ .mig-cta{display:flex;justify-content:center;padding:26px 18px 22px;border-bottom:1px solid var(--rule)} .btn.lg{font-size:14px;padding:11px 22px} .mig-route{display:inline-flex;align-items:center;gap:6px;font:12px var(--mono)} .mig-route .arrow{color:var(--ink-3)} .mig-kinds{font-size:11.5px;color:var(--ink-2)} #tbl-migrations tbody tr{cursor:pointer} #tbl-migrations td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:26px} .st-pill.draft{background:var(--surface-2);color:var(--ink-2);border-color:var(--rule)} .st-pill.ready{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)} .st-pill.running{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .st-pill.complete{background:var(--green-bg);color:var(--green);border-color:var(--green)} .st-pill.failed{background:var(--red-bg);color:var(--red);border-color:var(--red)} /* A run that finished with some items not created: short of complete, but not a run that broke. */ .st-pill.errors{background:var(--orange-bg);color:var(--orange);border-color:var(--orange)} /* ---------- the wizard ---------- */ #dlg-wizard{width:min(760px,94vw)} .wz-steps{display:flex;gap:4px;margin:0 0 18px;padding:0;list-style:none} .wz-steps li{flex:1;font-size:11px;color:var(--ink-3);padding:7px 9px;border-top:3px solid var(--rule); line-height:1.3} .wz-steps li.on{color:var(--accent);border-top-color:var(--accent);font-weight:600} .wz-steps li.done{color:var(--ink-2);border-top-color:var(--ink-3)} .wz-body{min-height:290px} .wz-body .field{display:block;margin-bottom:14px} .wz-body .field > span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px} .wz-body input[type=text],.wz-body select{width:100%} .wz-two{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end} .wz-two .arrow{font-size:20px;color:var(--ink-3);padding-bottom:9px} .wz-kind{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--rule); border-radius:7px;margin-bottom:8px;cursor:pointer} .wz-kind:hover{background:var(--surface-2)} .wz-kind.on{border-color:var(--accent);background:var(--surface-2)} .wz-kind input{margin:2px 0 0;width:auto;flex:none} .wz-kind b{display:block;font-size:13px;font-weight:600} .wz-kind small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.4} .wz-pick{border:1px solid var(--rule);border-radius:7px;max-height:270px;overflow:auto;background:var(--surface-2)} .wz-pick-grp{font:10px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3); padding:8px 11px 4px;position:sticky;top:0;background:var(--surface-2)} .wz-pick label{display:flex;gap:9px;align-items:center;padding:6px 11px;font-size:12.5px;cursor:pointer} .wz-pick label:hover{background:var(--surface)} .wz-pick input{width:auto;margin:0;flex:none} .wz-sum{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-bottom:14px} .wz-sum dt{color:var(--ink-3)} .wz-sum dd{margin:0;font-weight:600} .wz-note{font-size:12px;background:var(--yellow-bg);border:1px solid var(--yellow);border-radius:6px; padding:10px 12px;margin-top:14px;line-height:1.5} @media print{ .mig-cta,#mig-filter,#mig-print{display:none !important} } /* Entity rows in the wizard: name, then its id and enabled state, which only some kinds have. A kind without the concept shows nothing rather than a default that would read as fact. */ .wz-ent{display:flex;align-items:baseline;gap:9px;min-width:0;flex:1} .wz-ent-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wz-ent-id{font-size:10.5px;color:var(--ink-3);white-space:nowrap} .wz-ent-en{margin-left:auto;font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid;white-space:nowrap} .wz-ent-en.on{color:var(--green);border-color:var(--green);background:var(--green-bg)} .wz-ent-en.off{color:var(--ink-3);border-color:var(--rule);background:var(--surface-2)} /* The review step's dependency and reference check. */ .wz-h{margin:16px 0 7px;font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)} .wz-dep{margin:0 0 4px;padding-left:18px;font-size:12.5px} .wz-dep li{margin-bottom:4px} .wz-refs{border:1px solid var(--rule);border-radius:7px;max-height:150px;overflow:auto} .wz-ref{display:flex;align-items:baseline;gap:9px;padding:5px 10px;font-size:12px;border-bottom:1px solid var(--rule)} .wz-ref:last-child{border-bottom:0} .wz-ref-s{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid;flex:none} .wz-ref.mapped .wz-ref-s{color:var(--green);border-color:var(--green);background:var(--green-bg)} .wz-ref\.matched-by-name .wz-ref-s,.wz-ref.matched-by-name .wz-ref-s{color:var(--yellow);border-color:var(--yellow);background:var(--yellow-bg)} .wz-ref.missing .wz-ref-s{color:var(--red);border-color:var(--red);background:var(--red-bg)} .wz-ref-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wz-block{font-size:12px;background:var(--red-bg);border:1px solid var(--red);border-radius:7px; padding:11px 13px;margin-top:14px;line-height:1.5} .wz-block ul{margin:7px 0;padding-left:18px} .wz-block li{margin-bottom:4px} /* ---------- running a migration ---------- */ .run-status p{margin:0 0 8px;font-size:13px} .run-err{color:var(--red)} .run-steps{ max-height:46vh;overflow-y:auto;margin-top:12px; border:1px solid var(--rule);border-radius:8px; } .run-steps:empty{display:none} .run-step{ display:grid;grid-template-columns:96px 128px 1fr;gap:4px 10px; align-items:baseline;padding:8px 12px;font-size:13px; } .run-step + .run-step{border-top:1px solid var(--rule)} .run-step .hint,.run-step .run-warn{grid-column:2 / -1;font-size:12px} .run-act{ font:11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.4px; padding:1px 7px;border-radius:10px;text-align:center; background:var(--grey-bg);color:var(--grey); } .run-step.created .run-act{background:var(--green-bg);color:var(--green)} .run-step.would-create .run-act{background:var(--surface-2);color:var(--ink-2)} .run-step.skipped .run-act{background:var(--grey-bg);color:var(--grey)} .run-step.failed .run-act{background:var(--red-bg);color:var(--red)} .run-kind{color:var(--ink-2);font-size:12px} .run-name{font-weight:600} .run-warn{color:var(--yellow)} .run-pruned{color:var(--yellow);font-size:12px;margin:0 0 8px} /* ---------- your account: password ---------- */ .acct-row{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 14px; border:1px solid var(--rule);border-radius:8px;background:var(--surface-2);font-size:13.5px} .pw-form{border:1px solid var(--rule);border-radius:8px;padding:12px 14px;margin:-6px 0 16px} .pw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px} .pw-grid .field{margin:0} .pw-form .hint{margin:8px 0 10px} .ak-h{margin:6px 0 6px;font-size:14px} /* ---------- account detail printouts ---------- */ @media print{ .ar-verdict{border:1px solid #ccc;border-left:3px solid #111;padding:9px 12px;margin:0 0 6px;font-size:10.5pt} .ar-table{width:100%;border-collapse:collapse;font-size:9pt} .ar-table th{text-align:left;font:7.5pt ui-monospace,Menlo,monospace;text-transform:uppercase; letter-spacing:.06em;color:#555;border-bottom:1px solid #111;padding:5px 6px} .ar-table td{padding:5px 6px;border-bottom:1px solid #e3e3e3;vertical-align:top} .ar-table .r{text-align:right;white-space:nowrap;font-family:ui-monospace,Menlo,monospace} .ar-table tr{break-inside:avoid;page-break-inside:avoid} .ar-table small,.ar-note{color:#666;font-size:8pt} .ar-st.red,.ar-table td.red,.ar-table td.up{color:#b32318} .ar-st.yellow,.ar-table td.yellow{color:#8a6100} .ar-st.green,.ar-table td.green,.ar-table td.down{color:#1a7f37} .ar-foot{font-size:8.5pt;color:#555;margin-top:12px} .ar-grid table.grid{width:100%} } /* ---------- nightly analysis cache ---------- */ .warm-status{font-size:12.5px;line-height:1.6;color:var(--ink-2); border:1px solid var(--rule);border-radius:8px;padding:10px 12px;margin:10px 0 4px;background:var(--surface-2)} .warm-status b{color:var(--ink);font-family:var(--mono)} .warm-live{color:var(--accent);font-weight:600} .warm-bad{color:var(--red)} #tbl-warm td.name{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #tbl-warm input[type=checkbox]{width:auto;min-width:0;margin:0} /* The browser draws the time and date picker glyph dark; invert it when the surface under it is dark, so it stays visible in either theme. */ :root{--picker-invert:0} :root[data-theme="dark"]{--picker-invert:1} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--picker-invert:1} } /* ---------- admin, menu on the left ---------- */ /* The settings used to be one long scroll of boxes. Each box is now a menu item, so the page shows one at a time and the menu says what else there is. */ .adm{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0;align-items:start} .adm-nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px 16px 16px; border-right:1px solid var(--rule);position:sticky;top:0} .adm-item{appearance:none;text-align:left;font:13px var(--sans);color:var(--ink-2); background:none;border:0;border-radius:6px;padding:9px 11px;cursor:pointer;line-height:1.3} .adm-item:hover{background:var(--surface-2);color:var(--ink)} .adm-item.on{background:var(--accent);color:var(--accent-ink);font-weight:600} .adm-body{padding:16px} /* A pane is the box's contents; the box keeps its own border and legend. */ .adm-sec > fieldset{margin-bottom:0} .adm-savebar{margin-top:16px} .adm-savebar .savebar{padding-top:0} /* The users pane carries a panel head of its own from when it was a panel. */ .adm-sec[data-sec="users"] .panel-head{padding-left:0;padding-right:0;border-top:0} @media (max-width:820px){ .adm{grid-template-columns:1fr} .adm-nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--rule);position:static} } @media print{ /* On paper there is no navigating: show every section and drop the menu. */ .adm-nav,.adm-savebar{display:none !important} .adm{grid-template-columns:1fr} .adm-sec[hidden]{display:block !important} } /* A checkbox whose explanation runs to several lines: the box and its label stay on one row, the explanation sits under both rather than squeezing the label into a narrow column beside it. */ .check.check-stack{display:block} .check.check-stack .check-row{display:flex;align-items:center;gap:8px} .check.check-stack .hint{display:block;margin-top:5px} /* Cache status reuses the report figure strip, which is print-only by default. */ .cache-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin:0 0 14px} .cache-figs > div{background:var(--surface);padding:11px 13px;border:0} .cache-figs .k{display:block;font:10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .cache-figs .v{display:block;font:600 17px/1.2 var(--mono);margin-top:4px;color:var(--ink)} .cache-figs .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px} /* The theme buttons keep their grouped look now that they sit in a field. */ .field .themeset{display:inline-flex} /* ---------------- application log ---------------- */ .log-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 18px;margin-top:6px} #tbl-logs td{vertical-align:top} #tbl-logs td.nowrap{white-space:nowrap} .log-lvl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em} .log-lvl.info{color:var(--ink-3)} .log-lvl.warn{color:#b7791f} .log-lvl.error{color:var(--red)} /* The browser string is 200 characters of version numbers; the column shows the few words that identify it and keeps the rest on the hover. */ .si-agent{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.grid tbody td .hint{font-size:11px;line-height:1.4} /* A failed run should be findable by eye in a page of routine lines. */ tr.log-row.error td:first-child{box-shadow:inset 2px 0 0 var(--red)} tr.log-row.warn td:first-child{box-shadow:inset 2px 0 0 #b7791f} #tbl-logs details summary{cursor:pointer;font-size:11.5px;color:var(--ink-3);margin-top:3px} #tbl-logs details pre{white-space:pre-wrap;word-break:break-word;font-family:var(--mono); font-size:11.5px;line-height:1.5;margin:6px 0 2px;color:var(--ink-2); background:var(--surface-2);border:1px solid var(--rule);border-radius:5px;padding:8px 10px;max-height:260px;overflow:auto} /* The log's search field, matched to the selects beside it. Scoped rather than applied to input[type=search] generally: that selector outranks .filter and would silently restyle the six filter boxes elsewhere in the app. */ #log-q{font:13px var(--sans);padding:8px 10px;border:1px solid var(--rule); border-radius:6px;background:var(--surface-2);color:var(--ink);min-height:36px; line-height:1.25;width:100%;appearance:none;-webkit-appearance:none} #log-q::-webkit-search-decoration, #log-q::-webkit-search-cancel-button{-webkit-appearance:none} /* ---------------- dashboard / query profiler ---------------- */ .pf-note{padding:10px 16px 8px;margin:0} /* The query table is for reading, not selecting, so its rows do not pretend to be clickable. */ table.pf-q tbody tr{cursor:default} table.pf-q td{vertical-align:top} table.pf-q td.pf-nrql{font-family:var(--mono);font-size:11.5px;line-height:1.45;white-space:pre-wrap; word-break:break-word;min-width:360px;color:var(--ink-2)} .pf-summary{font-size:12.5px;color:var(--ink-2);line-height:1.5;padding-top:0} .pf-stat{font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:nowrap} table.pf-q td .verify{font-size:11.5px} /* ---------------- CCU variance thresholds ---------------- */ .ccu-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 18px;margin-top:6px} .ccu-level h5{margin:8px 0 6px;font-size:12.5px;font-weight:650} .ccu-ovr-form{flex-wrap:wrap} .ccu-ovr-form input.sm{width:112px} #ccu-ovr td.nowrap{white-space:nowrap} #ccu-ovr .ovr-dflt{color:var(--ink-3)} /* A figure at or above a level in the profiler. */ .lvl{border-radius:4px;padding:0 4px;font-weight:600;white-space:nowrap} .lvl-warn{color:var(--yellow);background:var(--yellow-bg)} .lvl-crit{color:var(--red);background:var(--red-bg)} .pf-levels{font-size:12px;color:var(--ink-3);padding-top:0} /* Level filters above a dashboard's queries. */ .pf-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 16px 10px} .pf-filters-label{font-size:12px;color:var(--ink-3);margin-right:2px} .pf-flt{font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;cursor:pointer; border:1px solid var(--rule);background:var(--surface-2);color:var(--ink-2)} .pf-flt:hover{border-color:var(--ink-3)} .pf-flt.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .pf-flt.lvl-f-warn.on{background:var(--yellow-bg);border-color:var(--yellow);color:var(--yellow);font-weight:600} .pf-flt.lvl-f-crit.on{background:var(--red-bg);border-color:var(--red);color:var(--red);font-weight:600} /* A query's dashboard variables and their defaults, under the query text. */ .pf-vars{margin-top:6px;padding-top:5px;border-top:1px dashed var(--rule);font:12px/1.5 var(--sans);white-space:normal} .pf-vars code{font-family:var(--mono);font-size:11.5px} .pf-vars .hint{display:inline;margin:0} .pf-var-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:3px 0} .pf-var-row label{min-width:150px} .pf-var-row select.pf-var,.pf-var-row input.pf-var{font:12px var(--mono);padding:3px 6px;max-width:280px;min-width:140px; border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink)} .pf-var-row select.pf-var[multiple]{padding:2px} .pf-vars .pf-reset{margin-top:4px} /* A run's figures judged against the account's levels. */ .pf-verdicts{font-size:11.5px;line-height:1.5;margin-bottom:6px} /* Label, value and status in fixed columns, so the statuses line up down one result and across every result in the table, whatever the figure's width. */ .pf-verdict{display:grid;grid-template-columns:52px 10ch 64px;align-items:center;column-gap:8px;font-family:var(--mono)} .pf-verdict > span:first-child{font-family:var(--sans);color:var(--ink-3)} .pf-verdict > .pf-val{text-align:right;white-space:nowrap} .pf-verdict > .pf-lv{justify-self:start} .pf-verdicts .hint{margin-top:2px} /* The grid's cells do not wrap, and long widget titles and run notes pushed the Run column off the edge. Here text wraps inside bounded columns instead. */ table.pf-q tbody td{white-space:normal;overflow-wrap:anywhere} table.pf-q td:nth-child(1){min-width:90px;max-width:160px} table.pf-q td:nth-child(2){min-width:120px;max-width:220px} table.pf-q td.pf-result{min-width:230px;max-width:290px} table.pf-q td.pf-act{width:1%;white-space:nowrap} .pf-lv{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid;min-width:60px;box-sizing:border-box;text-align:center} .pf-lv-ok{color:var(--green);background:var(--green-bg);border-color:var(--green)} .pf-lv-warn{color:var(--yellow);background:var(--yellow-bg);border-color:var(--yellow)} .pf-lv-crit{color:var(--red);background:var(--red-bg);border-color:var(--red)} table.pf-q tr.pf-ran > td:first-child{box-shadow:inset 3px 0 0 var(--green)} table.pf-q tr.pf-ran-warn > td:first-child{box-shadow:inset 3px 0 0 var(--yellow)} table.pf-q tr.pf-ran-crit > td:first-child{box-shadow:inset 3px 0 0 var(--red)} .pf-filters-end{margin-left:auto;display:flex;align-items:center;gap:8px} .pf-runall.stop{border-color:var(--red);color:var(--red)} /* The dashboard count, pushed to the right end of the account and search row. */ .tile.pf-count{margin-left:auto} .tile.pf-count,.tile.pf-unused{padding:8px 14px;min-width:120px;text-align:right} .tile.pf-count b,.tile.pf-unused b{font-size:19px} .tile.pf-count > span,.tile.pf-unused > span{margin-top:3px} /* Dashboard Detail summary cards: the dashboard, and its last 24 hours. */ .pf-cards{display:flex;flex-wrap:wrap;gap:12px 24px;padding:12px 16px 6px} .pf-card-group{flex:1 1 320px;min-width:0} .pf-card-group h5{margin:0 0 6px;font-size:11px;font-weight:650;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3)} .pf-card-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .pf-card-row .tile{padding:10px 12px} .pf-card-row .tile b{font-size:19px} @media (max-width:520px){.pf-card-row{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Popularity and appeal: the score with a small bar under it. */ .pf-score{display:inline-grid;gap:2px;min-width:44px} .pf-score b{font:600 12.5px/1 var(--mono)} .pf-score i{display:block;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--w),var(--rule) var(--w))} .pf-card-row .tile b small{font-size:11px;color:var(--ink-3);font-weight:500;margin-left:2px} /* Hide unused: a switch built on a real checkbox, so it keeps keyboard and screen reader behavior. */ .pf-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer; height:34px;user-select:none;position:relative} .pf-toggle input{position:absolute;opacity:0;width:1px;height:1px} .pf-switch{width:32px;height:18px;border-radius:999px;background:var(--rule);position:relative;transition:background .15s;flex:none} .pf-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%; background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s} .pf-toggle input:checked + .pf-switch{background:var(--accent)} .pf-toggle input:checked + .pf-switch::after{transform:translateX(14px)} .pf-toggle input:focus-visible + .pf-switch{outline:2px solid var(--accent);outline-offset:2px} .pf-toggle:has(input:disabled){opacity:.55;cursor:default} /* Work in progress on this screen reads green: it is measuring, not waiting on a problem, and each measurement spends a little CCU that the reader is watching for. */ #lp-plan-out.busy, #lp-plan-out .busy, #lp-status.busy, #lp-out .busy{color:var(--green)} /* A plan's rules. Numbered when the order decides which rule takes a shared record, plain bullets when no record can match two of them. */ .lp-rules{margin:0 0 10px;padding-left:22px;display:grid;gap:6px} .lp-rules li{font-size:13px} .lp-rules.unordered{list-style:disc} .lp-rules .hint{display:inline;margin-left:8px} /* The rule New Relic itself needs, under a measured plan. */ .lp-h3{margin:18px 0 6px;font-size:14px} .lp-rule-code{border:1px solid var(--rule);border-radius:7px;padding:10px 12px;margin-bottom:10px;background:var(--surface-2)} .lp-rule-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;font-weight:600} .lp-code{margin:0;padding:8px 10px;border-radius:5px;background:var(--surface);border:1px solid var(--rule); font:11.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink-2)} .lp-rule-code details{margin-top:6px} .lp-rule-code summary{font-size:12px;color:var(--ink-3);cursor:pointer} .lp-rule-code details[open] summary{margin-bottom:6px} /* Grid cells do not wrap, which is right for a column of names or numbers and wrong for a sentence: a recommendation's reason is two lines of prose, and left unwrapped it widens the table until the task button is off the right edge behind a scrollbar. This one column wraps, and takes the slack. */ table.grid tbody td.al-why{white-space:normal;line-height:1.45;width:100%;min-width:220px} /* The title is a sentence too. Left unwrapped, the longest one sets the table's width on its own and pushes the button off a narrow screen. */ table.grid tbody td.al-rec{white-space:normal;line-height:1.4;min-width:190px} table.grid tbody tr:has(td.al-why) td{height:auto;vertical-align:top;padding-top:8px;padding-bottom:8px} /* ---------------- Incident Heatmap ---------------- */ /* Shared with the analysis pages: a line that describes the table under its own heading rather than floating above the panel. */ .panel-note{margin:0;padding:11px 16px;border-bottom:1px solid var(--rule); font-size:13px;line-height:1.55;color:var(--ink-2);background:var(--surface-2)} .ih-window{margin:0 0 12px} .ih-tiles{margin-bottom:14px} .ih-filters{display:flex;gap:6px;flex-wrap:wrap} .ih-filters .btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} /* The map is 24 hours wide, so it scrolls sideways with the account column pinned. */ .ih-wrap{max-height:none;overflow:auto} .ih-grid{border-collapse:separate;border-spacing:0} .ih-grid th,.ih-grid td{white-space:nowrap} .ih-grid th.ih-h{text-align:center;font:11px/1.2 var(--mono);color:var(--ink-3);padding:6px 4px;min-width:38px} .ih-grid th.ih-day{color:var(--ink-2)} .ih-grid th.ih-h .ih-d{display:block;font-size:9.5px;color:var(--ink-3);letter-spacing:.02em} .ih-grid td.ih-c{text-align:center;font:11.5px var(--mono);padding:5px 4px;min-width:38px; font-variant-numeric:tabular-nums} .ih-grid .ih-acct{position:sticky;left:0;z-index:2;background:var(--surface); max-width:230px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px} .ih-grid thead .ih-acct,.ih-grid tfoot .ih-acct{z-index:3} .ih-grid tfoot th{position:sticky;bottom:0;background:var(--surface-2);font:11.5px var(--mono); text-align:center;border-top:1px solid var(--rule)} .ih-grid .ih-tot{font-family:var(--mono);font-weight:600} .ih-id{color:var(--ink-3);font:10.5px var(--mono);margin-left:6px} @media print{ .ih-wrap{overflow:visible;max-height:none} .ih-grid .ih-acct,.ih-grid tfoot th{position:static} .ih-grid td.ih-c{-webkit-print-color-adjust:exact;print-color-adjust:exact} .ih-filters{display:none} } .ih-legend{display:flex;align-items:center;gap:3px;margin-right:6px} .ih-legend .hint{display:inline;margin:0 5px} .ih-key{display:inline-block;min-width:22px;height:16px;border-radius:2px; font:9.5px/16px var(--mono);text-align:center;padding:0 3px} .ih-prio{font:10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em; border-radius:3px;padding:4px 7px;border:1px solid} .ih-prio.critical{background:var(--red-bg);color:var(--red);border-color:var(--red)} .ih-prio.warning{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)} .ih-prio.other{background:var(--surface-2);color:var(--ink-3);border-color:var(--rule)} .ih-grid td.ih-c.has{cursor:pointer} .ih-grid td.ih-c.has:hover,.ih-grid td.ih-c.has:focus{outline:2px solid var(--ink);outline-offset:-2px} .ih-h4{margin:16px 0 6px;font-size:13px;font-weight:600} .ih-ents{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px} .ih-ent{font:11.5px var(--mono);background:var(--surface-2);border:1px solid var(--rule); border-radius:3px;padding:3px 7px;color:var(--ink-2)} .ih-ent b{color:var(--ink);margin-left:5px} /* The breakdown is three tables deep, so the dialog scrolls rather than running off the bottom of the screen with its Close button. */ /* Seven columns of incident, so it takes the width dlg-wide asks for: the base dialog rule caps everything at 640px, which dlg-wide's width alone cannot beat. */ #ih-detail{max-height:92vh;overflow:auto;width:min(1100px,94vw);max-width:min(1100px,94vw)} /* Condition and incident titles are long sentences; in a dialog they wrap rather than pushing the counts off the right edge. */ #ih-detail table.grid tbody td{white-space:normal;padding-top:5px;padding-bottom:5px;height:auto} #ih-detail table.grid tbody td.num,#ih-detail table.grid tbody td.mono{white-space:nowrap} /* Entity and policy names are often one unbroken token (a host, an ARN), which wrapping on spaces cannot shorten; they widened the incidents table past the dialog and scrolled the New Relic button out of sight. Break them anywhere, and hold the button's column to the button. */ #ih-detail table.grid tbody td{overflow-wrap:anywhere} #ih-detail table.grid tbody td.ih-link{width:1%;white-space:nowrap} #ih-detail .ih-prio{overflow-wrap:normal;white-space:nowrap} #ih-detail table.grid tbody tr{cursor:default} /* An account name on the map opens that account by condition. */ .ih-open{background:none;border:0;padding:0;color:var(--ink);font:inherit;text-align:left; cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px} .ih-open:hover{text-decoration-color:var(--accent);color:var(--accent)} .ih-back{display:flex;align-items:center;gap:10px;margin:0 0 12px} .ih-focus{font-size:14px;font-weight:600} /* Searching the entities to migrate: one bar per kind, under its heading. */ .wz-find{display:flex;align-items:center;gap:10px;margin:0 0 6px;flex-wrap:wrap} .wz-find input[type=text]{flex:1;min-width:180px;font-size:12.5px;padding:5px 8px} .wz-only{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer} .wz-only input{width:auto;margin:0} .wz-find .hint{display:inline} .wz-pick label[hidden]{display:none} /* A condition name on the map is a link to the condition in New Relic. */ .ih-cond{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;color:var(--ink); text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px} .ih-cond:hover{color:var(--accent);text-decoration-color:var(--accent)} .ih-cond-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ih-cond-x{flex:none} /* Budget view of the accounts table: the owner and GBL from Chargeback. */ .viewset{margin-right:8px} .avgset{margin-right:8px} .avgset .btn{min-width:62px;justify-content:center} @media print{ .avgset{display:none !important} } table.grid tbody td.cb-owner{max-width:180px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px} table.grid tbody td.cb-gbl{font-size:12px;color:var(--ink-2)} td.cb-owner .hint{font-size:11px} /* An owner or GBL with a value bills across accounts, so it reads as a link. */ table.grid tbody td.cb-go{cursor:pointer;text-decoration:underline; text-decoration-color:var(--rule);text-underline-offset:3px} table.grid tbody td.cb-go:hover{color:var(--accent);text-decoration-color:var(--accent)} /* The heatmap's own row filter, left of the key. */ .ih-find{max-width:230px;min-width:150px} .ih-find-hit{display:inline;white-space:nowrap} /* The map's header carries a search, a legend, the window picker and the priority filters, so it wraps; the expander that wrapped with them landed at the left of the second line. It keeps the right edge whichever line it is on, expanded or not, since it is the same button. */ #ih-out .panel-head .expander{margin-left:auto} .ih-grid tbody tr[hidden]{display:none} /* An Admin section a superuser cannot open: listed, greyed, and not rendered. */ .adm-item.locked{opacity:.45;cursor:not-allowed} .adm-item.locked:hover{background:none} /* A hint that has turned into a complaint. */ .field .hint.bad{color:var(--red)} /* A CCU row that leads somewhere. */ #view-ccu table.grid tbody tr.ccu-go{cursor:pointer} #view-ccu table.grid tbody tr.ccu-go:hover{background:var(--surface-2)} .ih-grid tbody tr.ih-none td{padding:10px 12px;font-size:13px;color:var(--ink-2);white-space:normal} .ih-win .btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} /* A condition that costs CCU every cycle and has never once fired. */ .ccu-never{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--yellow);background:var(--yellow-bg); border:1px solid var(--yellow);border-radius:3px;padding:3px 7px} /* Five columns in a third of the window: the numbers give up their side padding before the trend arrow gives up its place on screen. */ #tbl-ccu-alerts td,#tbl-ccu-alerts th{padding-left:7px;padding-right:7px} .ccu-never{padding:2px 5px} .ih-none-links{display:inline-flex;align-items:baseline;gap:10px;margin-left:4px;flex-wrap:wrap} .ua-h4{margin:14px 0 7px;font-size:12px;font-weight:600;color:var(--ink-3); text-transform:uppercase;letter-spacing:.06em} .ua-h4:first-child{margin-top:0} /* User Audit on paper: a report about a person, not a search form. */ .ua-print-head{display:none} @media print{ #ua-form,#ua-run,#ua-print,#ua-status{display:none !important} #view-users > .panel:first-child{border:0;padding:0;margin:0} #view-users > .panel:first-child .panel-head{display:none !important} .ua-print-head{display:block;margin:0 0 14px} .ua-print-head h1{font-size:19pt;margin:0 0 4px} .ua-print-head p{margin:0;font-size:10.5pt;color:#333} /* A link drawn as a button is a dead rectangle on paper. */ #ua-out .btn{display:none !important} .ua-id,.grp,#ua-out .panel{break-inside:auto} #ua-out .panel{page-break-inside:auto} .ua-h4{break-after:avoid} } /* The chargeback flag column has no label on screen until it is sortable. */ .cb-flag-h{font:inherit} #cb-head th.sortable{white-space:nowrap} /* Chargeback archive: keep a copy, then choose one to put back. */ .ar-keep{display:flex;align-items:flex-end;gap:12px;margin:12px 0 4px} #tbl-cb-archive tbody tr{cursor:pointer} #tbl-cb-archive tbody tr.sel{background:var(--accent-dim)} #tbl-cb-archive tbody td{white-space:normal} /* ---------- metrics validator ---------- */ /* The same screen as the log validator, so the same rules, keyed on its own ids rather than duplicated with different numbers in them. */ #tbl-mv td.name{max-width:380px} #tbl-mv td.mv-by,#mv-out td.mv-by{max-width:320px;font-size:11px;color:var(--ink-3);white-space:normal;line-height:1.4} .panel-head .mv-count{margin-left:8px} .mv-values{display:flex;align-items:stretch;gap:10px;margin-left:14px} .tile.mv-value{padding:7px 12px;min-width:150px;flex:none; display:flex;flex-direction:column;justify-content:center} .tile.mv-value b{font-size:18px} .tile.mv-value > span{margin-top:2px;max-width:158px} .tile.mv-value .mv-value-parts{font:11px var(--mono);color:var(--ink-2);margin-top:3px} .tile.mv-saving{border-color:var(--green);background:var(--green-bg)} .tile.mv-saving b{color:var(--green)} .tile.mv-question{border-color:var(--yellow);background:var(--yellow-bg)} .tile.mv-question b{color:var(--yellow)} @media print { #view-metricvalidator .form,#view-metricvalidator .expander,#mv-status, #mv-out .mv-copy,#mv-out .mv-task,#mv-out .pf-toggle{display:none !important} #mv-out .tablewrap{max-height:none !important;overflow:visible !important} #mv-out table.grid tbody td,#mv-out table.grid thead th{font-size:8.5pt !important;padding:3px 5px !important} #tbl-mv td.name{white-space:normal !important;word-break:break-word !important} #mv-out .lv-rule pre.nrql{max-height:none !important;white-space:pre-wrap !important} } /* ---------- log validator ---------- */ /* A stream name is the interesting column, so it gets the width a dashboard name gets elsewhere, and the query that named it wraps under it rather than pushing the numbers off the side. */ /* The count sits with the title rather than out at the edge, so it reads as part of the heading; the switch takes the right end of the row on its own. */ .panel-head .lv-count{margin-left:8px} /* The two values close the row, at its right end. Sized down from a summary tile so they sit on one line of a panel head rather than setting the height of it, and stretched so the pair are the same height whichever wraps to more lines. */ .lv-values{display:flex;align-items:stretch;gap:10px;margin-left:14px} .tile.lv-value{padding:7px 12px;min-width:150px;flex:none; display:flex;flex-direction:column;justify-content:center} .tile.lv-value b{font-size:18px} /* Capped so two of these plus the heading, the count and the switch stay on one line of the panel head: unconstrained, the head wrapped and dropped the switch onto a row of its own. */ .tile.lv-value > span{margin-top:2px;max-width:158px} .tile.lv-value .lv-value-parts{font:11px var(--mono);color:var(--ink-2);margin-top:3px} /* Money already found, and money that depends on a judgement: not the same claim, so not the same color. */ .tile.lv-saving{border-color:var(--green);background:var(--green-bg)} .tile.lv-saving b{color:var(--green)} .tile.lv-question{border-color:var(--yellow);background:var(--yellow-bg)} .tile.lv-question b{color:var(--yellow)} #tbl-lv td.name{max-width:380px} #tbl-lv td.lv-by{max-width:320px;font-size:11px;color:var(--ink-3);white-space:normal;line-height:1.4} .lv-rule{border:1px solid var(--rule);border-radius:6px;margin:10px 0;background:var(--surface)} .lv-rule > summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600} .lv-rule > pre.nrql,.lv-rule > .btn{margin:0 14px 12px} /* The generated NRQL is meant to be read and copied, so it keeps its line breaks and scrolls rather than wrapping a 60 name IN list into a wall. */ pre.nrql{font:12px/1.55 var(--mono);background:var(--surface-2);border:1px solid var(--rule); border-radius:6px;padding:12px 14px;overflow:auto;max-height:320px;white-space:pre} @media print { /* On paper the controls and the suggested rules are noise: what is worth printing is the finding and the streams behind it. */ #view-logvalidator .form,#view-logvalidator .expander,#lv-status, #lv-out .lv-copy,#lv-out .lv-task,#lv-out .pf-toggle{display:none !important} #lv-out .tablewrap{max-height:none !important;overflow:visible !important} #lv-out table.grid tbody td,#lv-out table.grid thead th{font-size:8.5pt !important;padding:3px 5px !important} #tbl-lv td.name{white-space:normal !important;word-break:break-word !important} .lv-rule pre.nrql{max-height:none !important;white-space:pre-wrap !important} } /* ---------- ingest budgets ---------- */ /* Cards rather than a table: the question is "which of these needs attention", which is a shape the eye answers faster than a column of numbers. */ .bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;padding:4px 18px 20px} .bg-card{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer; background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:14px 15px 0; font:inherit;color:inherit;overflow:hidden} .bg-card:hover{border-color:var(--accent)} .bg-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .bg-card-top{display:flex;align-items:baseline;gap:10px} .bg-card-top h3{margin:0;font-size:14px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bg-size{font:600 13px/1 var(--mono);white-space:nowrap;text-align:right} .bg-size small{display:block;font:10px/1.4 var(--sans);color:var(--ink-3);font-weight:400;margin-top:3px} .bg-card-mid{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .bg-count{font-size:12px;color:var(--ink-2)} .bg-th{font:10.5px var(--mono);color:var(--ink-3)} /* A plan card gives its name the whole top line and puts the budget beside the account count, hard right. The figure then lines up down the column whatever the name above it did to its own row, which is the point of putting it there: comparing budgets is the reason to look at these cards side by side. */ .bg-card[data-plan] .bg-card-mid{align-items:baseline;flex-wrap:nowrap} .bg-card[data-plan] .bg-count{flex:1;min-width:0} .bg-card[data-plan] .bg-size{margin-left:auto} .bg-card-th{margin-top:-4px} /* Filled, so it still reads at this size. */ .bg-bell{display:inline-block;margin-left:4px;opacity:.65;color:var(--ink-2);vertical-align:-1.5px} .bg-bell svg{width:13px;height:13px;display:block} .bg-notify{margin:6px 0 2px} #bg-notify-hint{display:block;margin:0 0 6px 22px} .bg-card-foot{font-size:11px;color:var(--ink-3);padding-bottom:12px;line-height:1.5} /* Admin controls sit over the card rather than in its flow, so a card is one click target and the controls are two deliberate ones. */ .bg-admin{position:absolute;top:10px;right:12px;display:none;gap:6px} .bg-card:hover .bg-admin,.bg-card:focus-within .bg-admin{display:flex} /* The controls appear over the top-right corner, so a card that has them keeps that corner clear: otherwise they land on the budget figure, which is the one number on the card somebody came to read. */ .bg-card:has(.bg-admin) .bg-card-top{padding-right:60px;min-height:34px} .bg-admin .btn{padding:2px 7px;font-size:11px;background:var(--surface-2)} /* The bar is the budget's range, not a gauge filling up: the middle is the budget, and being far left is as much a finding as being far right. */ /* Pushed to the bottom of the card rather than merely being last in it. The grid stretches every card in a row to the tallest, and a flex column's children do not grow, so on a card with less in it than its neighbours the spare height landed after the bar and left it floating: one card's indicator sat at the bottom edge and the next one's 34 pixels above it. */ .bg-bar{position:relative;height:6px;margin:auto -15px 0;background:var(--surface-2); border-top:1px solid var(--rule);flex:none} .bg-bar > i{position:absolute;top:-3px;width:3px;height:12px;border-radius:2px;background:var(--ink);transform:translateX(-50%)} /* Thicker on an account card. There the bar is a reading, not a proportion: one needle against the budget in the middle, and it has to be legible at a glance across a grid of them. A plan card's bar is a stack of shares and reads fine thin. */ .bg-card[data-account] .bg-bar{height:10px} .bg-card[data-account] .bg-bar > i{top:-3px;height:16px;width:4px} .bg-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ink-3);opacity:.5} .bg-stack{position:absolute;inset:0;display:flex} .bg-stack b{display:block;height:100%} .bg-ok > i,.bg-stack b.bg-ok{background:var(--green)} .bg-warn > i,.bg-stack b.bg-warn{background:var(--yellow)} .bg-crit > i,.bg-stack b.bg-crit{background:var(--red)} .bg-unknown > i,.bg-stack b.bg-unknown{background:var(--grey)} .bg-card.bg-ok{border-bottom-color:var(--green)} .bg-card.bg-warn{border-bottom-color:var(--yellow)} .bg-card.bg-crit{border-bottom-color:var(--red)} .bg-legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 18px 14px;font-size:11px;color:var(--ink-3)} .bg-key{display:inline-flex;align-items:center;gap:5px} .bg-key i{width:10px;height:10px;border-radius:2px;display:inline-block} .bg-key.bg-ok i{background:var(--green)} .bg-key.bg-warn i{background:var(--yellow)} .bg-key.bg-crit i{background:var(--red)} .bg-key.bg-unknown i{background:var(--grey)} .bg-preview{font-size:11.5px;color:var(--ink-2);margin:6px 0 0;line-height:1.6} @media print { #view-budgets .form,#view-budgets .expander,#bg-filter,.bg-admin, #bg-new,#bg-assign,#view-budgets .themeset{display:none !important} .bg-grid{grid-template-columns:repeat(3,1fr);gap:8px} .bg-card{break-inside:avoid} } /* An expanded panel covers the viewport, so a maximize button that lives in another panel is buried under it. That case gets its own close, drawn inside the panel that is doing the covering. */ .expand-close{position:fixed;top:14px;right:18px;z-index:61; background:var(--surface-2);border-color:var(--rule);box-shadow:0 2px 10px rgba(0,0,0,.25)} .expand-close:hover{border-color:var(--accent)} /* Icons rather than words on a hovered card: two small targets read as controls without competing with the plan name for the eye. */ .bg-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px; border:1px solid var(--rule);border-radius:5px;background:var(--surface-2);cursor:pointer;color:var(--ink-2)} .bg-ic:hover{border-color:var(--accent);color:var(--accent)} .bg-ic.bg-del:hover{border-color:var(--red);color:var(--red)} .bg-ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* The plan popup sizes to the dialog: the account name gives up the width, since every other column is a figure that cannot wrap without becoming unreadable. */ #bg-plan{max-width:min(980px,94vw)} .bg-plan-rows{overflow-x:hidden} .bg-plan-table{width:100%;table-layout:fixed} .bg-plan-table td.name{max-width:none;white-space:normal;word-break:break-word} .bg-plan-table td.name .hint{display:block;font:10.5px var(--mono)} .bg-plan-table th.num,.bg-plan-table td.num{width:12%;white-space:nowrap} /* Wide enough for the buttons they hold: at 76px the Remove button needed 82 and pushed the table six pixels past the dialog. Keyed on a class rather than on last-child, because whether the last column is Remove or Ingest depends on who is reading. */ .bg-plan-table th.bg-act,.bg-plan-table td.bg-act{width:88px} .bg-plan-table td.bg-act .btn{padding:3px 8px;font-size:11px} .bg-plan-table th.num,.bg-plan-table td.num:not(.bg-act){width:11%} /* The popup's own header: title and thresholds on the left, close hard right, rather than the close wrapping onto a line of its own. */ #bg-plan .dlg-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px} #bg-plan .dlg-head h3{margin:0;flex:none} #bg-plan .dlg-head .hint{flex:1;min-width:0} #bg-plan .dlg-head .btn{flex:none;margin-left:auto} /* The account picker: a list that can be read and ticked, rather than a dropdown that shows one of two hundred at a time. */ .bg-pick-head{display:flex;align-items:center;gap:12px;margin:12px 0 8px;flex-wrap:wrap} .bg-pick-head .filter{flex:1;min-width:180px} .bg-picker{max-height:min(46vh,340px);overflow:auto;border:1px solid var(--rule);border-radius:6px; background:var(--surface-2)} .bg-pick{display:flex;align-items:center;gap:10px;padding:7px 11px;cursor:pointer; border-bottom:1px solid var(--rule)} .bg-pick:last-child{border-bottom:0} .bg-pick:hover{background:var(--surface)} .bg-pick.on{background:var(--accent-dim,var(--surface))} .bg-pick input{flex:none;margin:0} .bg-pick-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bg-pick-name small{display:block;font:10.5px var(--mono);color:var(--ink-3);margin-top:2px} #bg-assign-dlg{max-width:min(620px,94vw)} /* Export and import sit with the archive, because all three are the same idea: where a copy of this table can come from and go to. */ .ar-file{display:flex;align-items:flex-start;gap:12px;margin:14px 0 4px;padding:12px 14px; border:1px solid var(--rule);border-radius:6px;background:var(--surface-2);flex-wrap:wrap} .ar-file > div:first-child{flex:1;min-width:240px} .ar-file b{font-size:13px} .ar-file .hint{margin:4px 0 0} .ar-file .btn{flex:none;align-self:center} /* Export, import and restore all move the same table in or out, so they carry the same drawn arrow rather than three code points the font renders in three different faces. Only the direction changes. */ .ar-arrow{stroke-width:1.6} /* ---------- account assessment ---------- */ /* A report rather than a screen: it is read top to bottom and printed, so the sections are spaced like a document and nothing in it is a control. */ .as-head{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;padding:22px 24px} .as-title h1{margin:0;font-size:24px;letter-spacing:-.4px} .as-sub{margin:6px 0 0;font-size:15px;color:var(--ink-2)} .as-id{font:12px var(--mono);color:var(--ink-3);margin-left:6px} .as-meta{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 0 auto} .as-meta div{min-width:110px} .as-meta dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .as-meta dd{margin:3px 0 0;font-size:13px;font-weight:600} .as-sec{padding:20px 24px 24px} .as-sec h2{margin:0 0 10px;font-size:17px} .as-sec h3{margin:22px 0 8px;font-size:14px} .as-sec h4{margin:16px 0 6px;font-size:12.5px;color:var(--ink-2)} .as-desc{margin:0 0 14px;font-size:13px;line-height:1.65;color:var(--ink-2);max-width:78ch} .as-sum{margin:12px 0 0;font-size:13px;line-height:1.6} .as-note{margin:10px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.55;max-width:78ch} .as-headline{margin:0 0 12px;font-size:15px;font-weight:600;line-height:1.5} .as-findings{margin:0;padding-left:18px;font-size:13px;line-height:1.8} .as-findings b{margin-right:4px} /* A section that could not be measured says so where its findings would be. */ .as-gap{margin:10px 0 0;font-size:12.5px;color:var(--yellow);line-height:1.55} .as-tiles{margin:4px 0 6px} .as-up{color:var(--red)} .as-down{color:var(--green)} .as-rem{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)} .as-why{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.5;max-width:60ch} .as-rem pre.nrql{margin:8px 0 0} @media print { /* Controls are not part of a document somebody was sent. */ #view-assessment .form,#view-assessment .expander,#as-status,#as-when{display:none !important} #as-out .tablewrap{max-height:none !important;overflow:visible !important} #as-out .panel{border:0;box-shadow:none;break-inside:auto;padding-left:0;padding-right:0} .as-sec{break-before:auto} .as-sec h2{break-after:avoid} #as-out table.grid tbody td,#as-out table.grid thead th{font-size:8.5pt !important;padding:3px 5px !important} #as-out td.name,#as-out .as-why{white-space:normal !important;word-break:break-word !important} #as-out pre.nrql{max-height:none !important;white-space:pre-wrap !important;font-size:8pt} .as-head{break-after:avoid} } /* A section heading carries what acting on that section is worth, out at the right margin where the eye can run down them. */ .as-h2{display:flex;align-items:baseline;gap:16px;margin:0 0 10px} .as-h2 h2{margin:0;flex:none} .as-save{margin-left:auto;font-size:12.5px;color:var(--ink-2);white-space:nowrap} .as-save b{font:600 14px/1 var(--mono);color:var(--green);margin-left:4px} .as-sec .as-h2 + .as-desc{margin-top:0} /* The same, one level down, for a subsection with a currency of its own. */ .as-save-sub{float:right;font-size:11.5px;font-weight:400;color:var(--ink-2)} .as-save-sub b{font:600 12px/1 var(--mono);color:var(--green);margin-left:4px} @media print { .as-save b,.as-save-sub b{color:#111} } /* The account somebody clicked to get here, marked so it can be found among its neighbours in the plan. */ #bg-plan tbody tr.bg-focus{background:var(--accent-dim,var(--surface-2))} #bg-plan tbody tr.bg-focus td:first-child{box-shadow:inset 3px 0 0 var(--accent)} /* ---------- workstreams dashboard ---------- */ .wsd-body{padding:14px 18px} .wsd-sub{font:11px var(--sans);color:var(--ink-3);margin:0 0 10px} /* No align-items:start here: the two charts are a pair read together, and one box ending short of the other because its legend has a row fewer reads as a difference in the data rather than in the text. Grid stretches by default, so the card is a column whose body takes the slack. */ .wsd-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px} .wsd-card{margin:0;display:flex;flex-direction:column} .wsd-card .wsd-body{flex:1} .wsd-pie{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .wsd-pie svg{width:150px;height:150px;flex:0 0 auto} .wsd-pie path{stroke:none} .wsd-legend{list-style:none;margin:0;padding:0;flex:1 1 180px;min-width:180px} .wsd-legend li{display:flex;align-items:center;gap:8px;padding:3px 0;font:12px var(--sans);border-bottom:1px solid var(--rule)} .wsd-legend li:last-child{border-bottom:none} .wsd-legend i{width:10px;height:10px;border-radius:2px;flex:0 0 auto} .wsd-k{flex:1;color:var(--ink-2);text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wsd-v{font:12px var(--mono);color:var(--ink)} .wsd-p{font:11px var(--mono);color:var(--ink-3);width:38px;text-align:right} .wsd-note{font:11px var(--sans);color:var(--ink-3);margin:10px 0 0} .wsd-empty{font:12px var(--sans);color:var(--ink-3);padding:18px 0} .wsd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} /* The colour is the card, not a stripe along the top of it. The *-bg tokens are the app's own tints and are defined per theme, so a shaded card stays legible in both instead of needing a second set of rules. */ .wsd-tile{background:var(--grey-bg);border:1px solid var(--rule);border-radius:8px; padding:10px 12px;display:flex;flex-direction:column;gap:2px} .wsd-tile.pri-high{background:var(--red-bg)} .wsd-tile.pri-medium{background:var(--yellow-bg)} .wsd-tile.pri-low{background:var(--green-bg)} /* The two totals take the colour of the figure they carry, which the list page already sets: savings is what is being spent needlessly, value is what comes back from fixing it. */ .wsd-tile.wide.saved{background:var(--red-bg)} .wsd-tile.wide.value{background:var(--green-bg)} .wsd-tile-k{font:10.5px var(--sans);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em} .wsd-tile b{font:22px/1.1 var(--sans);font-weight:650;color:var(--ink)} .wsd-tile b.ok{color:var(--green)} .wsd-tile b.bad{color:var(--red)} .wsd-tile b .unit{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:2px} .wsd-tile-sub{font:11px var(--sans);color:var(--ink-3)} .wsd-part{font:11px var(--sans);color:var(--yellow)} @media print{ body[data-view="ws-dashboard"] .topbar, body[data-view="ws-dashboard"] .panel-head .themeset, body[data-view="ws-dashboard"] #wsd-dash-print{display:none} .wsd-charts{grid-template-columns:1fr 1fr} .wsd-card,.wsd-tile{break-inside:avoid} /* The shade is what tells the cards apart now that the stripe is gone, and a browser drops backgrounds when printing unless it is told not to. */ .wsd-tile{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* ---------- organizations ---------- */ /* The organization this tab works in, beside the snapshot line on every page. */ .org-pick{display:flex;align-items:center;gap:8px;flex:none} .org-pick-label{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em} .org-pick .org-select{min-width:200px;max-width:320px;font-weight:600; /* Slimmer than a form field: it sits in the top bar beside icons, not in a form. */ min-height:0;height:28px;padding:3px 10px;line-height:1.2} /* With several organizations and none chosen, this is the whole of the page. */ .org-required{max-width:460px;margin:48px auto;padding:24px 26px;background:var(--surface); border:1px solid var(--rule);border-radius:10px;text-align:center} .org-required h3{margin:0 0 6px;font-size:17px} .org-required .org-select{width:100%;margin-top:12px} .orgs-box{margin:0 18px 18px;padding:14px 16px;border:1px solid var(--rule);border-radius:8px;background:var(--surface)} .orgs-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .orgs-head h3{margin:0;font-size:15px} .orgs-scroll{max-height:292px;overflow:auto;margin-bottom:6px} #tbl-orgs tbody tr{cursor:pointer} #tbl-orgs tbody tr:hover{background:var(--surface-2)} #tbl-orgs tr.row-current td:first-child{font-weight:600} @media (max-width:720px){ .org-pick-label{display:none} .org-pick .org-select{min-width:0;max-width:160px} } /* ---------- module menu ---------- */ /* Fixed down the left under the top bar. Every view, and the banner, moves over by its width; the top bar keeps the full width above it. */ :root{--nav-w:258px;--nav-w-min:58px;--topbar-h:58px} body.has-sidenav.nav-collapsed{--nav-w:var(--nav-w-min)} .sidenav{ position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:20;width:var(--nav-w); display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--rule); transition:width .16s ease;overflow:hidden; } body.has-sidenav .view,body.has-sidenav .banner{margin-left:var(--nav-w);transition:margin-left .16s ease} body.has-sidenav .view{max-width:none;margin-right:0} .sn-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:4px 0 16px} .sn-group{padding:6px 0} .sn-group + .sn-group{border-top:1px solid var(--rule)} .sn-head{ display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;cursor:pointer;text-align:left; padding:8px 18px 4px;font:600 10.5px/1.2 var(--sans);text-transform:uppercase; letter-spacing:.06em;color:var(--ink-3);white-space:nowrap; } .sn-head:hover{color:var(--ink)} .sn-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .sn-fold{font-size:15px;line-height:1;transform:rotate(90deg);transition:transform .14s ease} .sn-group.closed .sn-fold{transform:rotate(0)} .sn-group.closed .sn-item{display:none} /* With the menu down to icons the headings are gone, so a folded group would hide its icons with nothing to reopen it. */ body.nav-collapsed .sn-group.closed .sn-item{display:flex} .sn-item,.sn-toggle{ display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:6px 18px; border:0;border-left:3px solid transparent;background:none;color:var(--ink-2); font:500 13.5px/1.25 var(--sans);text-align:left;cursor:pointer;white-space:nowrap; } .sn-item:hover,.sn-toggle:hover{background:var(--surface-2);color:var(--ink)} .sn-item:focus-visible,.sn-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .sn-item.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--ink);border-left-color:var(--accent);font-weight:600} .sn-item.locked{opacity:.5;cursor:not-allowed} .sn-ic{flex:none;width:20px;display:inline-flex;justify-content:center;align-items:center;font-size:16px;line-height:1;color:var(--ink-3)} .sn-ic svg{width:18px;height:18px} .sn-item.on .sn-ic{color:var(--accent)} .sn-label{overflow:hidden;text-overflow:ellipsis} .sn-toggle{border-bottom:1px solid var(--rule);min-height:42px;color:var(--ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .sn-chev{margin-left:auto;font-size:18px;transition:transform .16s ease} /* Collapsed: icons only, each named on hover; the group headings shrink to the rule between groups so the grouping still shows. */ body.nav-collapsed .sn-label,body.nav-collapsed .sn-head{display:none} body.nav-collapsed .sn-item,body.nav-collapsed .sn-toggle{padding:6px 0 6px 16px;gap:0} body.nav-collapsed .sn-chev{display:none} @media print{.sidenav{display:none !important} body.has-sidenav .view,body.has-sidenav .banner{margin-left:0}} @media (prefers-reduced-motion:reduce){.sidenav,body.has-sidenav .view,body.has-sidenav .banner{transition:none}} /* The X-RAMP cat and wordmark side by side, top left. Lightened so one image reads on both themes. */ .brand-logo{height:60px;width:auto;display:block;flex:none;margin:-4px 0} @media (max-width:720px){.brand-logo{height:40px;margin:-2px 0}} /* Admin, Help and Sign out as icons alone: round, and colored only on hover. */ .btn.ic-btn{width:34px;height:34px;padding:0;border-radius:50%;border-color:transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)} .btn.ic-btn:hover{color:var(--accent);background:var(--surface-2)} /* The logo starts at the window's left edge: the bar keeps its padding on the right only. */ .topbar{padding-left:0} /* Documentation sits at the foot of the menu, apart from the modules. */ .sn-docs{flex:none;border-top:1px solid var(--rule);min-height:44px;text-decoration:none} /* ---------- backup / restore ---------- */ .bk-notice{padding:14px 16px;color:var(--ink-2);font-size:13.5px} .bk-run{display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,2fr) auto;gap:22px;padding:16px;align-items:start} .bk-col h3{margin:0 0 8px;font-size:13.5px} .bk-kinds{display:grid;gap:6px;margin-bottom:8px} .bk-accounts .row{display:flex;gap:8px;align-items:center;margin-bottom:8px} .bk-accounts .filter{flex:1;min-width:0} .bk-acct-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px; max-height:190px;overflow:auto;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2)} .bk-go{display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:320px;padding-top:24px} .bk-go .verify{white-space:normal} #tbl-backup tbody tr{cursor:pointer} .bk-confirm-list{max-height:200px;overflow:auto;margin:8px 0 12px;padding:8px 10px;border:1px solid var(--rule); border-radius:6px;background:var(--surface-2);font-size:13px;display:grid;gap:3px} /* History: the versions down the left, what changed in the one chosen on the right. */ dialog.dlg.bk-history{width:min(1180px,96vw);max-width:none} .bk-h-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;min-height:320px} .bk-h-versions{display:flex;flex-direction:column;gap:4px;max-height:62vh;overflow:auto} .bk-ver{display:block;text-align:left;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface); color:var(--ink-2);font:inherit;cursor:pointer} .bk-ver b{display:block;color:var(--ink);font-size:13px} .bk-ver span{font:11.5px var(--mono);color:var(--ink-3)} .bk-ver:hover{background:var(--surface-2)} .bk-ver.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))} .bk-h-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px} .bk-h-bar .btn{padding:5px 10px;font-size:12.5px} .bk-h-bar .btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .bk-h-text{margin:0;max-height:58vh;overflow:auto;padding:10px 12px;border:1px solid var(--rule);border-radius:6px; background:var(--surface-2);font:12px/1.5 var(--mono);white-space:pre;tab-size:2} .bk-h-text span{display:block;min-height:1.5em} .bk-h-text .add{background:var(--green-bg);color:var(--green)} .bk-h-text .del{background:var(--red-bg);color:var(--red)} .bk-h-text .gap{color:var(--ink-3)} @media (max-width:900px){ .bk-run{grid-template-columns:minmax(0,1fr)} .bk-go{padding-top:0;max-width:none} .bk-h-grid{grid-template-columns:minmax(0,1fr)} .bk-h-versions{max-height:140px} } .bk-go .btn{align-self:stretch;text-align:center} #bk-set-dlg .row{display:flex;gap:14px} /* Restore: ticking what to restore, and the plan that has to be read before it runs. */ .bk-pick{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap} .bk-tick{width:34px;text-align:center} #tbl-backup.no-tick .bk-tick{display:none} .bk-r-asof{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;flex-wrap:wrap} .bk-r-asof input{width:auto} .bk-r-table{max-height:38vh;margin-bottom:10px} #tbl-restore tbody tr{cursor:default} #tbl-restore td{white-space:normal;height:auto;padding-top:6px;padding-bottom:6px;vertical-align:top} .bk-r-why{max-width:460px} #bk-r-changes .bk-h-text{max-height:28vh} /* An account New Relic keeps for itself in every organization: listed, greyed, and labeled. */ .sys-tag{display:inline-block;margin-left:6px;padding:3px 7px;border:1px solid var(--rule);border-radius:3px; font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);background:var(--surface-2);white-space:nowrap;vertical-align:middle} tr.sys-acct td{color:var(--ink-3)} tr.sys-acct td .dot{opacity:.4} label.sys-acct{color:var(--ink-3);cursor:not-allowed} option:disabled{color:var(--ink-3)} /* Migration Tools: a dashboard's tabs, listed under its name. The dashboard is what is ticked. */ .wz-pick label.has-tabs .wz-ent{align-items:flex-start} .wz-pick label.has-tabs .wz-ent-n{white-space:normal} .wz-ent-tabs{display:block;margin-top:1px;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- entity definitions ---------- */ .ed-steps{display:flex;gap:6px;margin:0 0 14px;overflow-x:auto} .ed-step{flex:1 1 0;min-width:118px;text-align:left;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface); color:var(--ink-3);font:inherit;cursor:pointer;border-top:3px solid var(--rule)} .ed-step b{display:block;font-size:12.5px;color:var(--ink-2)} .ed-step span{font-size:11px} .ed-step.done{border-top-color:var(--green)} .ed-step.on{border-top-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .ed-step.on b{color:var(--ink)} .ed-body{min-height:340px;max-height:60vh;overflow:auto;padding-right:4px} .ed-body fieldset{margin:0 0 12px} .ed-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px} .ed-body .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px} .ed-cond{display:grid;grid-template-columns:minmax(0,1.4fr) 130px minmax(0,1.4fr) auto;gap:8px;margin-bottom:6px;align-items:center} .ed-metric{display:grid;grid-template-columns:150px minmax(0,1fr) 190px auto auto;gap:6px 8px;align-items:center;padding:10px;margin-bottom:8px; border:1px solid var(--rule);border-radius:6px;background:var(--surface-2)} .ed-metric .m-select{grid-column:1 / span 2} .ed-metric .m-out{grid-column:1 / -1} .ed-warn{margin:6px 0;padding:8px 10px;border-radius:6px;background:var(--yellow-bg);color:var(--yellow);font-size:13px} .ed-pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px;max-height:280px;overflow:auto;margin-top:10px} .ed-pick{text-align:left;padding:6px 9px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);font:12.5px var(--mono);cursor:pointer; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ed-pick:hover{background:var(--surface-2);border-color:var(--accent)} .ed-chosen{padding:10px 12px;margin-bottom:10px;border:1px solid var(--green);border-radius:6px;background:var(--green-bg)} .ed-file-tabs .btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .ed-file-text{width:100%;height:270px;font:12px/1.5 var(--mono);padding:10px 12px;border:1px solid var(--rule);border-radius:6px; background:var(--surface-2);color:var(--ink);white-space:pre;tab-size:2;resize:vertical} .ed-verdict{margin:10px 0 6px;font-weight:600} .ed-verdict.ok{color:var(--green)} .ed-verdict.bad{color:var(--red)} .ed-problem{margin:4px 0;padding:6px 10px;border-radius:6px;font-size:13px} .ed-problem.error{background:var(--red-bg);color:var(--red)} .ed-problem.warn{background:var(--yellow-bg);color:var(--yellow)} .ed-problem b{font:600 11.5px var(--mono);margin-right:6px} .ed-public{padding:10px 12px;margin-bottom:12px;border:1px solid var(--yellow);border-radius:6px;background:var(--yellow-bg);color:var(--yellow);font-size:13.5px} .ed-path{margin:0;padding-left:22px;display:grid;gap:12px} .ed-path li{padding-left:4px;color:var(--ink-2)} .ed-path li b{color:var(--ink)} .ed-path li.done::marker{color:var(--green)} .ed-path li.done b::after{content:" \2713";color:var(--green)} .ed-path .btn{margin:6px 8px 0 0;display:inline-block;text-decoration:none} .ed-path .hint{display:block;margin-top:4px} .ed-check-run{display:inline-block;margin:2px 4px 2px 0;padding:3px 7px;border-radius:3px;border:1px solid var(--rule);font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--ink-2)} .ed-check-run.success{border-color:var(--green);color:var(--green)} .ed-check-run.failure,.ed-check-run.timed_out,.ed-check-run.cancelled{border-color:var(--red);color:var(--red)} #tbl-entitydefs tbody tr{cursor:pointer} @media (max-width:760px){ .ed-two{grid-template-columns:minmax(0,1fr)} .ed-metric,.ed-cond{grid-template-columns:minmax(0,1fr)} .ed-metric .m-select{grid-column:auto} } /* ---------- system messages: the banner, and its Admin section ---------- */ .sysmsgs{position:relative} body.has-sidenav .sysmsgs{margin-left:var(--nav-w);transition:margin-left .16s ease} .sysmsg{position:relative;padding:10px 46px 10px 20px;font-size:13.5px;line-height:1.45; background:var(--sysmsg-bg);color:var(--sysmsg-ink);border-bottom:1px solid var(--sysmsg-rule)} .sysmsg-text{white-space:pre-wrap;overflow-wrap:anywhere} .sysmsg-x{position:absolute;top:6px;right:10px;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:5px; background:none;color:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.7} .sysmsg-x:hover,.sysmsg-x:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)} :root{--sysmsg-bg:#fffbe6;--sysmsg-ink:#4d3d00;--sysmsg-rule:#f1e6b0} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sysmsg-bg:#fff9db;--sysmsg-ink:#3d3000;--sysmsg-rule:#eadf9f}} :root[data-theme="dark"]{--sysmsg-bg:#fff9db;--sysmsg-ink:#3d3000;--sysmsg-rule:#eadf9f} .sm-form{max-width:860px;margin:0 0 22px} .sm-form textarea{width:100%;resize:vertical;font:13px/1.55 var(--sans);padding:9px 11px;border:1px solid var(--rule); border-radius:6px;background:var(--surface);color:var(--ink)} .sm-form fieldset .check{display:inline-flex;margin-right:18px} #sm-users-wrap{margin-top:10px} #sm-users tbody tr{cursor:pointer} .sm-check{width:34px;text-align:center} .sm-hist-head{margin-top:6px} #sm-history .sm-msg{white-space:pre-wrap;overflow-wrap:anywhere;min-width:260px;max-width:560px} @media print{.sysmsgs{display:none !important}} /* ---------- account conventions, and account creation ---------- */ .acv-body,.ac-form{padding:14px 18px 6px} .acv-body h3,.ac-form h3{margin:18px 0 6px;font-size:14px} .acv-body h3:first-of-type{margin-top:4px} .ac-form h4,#ac-review h4{margin:16px 0 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)} .acv-node{display:grid;grid-template-columns:minmax(180px,260px) auto minmax(220px,1fr) auto;gap:14px;align-items:start; padding:10px 0;border-bottom:1px solid var(--rule)} .acv-node .field{margin:0;max-width:none} .acv-node .check{margin-top:24px;white-space:nowrap} .acv-node .n-del{margin-top:22px} .acv-node textarea{width:100%;font:13px/1.5 var(--sans);padding:7px 9px;border:1px solid var(--rule);border-radius:6px; background:var(--surface);color:var(--ink);resize:vertical} .acv-example{margin:12px 0 4px;font-size:13px;color:var(--ink-2)} .acv-part{font:600 12.5px var(--mono);color:var(--ink);background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;padding:1px 5px} .acv-part.opt{font-weight:400;color:var(--ink-2);border-style:dashed} #acv-groups td{vertical-align:top} #acv-groups input[type=text],#acv-groups select{width:100%;min-width:150px} .acv-roles summary{cursor:pointer;padding:5px 0;line-height:1.4} .acv-role-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 14px;padding:8px 0 4px} .ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px;max-width:980px} .ac-grid .field{max-width:none} .ac-grid .field input,.ac-grid .field select{width:100%} .ac-ingest{display:flex;gap:8px} .ac-ingest input{flex:1 1 auto;min-width:0} .ac-ingest select{flex:none;width:auto !important} .ac-name-box,.ac-groups-box{margin:2px 0 14px} .ac-name{font:600 17px/1.3 var(--mono);margin-top:3px;min-height:22px;overflow-wrap:anywhere} .ac-groups-box ul{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.6} /* Rows here run to two lines and sit at the top of the cell, so they need the room above that a one-line row gets from being centered. */ #ac-table tbody td{vertical-align:top;padding-top:8px;padding-bottom:8px;height:auto;line-height:1.45} #ac-table tbody tr{cursor:default} #ac-table .chip{display:inline-block;line-height:1.2} #ac-table .ac-note{display:inline-block;max-width:260px;white-space:normal} #ac-table .ac-acts{white-space:nowrap;text-align:right} .ac-plan th{width:150px;text-align:left;vertical-align:top;color:var(--ink-3);font-weight:500} .ac-plan td{line-height:1.5} .ac-problems{border:1px solid var(--red);background:var(--red-bg);color:var(--red);border-radius:6px;padding:10px 14px;margin-bottom:12px} .ac-problems ul{margin:6px 0 0;padding-left:18px} .ac-notes{margin:12px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-2)} .ac-warn{margin:14px 0 10px;font-size:13px} .ac-steps{list-style:none;margin:8px 0;padding:0;font-size:13px;line-height:1.7} .ac-steps .ac-mark{display:inline-block;width:18px;text-align:center;color:var(--ink-3)} .ac-steps li.ok .ac-mark{color:var(--green)} .ac-steps li.err .ac-mark{color:var(--red)} .ac-steps .verify{margin-left:22px} @media (max-width:820px){.acv-node{grid-template-columns:1fr}.acv-node .check,.acv-node .n-del{margin-top:0}} /* Hints that sit inside a line here, where elsewhere a hint is a line of its own. */ .ac-form .field>span .hint,.acv-node .field>span .hint,.ac-groups-box li .hint,.acv-roles .hint,#ac-table .hint.mono, .ac-plan .hint,.ac-steps .hint{display:inline;margin:0} .ac-form .field>span.ac-ingest{display:flex;font-weight:400;margin-bottom:0} .acv-roles summary{list-style-position:outside;margin-left:16px} .ac-name-box>.hint,.ac-groups-box>.hint{margin-top:0} #ac-filter{width:auto} /* ---------- environment as-built: a figure, and the same figure over six months ---------- */ .ab-stack{display:flex;flex-direction:column;gap:6px;min-width:0} .ab-stack .tile{flex:none} .tile.ab-trend{padding:9px 12px 8px;cursor:default} .tile.ab-trend svg{display:block;width:100%;height:34px;overflow:visible} .tile.ab-trend polyline{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} .tile.ab-trend circle{fill:var(--accent)} .tile.ab-trend span{display:block;margin-top:5px;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile.ab-trend span b{display:inline;font:600 11px var(--sans);color:var(--ink-2)} .ab-trend-none{height:34px;display:flex;align-items:center;font-size:11.5px;color:var(--ink-3)} /* ---------- metrics validator: overlap, usage and risk ---------- */ .mv-overlap{padding:4px 16px 12px} .mv-overlap h3{margin:12px 0 8px;font-size:14px} .mv-overlap h3 .hint{display:inline;font-weight:400;margin-left:8px} .mv-overlap td .hint{display:inline;margin:0} .mv-overlap .mv-idle{color:var(--green)} .mv-overlap .mv-readhint{color:var(--yellow)} .mv-overlap .mv-pick{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)} .mv-overlap .name .chip{margin-left:6px} .mv-overlap td.mv-ov-act{min-width:190px;max-width:420px;white-space:normal} .mv-overlap td.mv-ov-act .lv-rule{margin-top:6px} .mv-overlap td.mv-ov-act pre.nrql{max-height:220px;overflow:auto;font-size:11px} .mv-warn{color:var(--yellow)} #tbl-mv-medium td{vertical-align:top;padding-top:7px;padding-bottom:7px;height:auto} #tbl-mv-medium td.mv-who{white-space:normal;font-size:11.5px;line-height:1.55;color:var(--ink-2);min-width:320px} #tbl-mv-medium td.mv-who b{font-weight:600;color:var(--ink)} .mv-overlap td.name{white-space:normal;max-width:none;min-width:260px} /* ---------- the module menu on a page of its own ---------- */ /* Those pages have no .view to move over, so the whole body makes room and the top bar is pulled back across it. */ body.page-nav{padding-left:var(--nav-w);transition:padding-left .16s ease} body.page-nav .topbar{margin-left:calc(-1 * var(--nav-w))} /* The body has already moved over, so the view must not move over a second time. */ body.page-nav .view{margin-left:0} a.sn-item{text-decoration:none} @media print{body.page-nav{padding-left:0} body.page-nav .topbar{margin-left:0}} @media (prefers-reduced-motion:reduce){body.page-nav{transition:none}} /* ---------- log validator: overlap, usage and risk ---------- */ #lv-overlaps td{vertical-align:top;padding-top:7px;padding-bottom:7px;height:auto} #lv-overlaps td .hint{display:inline;margin:0} #lv-overlaps td.lv-routes{white-space:nowrap;line-height:1.6} #lv-overlaps .mv-idle{color:var(--green)} #tbl-lv-medium td{vertical-align:top;padding-top:7px;padding-bottom:7px;height:auto} #tbl-lv-medium td.mv-who{white-space:normal;font-size:11.5px;line-height:1.55;color:var(--ink-2);min-width:320px} #tbl-lv-medium td.mv-who b{font-weight:600;color:var(--ink)} #tbl-lv td .hint{display:inline;margin:0} /* ---------- data dictionary ---------- */ .dd-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px} .dd-bar select{width:auto} .dd-bar .filter{flex:1 1 260px;max-width:420px} .dd-wrap{max-height:none} #dd-events tbody td,.dd-event tbody td,#dd-out table.grid tbody td{vertical-align:top;height:auto;padding-top:7px;padding-bottom:7px;white-space:normal} #dd-out td.name{white-space:nowrap;font-size:12.5px} #dd-out td.dd-def,.dd-event-def{font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:720px} .dd-def p{margin:0 0 6px} .dd-def p:last-child{margin-bottom:0} .dd-def code{font:12px var(--mono);background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:0 3px} .dd-def ul,.dd-def ol{margin:4px 0 6px;padding-left:18px} .dd-event{margin:14px 16px} .dd-event-def{padding:10px 16px 2px;max-width:none} #dd-out td.dd-also{font-size:11.5px;color:var(--ink-3);max-width:300px;line-height:1.5} .dd-pad{padding:4px 16px 14px} /* ---------- agent source: which New Relic agent or product the data comes from ---------- */ .agent-src{display:inline-block;margin-left:6px;padding:3px 7px;border:1px solid var(--rule);border-radius:3px; font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);background:var(--surface-2);white-space:nowrap;vertical-align:1px} .agent-src.nr{color:var(--green);border-color:transparent;background:none;padding-left:0;padding-right:0} .agent-src.own{color:var(--ink-3)} td .agent-src:first-child{margin-left:0} .agent-line{margin-left:6px;white-space:nowrap} /* ---------- kanban boards ---------- */ .kb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px} .kb-tile{display:flex;flex-direction:column;gap:8px;text-align:left;padding:14px 16px;border:1px solid var(--rule);border-radius:8px; background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .12s,transform .12s} .kb-tile:hover,.kb-tile:focus-visible{border-color:var(--accent);transform:translateY(-1px);outline:none} .kb-tile-head{display:flex;align-items:center;gap:8px;justify-content:space-between} .kb-tile-head b{font-size:15px;overflow-wrap:anywhere} /* The visibility mark (Private, Public, Shared): its colors without the outline, and always on one line, however narrow the tile. */ .kb-tile-head .chip,#kb-vis{white-space:nowrap;flex:none;overflow-wrap:normal} #kb-vis{border-color:transparent} .kb-tile-desc{font-size:12.5px;color:var(--ink-2);line-height:1.45;min-height:18px} .kb-tile-counts{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:11.5px;color:var(--ink-3)} .kb-count b{font:600 12px var(--mono);color:var(--ink)} .kb-tile-foot{font-size:11px;color:var(--ink-3)} .kb-empty{padding:6px 2px} .kb-head-panel{margin-bottom:12px} .kb-filter{display:inline-flex;align-items:center;gap:6px} .kb-filter .hint{display:inline;margin:0} .kb-filter select{width:auto} .kb-cols{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;align-items:start;overflow-x:auto;padding-bottom:8px} .kb-col{background:var(--surface-2);border:1px solid var(--rule);border-top:3px solid var(--ink-3);border-radius:8px;min-height:160px; display:flex;flex-direction:column;transition:background .12s,border-color .12s} .kb-col.kb-s-in-progress{border-top-color:var(--accent)} .kb-col.kb-s-blocked{border-top-color:var(--red)} .kb-col.kb-s-completed{border-top-color:var(--green)} .kb-col.kb-s-cancelled{border-top-color:var(--grey,var(--ink-3))} .kb-col.drop{background:color-mix(in srgb,var(--accent) 9%,var(--surface-2));border-color:var(--accent)} .kb-col header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px} .kb-col h3{margin:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)} .kb-col-n{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:3px 7px} .kb-col-body{display:flex;flex-direction:column;gap:8px;padding:6px 10px 12px;flex:1 1 auto;min-height:90px} .kb-card{display:flex;flex-direction:column;gap:5px;padding:9px 11px;background:var(--surface);border:1px solid var(--rule); border-left:4px solid var(--ink-3);border-radius:6px;cursor:pointer;transition:box-shadow .12s,border-color .12s} .kb-card[draggable=true]{cursor:grab} .kb-card:hover,.kb-card:focus-visible{box-shadow:0 2px 8px rgba(0,0,0,.14);outline:none} .kb-card.kb-p-high{border-left-color:var(--red)} .kb-card.kb-p-medium{border-left-color:var(--yellow)} .kb-card.kb-p-low{border-left-color:var(--green)} .kb-card.dragging{opacity:.4} .kb-card.drop-before{box-shadow:0 -3px 0 0 var(--accent)} .kb-card-name{font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere} .kb-card-desc{font-size:12px;color:var(--ink-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .kb-card-links{display:flex;gap:6px;margin-top:2px} .kb-link{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--rule);background:var(--surface-2)} .kb-link svg{width:14px;height:14px} .kb-link:hover{border-color:currentColor} .kb-link-jira{color:#2684ff} .kb-link-newrelic{color:#1ce783} .kb-link-servicenow{color:#62d84e} :root[data-theme="light"] .kb-link-newrelic,:root:not([data-theme="dark"]) .kb-link-newrelic{color:#00a85a} :root[data-theme="light"] .kb-link-servicenow,:root:not([data-theme="dark"]) .kb-link-servicenow{color:#3a9d2c} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kb-link-newrelic{color:#1ce783}:root:not([data-theme="light"]) .kb-link-servicenow{color:#62d84e}} .kb-share{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px;max-height:220px;overflow:auto;padding:6px 2px 10px} .kb-share .hint{display:inline;margin:0} .kb-c-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px} .kb-c-grid.kb-c-links{grid-template-columns:repeat(3,minmax(0,1fr))} .kb-c-grid.kb-c-ref{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .kb-c-grid .field input,.kb-c-grid .field select,#kb-card-form .field input[type=text]{width:100%} #kb-card-form textarea,#kb-board-form textarea{width:100%;font:13px/1.5 var(--sans);padding:8px 10px;border:1px solid var(--rule);border-radius:6px; background:var(--surface);color:var(--ink);resize:vertical} #kb-card-form h4{margin:12px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)} .kb-note-new{display:flex;gap:10px;align-items:flex-start} .kb-note-new textarea{flex:1 1 auto} .kb-notes{list-style:none;margin:10px 0 0;padding:0;max-height:220px;overflow:auto} .kb-notes li{padding:8px 0;border-top:1px solid var(--rule);font-size:13px} .kb-note-head{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:3px} .kb-note-head b{color:var(--ink-2)} .kb-note-body{white-space:pre-wrap;overflow-wrap:anywhere} /* Long unbroken text, a link pasted into a description for one, wraps inside its tile, card or header instead of running past the edge. Grid and flex children default to a minimum width of their content, so each also has to be allowed to shrink. */ .kb-tile,.kb-card,.kb-col,.kb-col-body{min-width:0} .kb-tile,.kb-card,.kb-tile-desc,.kb-card-desc,#kb-desc,.kb-note-body{overflow-wrap:anywhere} .btn.danger{color:var(--red);border-color:var(--red)} @media (max-width:900px){.kb-cols{grid-template-columns:repeat(5,minmax(230px,1fr))}.kb-c-grid,.kb-c-grid.kb-c-links,.kb-c-grid.kb-c-ref{grid-template-columns:1fr 1fr}} @media print{.kb-card{break-inside:avoid}} /* ---------- drop rule effectiveness ---------- */ .dr-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 16px 0} .dr-ev{max-width:520px;white-space:normal;line-height:1.4} #tbl-dr td.name{max-width:300px;white-space:normal;word-break:break-word} #tbl-dr details{margin-top:4px} #tbl-dr details summary{cursor:pointer;display:inline-block;font-size:11.5px;color:var(--accent)} #tbl-dr details summary::before{content:"\25B8\00a0"} #tbl-dr details[open] summary::before{content:"\25BE\00a0"} #tbl-dr details summary:hover{text-decoration:underline} /* The verdict keeps its colors; only the outline goes. */ #tbl-dr .dr-measure{display:block;margin-top:6px;font-size:12px;line-height:1.45} #tbl-dr pre.nrql{white-space:pre-wrap;word-break:break-word;font:11px/1.45 var(--mono);max-height:180px;overflow:auto;margin:6px 0 0;padding:8px 10px;background:var(--surface-2);border:1px solid var(--rule);border-radius:6px} @media print { #view-droprules .form,#view-droprules .expander,#dr-status,.dr-filters button{display:none !important} #dr-out .tablewrap{max-height:none !important;overflow:visible !important} #dr-out table.grid tbody td,#dr-out table.grid thead th{font-size:8.5pt !important;padding:3px 5px !important} #tbl-dr details[open] pre.nrql,#tbl-dr details pre.nrql{max-height:none !important} } /* A one-line description under a picked item, such as what a drop rule does. */ .wz-ent-detail{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere} /* ---------- people picker: a filterable, multi-select list of people ---------- */ .pp-field{display:block} .pp-btn{display:flex;flex-wrap:wrap;gap:4px;align-items:center;width:100%;min-height:34px;padding:4px 8px;text-align:left;font:13px var(--sans); background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-radius:6px;cursor:pointer} .pp-btn:hover,.pp-btn:focus-visible{border-color:var(--accent);outline:none} .pp-btn::after{content:"\25BE";margin-left:auto;color:var(--ink-3);font-size:11px} .pp-chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--accent-bg,rgba(11,107,203,.12));color:var(--ink);font-size:12px;line-height:1.5} .pp-empty{color:var(--ink-3)} .pp-inline{min-height:0;padding:2px 6px;width:auto;max-width:260px;font-size:12.5px} .pp-pop{position:fixed;z-index:10000;display:flex;flex-direction:column;gap:8px;padding:10px;max-height:min(460px,calc(100vh - 16px)); background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.28)} .pp-head{display:flex;align-items:baseline;gap:8px;justify-content:space-between} .pp-count{margin:0} .pp-find,.pp-other{width:100%;font:13px var(--sans);padding:7px 9px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2);color:var(--ink)} .pp-list{overflow:auto;min-height:60px;max-height:260px;border:1px solid var(--rule);border-radius:6px} .pp-row{display:flex;align-items:center;gap:9px;padding:6px 10px;cursor:pointer} .pp-row:hover{background:var(--surface-2)} .pp-who{display:flex;flex-direction:column;min-width:0;line-height:1.3} .pp-who b{font-weight:600;font-size:13px;overflow-wrap:anywhere} .pp-who small{color:var(--ink-3);font-size:11.5px;overflow-wrap:anywhere} .pp-sep{padding:6px 10px 3px;font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);border-top:1px solid var(--rule)} .pp-none{padding:12px} .pp-add{display:flex;gap:6px} .pp-foot{display:flex;gap:6px;align-items:center} /* ---------- cache status: running now ---------- */ /* Five rows showing; a sixth scrolls. A header is 26px and a row 30px, so five rows is 176px. */ .tablewrap.cache-running{max-height:177px;overflow:auto} .tablewrap.cache-running thead th{position:sticky;top:0;background:var(--surface);z-index:1} .cache-prog{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--ink-2)} .cpbar{display:inline-block;vertical-align:middle;width:90px;height:8px;margin-right:6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--rule);overflow:hidden} .cpbar i{display:block;height:100%;background:var(--accent);transition:width .4s} /* ---------- remediations kept with a task ---------- */ .rmd-wrap{margin:14px 0 6px} .rmd{padding:10px 12px;margin:8px 0;border:1px solid var(--rule);border-radius:8px;background:var(--surface-2)} .rmd-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline} .rmd-title{font-size:13.5px} .rmd-risk{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid var(--yellow);background:var(--yellow-bg);color:var(--yellow);white-space:nowrap} .rmd-scope{margin:0} .rmd-save{margin-left:auto;font:12px var(--mono);color:var(--ink-2)} .rmd-why{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere} .rmd-nrql{position:relative;margin-top:8px} .rmd-nrql pre{margin:0;max-height:200px;overflow:auto;padding-right:70px} .rmd-nrql .rmd-copy{position:absolute;top:6px;right:6px} .rmd-targets{margin-top:8px} .rmd-targets summary{cursor:pointer;font-size:12.5px;color:var(--accent)} .rmd-targets ul{list-style:none;margin:6px 0 0;padding:0;max-height:220px;overflow:auto;font-size:12px} .rmd-targets li{padding:2px 0;overflow-wrap:anywhere} .rmd-targets .rmd-copy{margin:6px 0 0} @media print{.rmd-copy{display:none !important}} /* ---------- the two columns of cards above a table of tasks ---------- */ .tcards{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:stretch} .tcards-col{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px} .tcards .tile{margin:0} .tcards .tile small{display:block;margin-top:3px;font-size:11px;color:var(--ink-3);font-weight:400} .tcards-bar{margin-top:10px} @media (max-width:820px){.tcards{grid-template-columns:minmax(0,1fr)}} /* ---------- ingest charts ---------- The categorical palette, in its fixed order and never cycled, validated in both modes; seven slots, and the rest of the accounts fold into the one grey. Dark is its own selection of the same hues, not a flip. */ .ic{--ic-c1:#2a78d6;--ic-c2:#eb6834;--ic-c3:#1baf7a;--ic-c4:#eda100;--ic-c5:#e87ba4;--ic-c6:#008300;--ic-c7:#4a3aa7;--ic-other:#a4a9b2} :root[data-theme="dark"] .ic{--ic-c1:#3987e5;--ic-c2:#d95926;--ic-c3:#199e70;--ic-c4:#c98500;--ic-c5:#d55181;--ic-c6:#008300;--ic-c7:#9085e9;--ic-other:#5b626c} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ic{--ic-c1:#3987e5;--ic-c2:#d95926;--ic-c3:#199e70;--ic-c4:#c98500;--ic-c5:#d55181;--ic-c6:#008300;--ic-c7:#9085e9;--ic-other:#5b626c} } #view-monitor.charts-on > :not(#ing-dash){display:none !important} #btn-charts[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} #ic-body{position:relative} .ic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:14px;padding:14px} .ic-card{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:14px 16px;min-width:0} .ic-card h3{margin:0 0 2px;font-size:14px} .ic-note{margin:0 0 10px;color:var(--ink-3);font-size:12px} .ic-pick{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);margin-bottom:10px} .ic-pick select{width:auto} .ic-pie{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .ic-svg{display:block;width:100%;max-width:290px;height:auto} .ic-slice{stroke:var(--surface);stroke-width:2;cursor:pointer;transform-origin:130px 130px;transition:transform .12s} .ic-slice.hot{transform:scale(1.035)} .ic-slice:focus-visible{outline:none;stroke:var(--ink);stroke-width:2.5} .ic-legend{list-style:none;margin:0;padding:0;flex:1 1 230px;min-width:220px} .ic-legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:5px 6px;border-radius:6px;font-size:12.5px} .ic-legend li.hot{background:var(--surface-2)} .ic-key{width:10px;height:10px;border-radius:2px;display:inline-block} .ic-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .ic-legend b{font:600 12.5px var(--mono);color:var(--ink)} .ic-sub{color:var(--ink-3);font-size:11.5px} .lv-pies{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px} .lv-pie{margin:0} .lv-svg{max-width:180px} .lv-slice{stroke:var(--surface);stroke-width:2} .lv-pie .ic-legend{flex:1 1 260px} .lv-pie .ic-legend li{grid-template-columns:12px minmax(0,1fr) 48px 120px} .lv-pie .ic-legend b,.lv-pie .ic-legend .ic-sub{text-align:right;white-space:nowrap} .ic-bars{display:flex;flex-direction:column;gap:2px} .ic-row{display:grid;grid-template-columns:minmax(110px,230px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:4px 6px;border-radius:6px} .ic-row.hot{background:var(--surface-2)} .ic-row:focus{outline:none} .ic-row:focus-visible{box-shadow:0 0 0 2px var(--accent)} .ic-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink-2)} .ic-track{display:block;height:16px} .ic-bar{display:block;height:16px;border-radius:0 4px 4px 0} /* square at the baseline, rounded 4px at the data end */ .ic-row.hot .ic-bar{filter:brightness(1.12)} .ic-val{font:600 12.5px var(--mono);color:var(--ink);white-space:nowrap} .ic-colornote{margin:8px 0 0} .ic-flag{margin:0 0 8px;font-size:12px;color:var(--yellow)} .ic-empty{margin:6px 0;color:var(--ink-3);font-size:13px} .ic-table{margin-top:12px} .ic-table summary{cursor:pointer;font-size:12.5px;color:var(--ink-2)} .ic-table .tablewrap{max-height:320px;overflow:auto;margin-top:8px} .ic-tip{position:absolute;z-index:6;display:flex;flex-direction:column;gap:2px;max-width:300px;padding:8px 11px;pointer-events:none; background:var(--surface);border:1px solid var(--rule);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.22)} .ic-tip b{font:650 14px var(--mono);color:var(--ink)} .ic-tip b::before{content:"";display:inline-block;width:10px;height:2px;margin-right:7px;vertical-align:middle;background:var(--ic-tip-key,var(--ic-c1))} .ic-t-name{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere} .ic-t-detail{font-size:12px;color:var(--ink-3)} @media print{ #btn-charts{display:none !important} } /* CCU Analysis: the charts share the Ingest charts' look (.ic); these are the parts only it uses. */ .ic-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:14px 14px 0} .ic-kpis .tile{background:var(--surface-2);border-radius:8px} .ic-kpis .tile em{font-style:normal;font:600 11.5px var(--mono);margin-left:6px} .ic-kpis em.up,.ic-trend.up{color:var(--red)} .ic-kpis em.down,.ic-trend.down{color:var(--green)} .ic-trend{font:600 12.5px var(--mono);white-space:nowrap;text-align:right} .ic-trend.flat,.ic-trend.new{color:var(--ink-3)} .ic-row.v2{grid-template-columns:minmax(110px,230px) minmax(0,1fr) auto 112px} .ic-row[data-go]:not([data-go=""]){cursor:pointer} .ic-never{font-size:11px;color:var(--yellow);text-align:right} #ccu-body{position:relative} .ccu-pick{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)} .ccu-pick select{width:auto} .ccu-acc{position:relative} .ccu-acc-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:8;width:340px;max-width:90vw;background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:10px} .ccu-acc-pop input[type=search]{width:100%;box-sizing:border-box} .ccu-acc-tools{display:flex;align-items:center;gap:8px;margin:8px 0 6px} .ccu-acc-tools .hint{margin-left:auto} .ccu-acc-list{max-height:320px;overflow:auto;border-top:1px solid var(--rule);padding-top:4px} .ccu-acc-list label{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 4px;border-radius:6px;font-size:12.5px;cursor:pointer} .ccu-acc-list label:hover{background:var(--surface-2)} .ccu-acc-list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ccu-acc-list .cc{font:12px var(--mono);color:var(--ink-3)} .ccu-empty{padding:28px 20px;text-align:center;color:var(--ink-2);font-size:14px} .ccu-empty .btn{margin-top:12px} /* A column for flags, so the tags in it line up down the table. */ td.flagcol,th.flagcol{width:140px;min-width:140px;white-space:nowrap} /* Boards minimized: just the name and who can see it. */ .kb-tiles.mini{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .kb-tiles.mini .kb-tile{padding:9px 12px;gap:0} .kb-tiles.mini .kb-tile-desc,.kb-tiles.mini .kb-tile-counts,.kb-tiles.mini .kb-tile-foot{display:none} .bg-monitor{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px} #bg-edit input:disabled{opacity:.5} /* Plan cards minimized: name and state only, card colors kept. */ .bg-state{display:none;font-size:11px;color:var(--ink-3);white-space:nowrap} .bg-grid.mini{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .bg-grid.mini .bg-card{gap:0;padding-top:9px} .bg-grid.mini .bg-card-top{padding-bottom:9px;min-height:0} .bg-grid.mini .bg-state{display:inline} .bg-grid.mini .bg-card-mid,.bg-grid.mini .bg-card-th,.bg-grid.mini .bg-card-foot,.bg-grid.mini .bg-admin{display:none} .bg-grid.mini .bg-card:has(.bg-admin) .bg-card-top{padding-right:0} /* Sankey under the stat cards on the Ingest Analysis drill-in */ .sankey svg{display:block;padding:6px 12px 0} .sk-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:6px 14px 12px;font-size:12px} .sk-key{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)} .sk-key i{display:inline-block;width:10px;height:10px;border-radius:2px;opacity:.6} .sankey .sk-view{display:none} .sankey[data-view="flow"] .sk-view[data-view="flow"],.sankey[data-view="apps"] .sk-view[data-view="apps"],.sankey[data-view="topo"] .sk-view[data-view="topo"]{display:block} .sankey .sk-sub{display:none} .sankey[data-view="flow"] .sk-sub[data-for="flow"],.sankey[data-view="apps"] .sk-sub[data-for="apps"],.sankey[data-view="topo"] .sk-sub[data-for="topo"]{display:inline} .sk-tabs{margin-right:10px} .sk-go{cursor:pointer} .sk-go:hover rect{opacity:.75} .sk-go:hover path{opacity:.7 !important} .sk-go:hover text{text-decoration:underline} .sk-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Before and after diagrams of a measured Log Partition plan */ .plan-sk{margin:14px 0 4px;display:flex;flex-direction:column;gap:12px} .plan-sk svg{display:block} /* ---------------- status dashboard (the home page) ---------------- */ .dash{--dash-c1:#2a78d6;--dash-c2:#eb6834;--dash-c3:#1baf7a;--dash-c4:#eda100;--dash-c5:#e87ba4;--dash-c6:#008300;--dash-c7:#4a3aa7;--dash-c8:#00a3b4;--dash-c9:#b05fd6;--dash-c10:#7a8a2a;--dash-other:#a4a9b2; display:flex;flex-direction:column;gap:18px;max-width:1180px;margin:0 auto;padding:0 16px 24px} :root[data-theme="dark"] .dash{--dash-c1:#3987e5;--dash-c2:#d95926;--dash-c3:#199e70;--dash-c4:#c98500;--dash-c5:#d55181;--dash-c6:#008300;--dash-c7:#9085e9;--dash-c8:#20b5c6;--dash-c9:#c47be6;--dash-c10:#a3b441;--dash-other:#5b626c} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dash{--dash-c1:#3987e5;--dash-c2:#d95926;--dash-c3:#199e70;--dash-c4:#c98500;--dash-c5:#d55181;--dash-c6:#008300;--dash-c7:#9085e9;--dash-c8:#20b5c6;--dash-c9:#c47be6;--dash-c10:#a3b441;--dash-other:#5b626c}} .dash-sec{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px 16px} .dash-sec h2{margin:0;font-size:16px} .dash-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px} .dash-sub{color:var(--ink-3);font-size:12px} .dash-empty{color:var(--ink-3);margin:8px 0} .dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px} .dash-card{border:1px solid var(--rule);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;background:var(--surface-2)} .dash-card[data-go]{cursor:pointer;transition:box-shadow .12s,border-color .12s} .dash-card[data-go]:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .dash-card[data-go]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .dash-slice.go,.dash-legend li.go{cursor:pointer} .dash-slice.go:hover{opacity:.82;stroke:var(--ink);stroke-width:1.5} .dash-slice.go:focus-visible{outline:none;stroke:var(--accent);stroke-width:2.5} .dash-legend li.go:hover .dash-nm{text-decoration:underline} .dash-legend li.go:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px} .dash-card small{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .dash-card b{font:600 24px/1.15 var(--mono);color:var(--ink)} .dash-card span{font-size:12px;color:var(--ink-2)} .dash-card em{font-style:normal;color:var(--ink-3)} .dash-card.blue{background:color-mix(in srgb, var(--dash-c1) 14%, var(--surface))} .dash-card.teal{background:color-mix(in srgb, var(--dash-c8) 14%, var(--surface))} .dash-card.green{background:var(--green-bg)} .dash-card.green b{color:var(--green)} .dash-card.yellow{background:var(--yellow-bg)} .dash-card.yellow b{color:var(--yellow)} .dash-card.red{background:var(--red-bg)} .dash-card.red b{color:var(--red)} .dash-app dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0 0;font-size:12px} .dash-app dt{color:var(--ink-3)} .dash-app dd{margin:0;text-align:right;font-family:var(--mono)} .dash-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-top:14px} .dash-panel{border:1px solid var(--rule);border-radius:8px;padding:10px 12px;min-width:0} .dash-panel h3,.dash-boardhead h3{margin:0 0 6px;font-size:13px;color:var(--ink-2)} .dash-svg{display:block;width:100%;height:auto} .dash-bar{fill:var(--dash-c1)} .dash-bar.part{fill:var(--dash-c1);opacity:.45} .dash-val{font:600 11px var(--mono);fill:var(--ink)} .dash-lab{font:11px var(--mono);fill:var(--ink-3)} .dash-budget{stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4} .dash-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .dash-pie-svg{max-width:230px;flex:0 0 auto} .dash-slice{stroke:var(--surface);stroke-width:2} .dash-legend{list-style:none;margin:0;padding:0;flex:1 1 220px;min-width:200px} .dash-legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:3px 4px;font-size:12px} .dash-key{width:10px;height:10px;border-radius:2px;display:inline-block} .dash-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dash-legend b{font:600 12px var(--mono);min-width:46px;text-align:right} .dash-legend .dash-sub{min-width:62px;text-align:right} .dash-boardhead{display:flex;align-items:center;gap:10px;margin:6px 0 8px} .dash-pill{font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid transparent;white-space:nowrap} .dash-pill.green{background:var(--green-bg);color:var(--green);border-color:var(--green)} .dash-pill.yellow{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)} .dash-pill.red{background:var(--red-bg);color:var(--red);border-color:var(--red)} .dash-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:14px} .dash-job{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;background:var(--surface-2)} .dash-job b{font-size:13px} .dash-job small{font-size:11px;color:var(--ink-3)} .dash-state{font-size:12px;font-weight:600} .dash-job.green{background:var(--green-bg)} .dash-job.green .dash-state{color:var(--green)} .dash-job.yellow{background:var(--yellow-bg)} .dash-job.yellow .dash-state{color:var(--yellow)} .dash-job.red{background:var(--red-bg)} .dash-job.red .dash-state{color:var(--red)} .dash-job.running{background:color-mix(in srgb, var(--dash-c1) 14%, var(--surface))} .dash-job.running .dash-state{color:var(--dash-c1)} .dash-trend{font-weight:600} .dash-trend i{font-style:normal;font-size:15px;margin-right:2px} .dash-trend.up{color:var(--red)} .dash-trend.down{color:var(--green)} .dash-trend.flat{color:var(--ink-3)} /* ---------- drop rules: one way to show them everywhere ---------- A row of text with the Drop rule button last, at the right; the NRQL opens underneath. Beside another action, such as Create task, the two sit together at the right of their cell. */ .dr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 16px 0;padding:8px 0 0} .dr-row .dr-sum{flex:1 1 auto;font-size:13px;color:var(--ink-2);min-width:0} .dr-row .btn,.dr-actions .btn{flex:none} .dr-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap} .dr-toggle[aria-expanded="true"]{background:var(--surface-2);border-color:var(--accent);color:var(--ink)} .dr-view{margin:6px 16px 4px;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2)} .dr-view[hidden]{display:none} .dr-view pre.nrql{margin:0 0 6px;max-height:260px;overflow:auto} .dr-view .dr-copy{margin-bottom:6px} .dr-view pre.nrql + .dr-copy + pre.nrql{margin-top:8px} td .dr-view{margin:6px 0 0} .drop-rule .dr-view{margin:6px 0 0;background:var(--surface)} .dr-ev .dr-actions,.mv-ov-act .dr-actions{margin-top:4px} .mv-overlap td.mv-ov-act{min-width:270px} .mv-ov-act .dr-actions{flex-wrap:nowrap} /* ---------- the CCU lists on the home page ---------- */ .dash-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;margin-top:12px} .dash-list{border:1px solid var(--rule);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;min-width:0} .dl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:9px 12px 6px} .dl-head h3{margin:0;font-size:13px} .dl-head .dash-sub{flex:1 1 auto;min-width:0} .dl-head .btn{margin-left:auto;flex:none} .dl-body{overflow:auto;resize:vertical;min-height:120px;max-height:80vh;padding:0 6px 6px;border-top:1px solid var(--rule)} .dl-row{display:grid;grid-template-columns:22px minmax(0,1fr) 70px 46px;gap:8px;align-items:center;height:27px;padding:0 6px;border-radius:4px;cursor:pointer;font-size:12px} .dl-row:hover{background:var(--surface-2)} .dl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .dl-rk{color:var(--ink-3);text-align:right;font:11px var(--mono)} .dl-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dl-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden} .dl-bar i{display:block;height:100%;background:var(--dash-c1,var(--accent));border-radius:4px} .dl-v{text-align:right;font:11.5px var(--mono);color:var(--ink-2)} .dash-list[data-list="condition"] .dl-bar i{background:var(--dash-c2,var(--accent))} .dash-list[data-list="user"] .dl-bar i{background:var(--dash-c4,var(--accent))} .dash-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:59} .dash-list.max{position:fixed;inset:5vh 6vw;z-index:60;box-shadow:0 20px 60px rgba(0,0,0,.4)} .dash-list.max .dl-body{flex:1 1 auto;height:auto !important;max-height:none;resize:none} .dash-list.max .dl-row{height:30px;font-size:13px} .dash-list.max .dl-row{grid-template-columns:28px minmax(0,1fr) 200px 60px} @media print{.dash-lists{display:none}} /* The CCU Analysis ranked lists: twenty rows in view, the rest by scrolling. A row is 30px with a 2px gap. */ .ic-scroll.long{max-height:calc(20 * 32px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px} .ic-scroll .ic-row.v2{min-height:30px} /* A CCU Analysis list made the whole screen. */ .ic-chead{display:flex;align-items:center;gap:10px} .ic-chead h3{margin:0;flex:1 1 auto} .ic-chead .btn{flex:none} .ic-card.max{position:fixed;inset:5vh 6vw;z-index:60;overflow:auto;background:var(--surface);box-shadow:0 20px 60px rgba(0,0,0,.4);margin:0} .ic-card.max .ic-scroll.long{max-height:none;overflow:visible} body:has(.ic-card.max) .ic-tip{z-index:70} @media print{.ic-max{display:none}} /* The Log Validator's partition charts: a slice or its key entry opens Log Partition Analysis on that partition. */ .lv-go{cursor:pointer} path.lv-go:hover{opacity:.8;stroke:var(--ink);stroke-width:1.5} path.lv-go:focus-visible{outline:none;stroke:var(--accent);stroke-width:2.5} li.lv-go:hover .ic-name{text-decoration:underline} li.lv-go:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}