`). */
.card-a .card-a-inner {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 11px;
margin: 0 -1px -1px -1px;
padding: 4px 20px 16px;
position: relative;
flex: 1; /* fill outer card height when grid stretches siblings */
}
/* Edge-to-edge variant for tables / lists / chip rows that need to touch
the inner card's walls (no internal padding). Same chrome (11px radius,
negative margin merge) but content fills wall-to-wall. */
.card-a .card-a-inner-flush {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 11px;
margin: 0 -1px -1px -1px;
padding: 0;
position: relative;
overflow: hidden;
flex: 1; /* fill outer card height when grid stretches siblings */
}
.card-a .card-footer {
background: transparent;
border-top: 1px solid #e5e7eb;
padding: 12px 20px;
font-size: 12px;
color: #6b7280;
}
/* ---- Card Header Icon ---- */
/* No filled square background — icons render flush next to the title.
Width/height auto so wrapper sizes to its SVG. (Matches monitoring /
merchant detail / dashboard KPI conventions.) */
.card-header-icon {
background: transparent;
border: none;
padding: 0;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #6b7280;
}
/* ---- Card Header Title ---- */
.card-header-title {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ---- Badges ---- */
/* Pill-shaped badge with Cloudflare-baseline sizing (text-xs / spacing × 2
inline / spacing × .5 block / radius pill / 500 weight). Color variants
below stay project-specific. Uppercase + tight letter-spacing kept from
our existing typography choices. */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
width: fit-content;
flex-shrink: 0;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
line-height: calc(1 / .75);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.badge-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.badge-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.badge-neutral { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
/* ---- Tabs bar ---- */
.ra-tabs-bar {
background: #fff;
border-bottom: 1px solid #e5e7eb;
padding: 0 20px;
}
.rd-content {
padding: 24px;
background: #f9fafb;
}
/* ---- Back button ---- */
.ph-back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid #e5e7eb;
border-radius: 6px;
color: #6b7280;
background: #fff;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
flex-shrink: 0;
}
.ph-back-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #111827;
text-decoration: none;
}
/* ---- Tab items ---- */
.ph-tab-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 16px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: all 0.15s ease;
}
.ph-tab-item:hover,
.ph-tab-item:focus,
.ph-tab-item:active { color: #dc2626; text-decoration: none; }
.ph-tab-item.active { color: #dc2626; border-bottom-color: #dc2626; font-weight: 600; }
/* ---- Tab content animation ---- */
.tab-content { animation: fadeIn 0.2s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ---- Field label/value (shared across pages) ---- */
.field-label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ---- Info rows (used in summary/detail cards) ---- */
.info-row {
display: flex;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
align-items: flex-start;
}
.info-row:last-child { border-bottom: none; }
.info-label {
width: 120px;
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
padding-top: 1px;
}
.info-val {
font-size: 13px;
font-weight: 500;
color: #111827;
flex: 1;
}
/* ---- Review link ---- */
.review-link {
font-size: 12px;
font-weight: 600;
color: #2563eb;
text-decoration: none;
}
.review-link:hover { color: #1d4ed8; text-decoration: none; }
/* ---- Quick Actions card (shell + structural classes) ---- */
/* Single-line card used at the top of agent detail pages: icon + "Quick Actions"
label + small vertical divider + the button row. Companion include is
_includes/components/quick_actions_header.html which renders the label group
and divider so the title and icon stay in one place across agents. */
.qa-card {
background: linear-gradient(180deg, #f9fafb 0%, #ffffff 50%);
border: none;
border-radius: 8px;
box-shadow: 0 -1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
overflow: hidden;
}
.qa-card-row {
padding: 10px 14px;
display: flex;
align-items: center;
gap: 14px;
color: #6b7280;
flex-wrap: wrap;
}
.qa-card-label {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.qa-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
white-space: nowrap;
text-transform: uppercase;
}
.qa-card-divider {
width: 1px;
height: 18px;
background: #e5e7eb;
flex-shrink: 0;
}
.qa-card-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ---- Quick Action button ---- */
/* Shared style for the action button row inside Quick Actions cards on
risk / monitoring / periodic_control detail pages. font-size, gap, radius,
shadow and transition are taken from the Cloudflare baseline (text-xs,
spacing × 1 gap, radius-md, 0.1s transition). Vertical padding stays at
6px to preserve the project's existing button height. Typography
(font-family, letter-spacing, smoothing) is kept project-default. */
.qa-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #374151;
font-size: 12px;
font-weight: 500;
line-height: calc(1 / .75);
text-decoration: none;
cursor: pointer;
user-select: none;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}
.qa-btn:hover {
background: #f9fafb;
border-color: #9ca3af;
color: #111827;
text-decoration: none;
}
.qa-btn:active {
background: #f3f4f6;
}
.qa-btn svg {
flex-shrink: 0;
}
/* Primary (colored) qa-btn variant — for page-level primary actions
(e.g. "New Merchant"). Same dimensions/typography as .qa-btn so it
pairs cleanly with the neutral search/filter buttons next to it.
White-icon support:
![]()
children get inverted via filter so SVG
line icons (loaded via
![]()
) render in the button's foreground. */
.qa-btn.qa-btn-primary {
background: #059669;
border-color: #059669;
color: #fff;
}
.qa-btn.qa-btn-primary:hover {
background: #047857;
border-color: #047857;
color: #fff;
}
.qa-btn.qa-btn-primary:active {
background: #065f46;
border-color: #065f46;
}
.qa-btn.qa-btn-primary img {
filter: brightness(0) invert(1);
}
.qa-btn.qa-btn-primary.disabled,
.qa-btn.qa-btn-primary[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Warning (amber) qa-btn variant — for cautionary actions like
Impersonate. Same dimensions/typography as .qa-btn so it pairs
with neutral row buttons. */
.qa-btn.qa-btn-warning {
background: #fef3c7;
border-color: #fde68a;
color: #92400e;
}
.qa-btn.qa-btn-warning:hover {
background: #fde68a;
border-color: #fcd34d;
color: #78350f;
}
.qa-btn.qa-btn-warning:active {
background: #fcd34d;
border-color: #fbbf24;
}
.qa-btn.qa-btn-warning.disabled,
.qa-btn.qa-btn-warning[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Disabled state for the neutral .qa-btn base */
.qa-btn.disabled,
.qa-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Success (green) qa-btn variant — used by .qa-result for triggered state. */
.qa-btn.qa-btn-success {
background: #d1fae5;
border-color: #6ee7b7;
color: #065f46;
}
/* Danger (red) qa-btn variant — used by .qa-result for failed state. */
.qa-btn.qa-btn-danger {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
/* Quick-action result pill — status displayed in place of the
originating