, but display:flex would collapse the cells and squash
every .skel-block to the left edge — producing the "stack of small squares
in the first column" the Cost Explorer drill-down was showing while the
data loaded. Override the table case so cells keep their natural column
widths and the .skel-block inside each
renders at its declared width. */
.skel-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-sub); }
.skel-row:last-child { border-bottom: none; }
tr.skel-row {
display: table-row;
gap: 0; padding: 0;
border-bottom: 1px solid var(--border-sub);
}
tr.skel-row > td { padding: 10px 12px; }
.skel-block { height: 14px; border-radius: 3px; }
@keyframes skelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Wrapper that any shimmer can apply to its outermost element so the
skeleton stretches the full visible host instead of collapsing to its
content height. Mirrors the .al-detail-empty fix (full-height fill via
min-height:100% + flex:1 1 auto) but stays top-aligned because skeleton
rows are ordered, not centred. Opt-in: helpers that want a content-sized
shimmer (modal bodies, inline KPI placeholders) just don't apply it. */
.skel-host { display: flex; flex-direction: column; min-height: 100%; flex: 1 1 auto; }
/* Fade-in for values replacing skeletons */
.fade-in { animation: fadeIn 200ms ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
/* …but NOT on list rows: FinOps/Anomalies render 1000+ rows at once and a
per-row fade animation is a jank spike on load/filter (and pointless for
off-screen rows). Rows appear instantly. */
.al-row.fade-in { animation: none; }
/* The Access Control page wraps its master/detail body in #acBody so the
filter bar can stay above both the Workspace-overview and Principal-lookup
views. Without this, the .al-layout inside #acBody grows to its content
height instead of filling the viewport, so the principal list never
triggers its own scrollbar. Make #acBody a flex column when it contains
an .al-layout so the layout chain (page -> acBody -> al-layout) all
pass through flex:1, min-height:0. */
#acBody:has(.al-layout) {
display: flex; flex-direction: column;
flex: 1; min-height: 0;
}
/* The KPI strip in #acBody is a sibling above the al-layout. Pin its
intrinsic height so it doesn't compete with .al-layout's flex:1. */
#acBody:has(.al-layout) > .stat-grid { flex: 0 0 auto; }
/* Workspace-detail tab strip on the Access Control page. Pill buttons that
switch the principal table (Admins / Users / Groups / Service Principals)
without rebuilding the rest of the detail pane. Active state echoes the
.al-row-active treatment used in the list panel for visual consistency. */
.ac-tabs {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 8px;
}
.ac-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
background: var(--card); color: var(--muted);
border: 1px solid var(--border);
font-size: 12px; font-weight: 600; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.ac-tab:hover { color: var(--text); border-color: var(--muted); }
.ac-tab-active {
background: var(--primary-lt); color: var(--primary);
border-color: var(--primary-sub);
}
body.dark .ac-tab-active { background: rgba(87,157,255,.10); }
.ac-tab-count {
font-size: 11px; font-weight: 700; opacity: .8;
padding: 0 6px; border-radius: 999px;
background: var(--bg);
}
.ac-tab-active .ac-tab-count {
background: var(--card); color: var(--primary);
}
/* Keeps the search input + chip strip glued together as one nowrap flex
group inside .al-filter-bar (which has flex-wrap:wrap for responsive
stacking). Without this group the chip strip would wrap to its own row
below the search on medium viewports because each item is a direct
.al-filter-bar child. The whole group still wraps as a unit on truly
narrow screens, so mobile responsiveness is preserved. */
.ac-search-group {
display: inline-flex; align-items: center; gap: 8px;
flex-wrap: nowrap; min-width: 0;
}
/* Force every direct child of the search group to align to the centre
line of the row (the search input is 32px tall, the chip strip is
shorter). Without this, .ac-tabs (display:flex;flex-wrap:wrap) gets
align-self:stretch from its parent and floats away from the centre. */
.ac-search-group > * { align-self: center; }
/* Inside the filter-bar group .ac-tabs is a peer of the search input, not a
stack of two rows - so we strip the 8px margin-bottom that .ac-tabs
carries for its other (vertical-stack) usage and force inline-flex with
centred items so the strip's centreline matches the input's. */
.ac-search-group .ac-tabs,
.ac-search-group .ac-tabs-compact {
display: inline-flex; align-items: center;
margin: 0;
}
/* ── Catalog & Schema block + lineage tree (Access Control, principal view) ──
The "Catalog & Schema" KPI tile is a clickable stat-card: it toggles a
collapsible Unity Catalog access tree below the KPI strip. Visually it's an
ordinary .stat-card so it lines up in the grid, but it carries a pointer
cursor + a chevron that flips when the tree is open. */
.ac-cat-kpi { cursor: pointer; transition: border-color .12s, transform .06s; }
.ac-cat-kpi:hover { border-color: var(--purple); }
.ac-cat-kpi:active { transform: translateY(1px); }
.ac-cat-kpi:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ac-cat-kpi .stat-label { display: inline-flex; align-items: center; gap: 5px; }
.ac-cat-kpi .ac-cat-chev { transition: transform .15s; opacity: .7; }
.ac-cat-kpi-open .ac-cat-chev { transform: rotate(180deg); }
/* The tree itself — one collapsible node per catalog. Each node header is a
single clickable row (chevron + catalog icon + name + meta + inline
privilege lozenges); expanding reveals a schema table. */
.ac-cat-tree {
border: 1px solid var(--border); border-radius: var(--r-md);
overflow: hidden; background: var(--card);
}
.ac-cat-node + .ac-cat-node { border-top: 1px solid var(--border-sub); }
.ac-cat-head {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; cursor: pointer;
transition: background .12s;
}
.ac-cat-head:hover { background: var(--bg); }
/* Workspace-level node (top of the tree). Slightly heavier header so the
workspace > catalog > schema hierarchy reads clearly. The catalog children
are nested + indented under it. */
.ac-cat-head-ws .ac-cat-name { font-size: 13px; }
.ac-cat-node-ws > .ac-cat-head-ws { background: var(--bg); }
.ac-cat-node-ws > .ac-cat-head-ws:hover { background: var(--border-sub); }
.ac-cat-ws-children {
border-top: 1px solid var(--border-sub);
/* Indent the catalog rows so they sit visually under the workspace. */
padding-left: 14px;
}
/* Catalog rows nested inside a workspace lose their card border (the parent
.ac-cat-tree already provides the outer frame); a left rule conveys nesting. */
.ac-cat-ws-children .ac-cat-node {
border-left: 2px solid var(--border);
}
.ac-cat-ws-children .ac-cat-node:first-child { border-top: none; }
.ac-cat-head-catalog { padding-left: 10px; }
.ac-cat-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ac-cat-head .ac-cat-chev {
flex-shrink: 0; opacity: .6; transition: transform .15s;
}
.ac-cat-node-open > .ac-cat-head .ac-cat-chev { transform: rotate(90deg); }
.ac-cat-name {
font-weight: 600; font-size: 13px; color: var(--text);
font-family: Consolas, ui-monospace, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-cat-meta {
font-size: 11px; color: var(--muted); flex-shrink: 0;
margin-left: 2px;
}
/* Privilege lozenges sit on the right of the catalog row and wrap onto
their own line gracefully on narrow panes. */
.ac-cat-privs {
margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px;
justify-content: flex-end; min-width: 0;
}
.ac-cat-schemas {
border-top: 1px solid var(--border-sub);
background: var(--bg);
padding: 4px 0;
}
.ac-cat-schemas .data-table { background: transparent; }
.ac-cat-schemas .data-table td { vertical-align: top; }
/* Privilege lozenge sizing. Inherited grants carry a small "↑ catalog"
provenance tag so the lineage is visible at a glance without a tooltip. */
.ac-priv { font-size: 10.5px; font-weight: 600; }
.ac-priv-src { opacity: .7; font-weight: 500; margin-left: 2px; }
.ac-priv-inherited { font-weight: 500; }
/* Stack search + chips on a new line on truly narrow viewports so the
filter bar doesn't horizontally overflow on phones. The whole group
still stays together, just vertically. */
@media (max-width: 640px) {
.ac-search-group { flex-wrap: wrap; }
.ac-search-group > input.al-filter-search { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; }
}
/* Tighter variant used in the principal-lookup search header so all four
chips fit on a single row at the 320px-wide list-panel width. We use
nowrap to force a single line - if a future label gets long enough to
not fit, we'd rather see horizontal overflow than a 2-row strip that
pushes the suggestion list down. */
.ac-tabs-compact { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ac-tabs-compact::-webkit-scrollbar { display: none; }
.ac-tabs-compact .ac-tab {
padding: 4px 10px; font-size: 11px;
white-space: nowrap; flex-shrink: 0;
}
.ac-tabs-compact .ac-tab-count { font-size: 10px; padding: 0 5px; }
/* Page-level cross-fade applied by sidebar.js swapPage().
Leave: ~120ms (kept short so the user doesn't see a blank pause).
Enter: ~220ms fade + 4px lift so the new page feels like it "rose" in.
Keeps each page visually distinct between clicks without obstructing
data that's still loading below the shell. */
.page.page-leave {
opacity: 0;
transition: opacity 120ms ease-in;
}
.page.page-enter {
animation: pageEnter 220ms ease-out;
}
@keyframes pageEnter {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Info panel ── */
.info-panel {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--shadow);
padding: 16px 18px; margin-bottom: 16px;
}
.info-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.info-name { font-size: 18px; font-weight: 700; color: var(--text); }
.info-fqdn {
font-size: 11px; color: var(--primary);
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
margin-top: 2px; word-break: break-all;
}
/* Jira lozenge */
.lozenge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px; border-radius: 2em;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; white-space: nowrap; flex-shrink: 0;
}
.lozenge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lz-success { background: var(--success-lt); color: var(--success); }
.lz-success .lozenge-dot { background: var(--success-med); }
.lz-info { background: var(--info-lt); color: var(--info); }
.lz-info .lozenge-dot { background: var(--primary); }
.lz-error { background: var(--error-lt); color: var(--error); }
.lz-error .lozenge-dot { background: var(--error-med); }
.lz-warning { background: var(--warning-lt); color: var(--warning); }
.lz-warning .lozenge-dot { background: var(--warning-med); }
.lz-default { background: #DFE1E6; color: var(--muted); }
.lz-default .lozenge-dot { background: var(--subtle); }
.info-grid {
display: grid; gap: 10px 14px;
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
.info-label {
font-size: 10px; font-weight: 700; color: var(--subtle);
text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
}
.info-value { font-size: 12px; font-weight: 500; color: var(--text); word-break: break-all; }
/* ── Data table ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
text-align: left; padding: 11px 16px;
font-size: 11px; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: .06em;
background: var(--bg); border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table td {
padding: 12px 16px; border-bottom: 1px solid var(--border-sub);
color: var(--text); vertical-align: middle;
font-size: 13px; line-height: 1.4;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover td { background: var(--bg); }
body.dark .data-table tbody tr:hover td { background: rgba(255,255,255,.025); }
/* Perf: the cost drill-down table can list thousands of resources. Skip the
per-row fade animation (a jank spike when all rows mount at once). */
.data-table tbody tr.fade-in { animation: none; }
/* Actions column: right-aligned, tight spacing, no wrap */
.data-table td:last-child,
.data-table th:last-child { white-space: nowrap; }
/* Responsive: allow horizontal scroll on narrow viewports */
.table-responsive {
overflow-x: auto; -webkit-overflow-scrolling: touch;
border-radius: var(--r-md);
}
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* Card wrapping a table: clip overflow so the table header bg doesn't
poke past the card's rounded corners. */
.card:has(> .table-responsive) { overflow: hidden; }
/* ── Rec card ── */
.rec-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--shadow);
padding: 12px 16px; margin-bottom: 8px;
display: flex; align-items: flex-start; gap: 12px;
}
.rec-icon-wrap {
width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.rec-icon-high { background: var(--error-lt); color: var(--error-med); }
.rec-icon-medium { background: var(--warning-lt); color: var(--warning-med); }
.rec-icon-low { background: var(--success-lt); color: var(--success-med); }
.rec-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.rec-ws { font-size: 11px; color: var(--primary); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.rec-detail { font-size: 12px; color: var(--muted); }
.rec-saving { font-size: 11px; color: var(--success); margin-top: 4px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
/* ── Alert row ── */
.alert-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-bottom: 1px solid var(--border-sub);
}
.alert-item:last-child { border-bottom: none; }
.alert-sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.asd-high { background: var(--error-med); }
.asd-medium { background: var(--warning-med); }
.asd-low { background: var(--success-med); }
/* ── Workspace select ── */
.ws-select {
background: var(--card);
border: 2px solid var(--border);
border-radius: var(--r); padding: 6px 10px;
font-size: 13px; color: var(--text);
outline: none; cursor: pointer; min-width: 220px;
transition: border-color .1s;
}
.ws-select:focus { border-color: var(--primary); }
/* ── Spinner ── */
.mini-spin {
width: 18px; height: 18px;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin .7s linear infinite;
display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Cache-status button (topbar) ── */
.cache-status-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-width: 170px; min-height: 28px;
padding: 5px 12px 5px 10px;
font-size: 11px; font-weight: 600; line-height: 1;
border-radius: 2em; border: 1px solid transparent;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: background .12s, border-color .12s, color .12s;
letter-spacing: .01em; overflow: hidden; position: relative;
}
.cache-status-btn:disabled { cursor: default; }
@media (max-width: 700px) {
.cache-status-btn { min-width: 0; padding: 5px 10px; }
.cache-status-btn .cache-status-label { display: none; }
}
/* Skeleton — initial state before any fetch */
.cache-status-btn.cache-skeleton {
background: var(--bg); border-color: var(--border); color: var(--muted);
}
.cache-status-btn .cache-status-skel {
height: 10px; width: 120px; border-radius: 4px;
background: rgba(95,107,122,.14);
animation: skelPulse 1.4s ease-in-out infinite;
display: none;
}
body.dark .cache-status-btn .cache-status-skel { background: rgba(255,255,255,.08); }
.cache-status-btn.cache-skeleton .cache-status-skel { display: inline-block; }
.cache-status-btn.cache-skeleton .cache-status-refresh,
.cache-status-btn.cache-skeleton .cache-status-label { display: none !important; }
/* Loading — shimmer sweep, no text, same size as resting state */
.cache-status-btn.cache-loading {
background: rgba(95,107,122,.14);
border-color: var(--border);
color: transparent;
pointer-events: none;
min-width: 170px;
}
.cache-status-btn.cache-loading::after {
content: '';
position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
background-size: 200% 100%;
animation: cacheShimmer 1.1s ease-in-out infinite;
}
body.dark .cache-status-btn.cache-loading {
background: rgba(255,255,255,.06);
border-color: var(--border);
}
body.dark .cache-status-btn.cache-loading::after {
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
background-size: 200% 100%;
}
@keyframes cacheShimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.cache-status-btn .cache-status-refresh { flex-shrink: 0; }
/* Cached */
.cache-status-btn.cache-cached { background: var(--bg); border-color: var(--border); color: var(--muted); }
.cache-status-btn.cache-cached:hover { background: var(--card); border-color: var(--muted); color: var(--text); }
/* Fresh — just computed */
.cache-status-btn.cache-fresh { background: var(--success-lt); border-color: rgba(0,135,90,.25); color: var(--success); }
.cache-status-btn.cache-fresh:hover { filter: brightness(1.03); border-color: var(--success-med); }
/* Error */
.cache-status-btn.cache-error { background: var(--error-lt); border-color: rgba(222,53,11,.28); color: var(--error); }
.cache-status-btn.cache-error:hover { filter: brightness(1.03); border-color: var(--error-med); }
/* Idle */
.cache-status-btn.cache-idle { background: var(--bg); border-color: var(--border); color: var(--muted); }
/* ── Account-switch transition overlay ── */
.acct-transition {
position: fixed; inset: 0; z-index: 500;
background: rgba(9,30,66,.52);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 200ms ease;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.acct-transition.visible {
opacity: 1; pointer-events: all;
}
.acct-transition-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
padding: 32px 40px;
display: flex; flex-direction: column; align-items: center; gap: 16px;
min-width: 240px;
animation: atCardIn 220ms ease;
}
@keyframes atCardIn {
from { opacity: 0; transform: scale(.94) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.acct-transition-spinner {
width: 36px; height: 36px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin .8s linear infinite;
}
.acct-transition-title {
font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.acct-transition-sub {
font-size: 12px; color: var(--muted); margin-top: -8px;
}
/* Initial app-boot loader. Renders inside #pageRoot before any page module
takes over. Was height:200px which pinned the spinner to the top 200px
of the page (visible empty space below); now flex-fills the page host
so the spinner sits in the true viewport centre - same idiom as
.empty-state / .al-detail-empty below. The .page:has selector turns
.page itself into a flex-column when this loader is its child, so
flex:1 1 auto can claim the remaining viewport height. */
.page:has(> .page-loading) {
display: flex; flex-direction: column;
}
.page-loading {
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 10px; color: var(--muted);
min-height: 100%; flex: 1 1 auto;
}
/* ── Empty state ──
Always vertically AND horizontally centred inside its host. The flex
column + min-height:100% pulls the icon + text to the middle of any
panel that's tall enough, instead of pinning them to the top with
only padding for spacing. The min-height:240px floor keeps the icon
visible even when the host has no intrinsic height (e.g. a freshly-
rendered modal or detail panel with no other content). */
.empty-state {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 48px 20px;
color: var(--muted);
min-height: 240px; flex: 1 1 auto;
}
.empty-state svg { opacity: .35; margin-bottom: 12px; }
.empty-state h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
/* ── Best-practice card icon ── */
.bp-icon {
width: 32px; height: 32px; border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px; flex-shrink: 0;
}
.bp-blue { background: var(--primary-lt); color: var(--primary); }
.bp-green { background: var(--success-lt); color: var(--success-med); }
.bp-orange { background: var(--warning-lt); color: var(--warning-med); }
.bp-purple { background: var(--purple-lt); color: var(--purple); }
.bp-teal { background: var(--teal-lt); color: var(--teal); }
.bp-red { background: var(--error-lt); color: var(--error-med); }
/* ── Info banner (info-level alert panel) ── */
.info-banner {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: var(--info-lt); color: var(--info);
border: 1px solid var(--primary-sub); border-left: 3px solid var(--primary);
border-radius: var(--r-md);
font-size: 13px;
}
.info-banner strong { color: var(--text); font-weight: 600; }
.info-banner code {
font-family: 'SFMono-Regular', Consolas, monospace;
font-size: 11px; padding: 1px 5px;
background: var(--bg); border-radius: 3px;
border: 1px solid var(--border-sub); color: var(--text);
}
.info-banner-error {
background: var(--error-lt); color: var(--error-med);
border-color: var(--error-med); border-left-color: var(--error);
}
.info-banner-error strong { color: var(--text); }
/* ── Modal close button (large click target) ── */
.modal-close {
width: 32px; height: 32px; border-radius: var(--r);
border: none; background: transparent;
color: var(--muted); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
/* ── Icon action buttons (settings table) ── */
.icon-btn {
width: 30px; height: 30px; border-radius: var(--r-md);
background: var(--bg); border: 1px solid var(--border);
color: var(--muted); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
padding: 0; flex-shrink: 0;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover {
background: var(--primary-lt);
color: var(--primary);
border-color: var(--primary-sub);
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.icon-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(87, 157, 255, .25);
}
/* Destructive action: tinted red at rest so it reads as "delete" before hover,
then a solid red fill on hover for a clear, confident affordance. */
.icon-btn-danger {
color: var(--error-med);
border-color: color-mix(in srgb, var(--error-med) 35%, var(--border));
}
.icon-btn-danger:hover {
background: var(--error-med);
color: #fff;
border-color: var(--error-med);
box-shadow: 0 1px 6px rgba(222, 53, 11, .35);
}
/* Group: tight row of action buttons. Defaults to right-aligned because
that's where table action columns live. Override with justify-content
if the group is in a left-aligned context. */
.icon-btn-group {
display: inline-flex; align-items: center; gap: 6px;
justify-content: flex-end;
}
/* ── Secrets Manager value cell ──────────────────────────────────────
The value column has a FIXED width (reserved up front, whether masked or
revealed) and the value wraps inside it — so revealing a long secret never
widens the column or shifts the rest of the table. */
.sec-val-cell { width: 320px; max-width: 320px; }
.sec-val {
display: inline-flex; align-items: flex-start; gap: 6px;
max-width: 100%;
font-family: Consolas, monospace; font-size: 12px; color: var(--muted);
}
.sec-val-text {
min-width: 0;
overflow-wrap: anywhere; word-break: break-all; white-space: normal;
}
.sec-copy-btn { width: 22px; height: 22px; flex-shrink: 0; }
.sec-copy-btn svg { width: 12px; height: 12px; }
/* Access Control modal: wider + compact, and DON'T clip — so opening the
principal/permission dropdown doesn't add an overflow scrollbar to the card
(the popup can spill past the card edge). The content is short (a list + a
one-row form) so it never needs to scroll itself. */
.sec-acl-card {
width: 640px; max-width: 92vw;
overflow: visible; scrollbar-gutter: auto;
}
.sec-acl-card .pc-select-popup { max-height: 220px; }
/* "Who has access" list scrolls on its own so a long ACL list doesn't push the
grant form off-screen. ~5 rows visible, then scroll. */
#secAclList { max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#secAclList::-webkit-scrollbar { width: 6px; }
#secAclList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#secAclList .data-table thead th { position: sticky; top: 0; z-index: 1; }
/* Searchable principal picker (Access Control → Grant). */
.sec-pick { position: relative; }
.sec-pick-trigger {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; min-height: 38px; padding: 8px 10px;
background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; color: var(--text); cursor: pointer; outline: none;
}
.sec-pick-trigger:focus, .sec-pick-trigger:hover { border-color: var(--primary); }
.sec-pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-pick-placeholder { color: var(--subtle); }
.sec-pick-popup {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
box-shadow: var(--shadow-lg); padding: 6px;
}
.sec-pick-search { width: 100%; height: 32px; margin-bottom: 6px; }
.sec-pick-list { max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.sec-pick-head {
font-size: 10px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px 2px;
}
.sec-pick-item {
padding: 7px 8px; border-radius: 5px; font-size: 12px; color: var(--text);
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sec-pick-item:hover { background: var(--bg); }
.sec-pick-item-active { background: var(--primary-lt); color: var(--primary); font-weight: 600; }
/* Permission radio group (only 3 options → radios read better than a select). */
.sec-radio-group { display: flex; flex-direction: column; gap: 6px; }
/* Compact side-by-side variant (e.g. Create Scope's two MANAGE options). */
.sec-radio-row { flex-direction: row; }
.sec-radio-row .sec-radio { flex: 1; justify-content: flex-start; }
/* Option 5 — big tappable cards with a soft glow when selected. */
.sec-radio {
display: flex; align-items: center; gap: 9px; cursor: pointer;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
font-size: 12px; color: var(--text);
transition: border-color .12s, background .12s, box-shadow .12s;
}
.sec-radio:hover { border-color: var(--primary-sub); }
.sec-radio input { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; }
/* Selected must be unmistakably stronger than hover: 2px primary border (inset
so layout doesn't shift) + a subtle fill + glow. */
.sec-radio:has(input:checked) {
border-color: var(--primary);
background: var(--primary-lt);
box-shadow: inset 0 0 0 1px var(--primary), 0 2px 10px rgba(87,157,255,.25);
}
.sec-radio strong { font-weight: 700; }
/* Inline note/banner used in the Secrets detail (KV explainer, friendly errors). */
.sec-note {
display: flex; gap: 9px; align-items: flex-start;
font-size: 12px; line-height: 1.5;
padding: 10px 12px; border-radius: var(--r-md);
border: 1px solid var(--border);
}
.sec-note strong { font-weight: 600; }
.sec-note-info { color: var(--text); background: var(--primary-lt); border-color: var(--primary-sub); }
.sec-note-info svg { color: var(--primary); }
.sec-note-error { color: var(--error-med); background: var(--error-lt); border-color: var(--error-med); }
/* ── Settings modal ── */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,.55);
align-items: center; justify-content: center;
}
body.dark .modal-overlay { background: rgba(0,0,0,.72); }
.modal-card {
width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto;
background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
/* Reserve the scrollbar gutter always, so opening a dropdown inside the modal
(whose popup can briefly overflow the card) doesn't add/remove a scrollbar
and shift the content sideways. */
scrollbar-gutter: stable;
}
.modal-header {
padding: 14px 16px; border-bottom: 1px solid var(--border-sub);
display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 14px 16px 16px; }
.modal-label {
font-size: 11px; font-weight: 700; color: var(--muted);
text-transform: uppercase; display: block; margin-bottom: 4px;
}
.modal-input {
width: 100%; padding: 10px 12px;
border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; background: var(--bg); color: var(--text);
outline: none; font-family: inherit;
transition: border-color .12s, box-shadow .12s, background .12s;
}
.modal-input:hover { border-color: var(--muted); }
.modal-input:focus {
border-color: var(--primary); background: var(--card);
box-shadow: 0 0 0 3px rgba(87, 157, 255, .18);
}
.modal-input.mono { font-family: 'SFMono-Regular', Consolas, monospace; }
.modal-input:disabled { opacity: .7; cursor: not-allowed; background: var(--bg); }
.modal-input.input-err { border-color: var(--error-med); }
.modal-input.input-err:focus { box-shadow: 0 0 0 3px rgba(222, 53, 11, .18); }
/* Strip the native number-input spinner everywhere. The default up/down
arrows render as an unstyled grey box that clashes with the themed inputs
(and looks broken in dark mode). We hide them app-wide; where step controls
are genuinely useful (the pricing calculator) we provide themed sliders /
the .pc-stepper buttons instead. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
select.modal-input { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A869A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; cursor: pointer; }
/* Render the placeholder