/* PayG Agentic — the small set of components Tailwind utilities don't cover cleanly. */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

.brand-mark {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em;
}
.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-weight: 600; font-size: 13px;
}

.sidebar { width: 14rem; flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb;
           min-height: calc(100vh - 3.5rem); position: sticky; top: 3.5rem; align-self: flex-start; }
@media (max-width: 767px) {
  .sidebar { position: fixed; left: 0; top: 3.5rem; bottom: 0; z-index: 25; transform: translateX(-100%);
             transition: transform .18s ease; box-shadow: 0 10px 30px rgba(15,23,42,.12); }
  .sidebar.open { transform: none; }
}
.nav-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: .5rem;
            font-size: 13.5px; color: #4b5563; }
.nav-item:hover { background: #f8fafc; color: #111827; }
.nav-item.on { background: #eef2ff; color: #4338ca; font-weight: 600; }

.card { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
          padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; }
.card-t { font-size: 13.5px; font-weight: 600; color: #111827; }

.ctl { border: 1px solid #d1d5db; border-radius: .5rem; padding: .38rem .6rem; font-size: 13px; background: #fff; color: #111827; }
.ctl:focus { outline: 2px solid #c7d2fe; outline-offset: 0; border-color: #6366f1; }
textarea.ctl { width: 100%; }

.btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: .5rem; padding: .42rem .8rem;
       font-size: 13px; font-weight: 500; border: 1px solid #d1d5db; background: #fff; color: #374151; white-space: nowrap; }
.btn:hover { background: #f9fafb; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-p { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.btn-p:hover { background: #4338ca; }
.btn-d { color: #b91c1c; }
.btn-sm { padding: .25rem .55rem; font-size: 12px; }
.icon-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: .45rem; color: #6b7280; }
.icon-btn:hover { background: #eef2ff; color: #4338ca; }

.kpi { padding: 1rem; }
.kpi .v { font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; }
.kpi .l { font-size: 12px; color: #6b7280; margin-top: .2rem; }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 999px;
         font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.sev-critical { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.sev-high     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.sev-medium   { background: #fefce8; color: #a16207; border-color: #fde68a; }
.sev-low      { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.sev-info     { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-critical { background: #dc2626; } .dot-high { background: #ea580c; } .dot-medium { background: #ca8a04; }
.dot-low { background: #0284c7; } .dot-info { background: #94a3b8; }

table.dt { width: 100%; font-size: 13px; border-collapse: collapse; }
table.dt th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
              color: #6b7280; background: #f8fafc; padding: .55rem .75rem; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
table.dt td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
table.dt tbody tr:hover { background: #fafbff; }
table.dt tr.clickable { cursor: pointer; }

pre.sql { background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.55; padding: .8rem 1rem;
          border-radius: .5rem; overflow-x: auto; white-space: pre; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.scroll-x { overflow-x: auto; }

.banner-sandbox { background: repeating-linear-gradient(135deg, #fffbeb, #fffbeb 10px, #fef3c7 10px, #fef3c7 20px);
                  border: 1px solid #fcd34d; color: #92400e; }

.spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9); background-size: 200% 100%;
            animation: sk 1.2s ease-in-out infinite; border-radius: .4rem; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 40; display: flex;
              align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modal { background: #fff; border-radius: .9rem; width: 100%; max-width: 44rem; box-shadow: 0 25px 60px rgba(15,23,42,.25); }
.modal.wide { max-width: 64rem; }

.bar { height: 8px; border-radius: 999px; background: #eef2ff; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 999px; }

/* ---- brand */
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sep { width: 1px; height: 22px; background: #e5e7eb; }

/* ---- nav sections */
.nav-sec { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; padding: .9rem .7rem .3rem; }
.nav-sec:first-child { padding-top: .2rem; }

/* ---- tables */
table.dt td { font-variant-numeric: tabular-nums; }
table.dt th.sortable { cursor: pointer; user-select: none; }
table.dt th.sortable:hover { color: #374151; }
.link { color: #4338ca; text-decoration: none; }
.link:hover { text-decoration: underline; }
.icon-btn { cursor: pointer; }
.icon-btn:focus-visible { outline: 2px solid #c7d2fe; }
.icon-good:hover { background: #ecfdf5; color: #047857; }
.icon-danger:hover { background: #fef2f2; color: #b91c1c; }
.modal.xl { max-width: 80rem; }

/* ---- dashboards */
.seg { display: inline-flex; background: #fff; border: 1px solid #d1d5db; border-radius: .5rem; padding: 2px; }
.seg button { font-size: 12.5px; padding: .28rem .7rem; border-radius: .4rem; color: #4b5563; white-space: nowrap; }
.seg button:hover { color: #111827; }
.seg button.on { background: #eef2ff; color: #3730a3; font-weight: 600; }
.chapter { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #eef2ff; color: #4338ca;
           font-size: 12px; font-weight: 700; flex-shrink: 0; }
.kpi-link { display: block; transition: border-color .12s, box-shadow .12s; cursor: pointer; }
.kpi-link:hover { border-color: #c7d2fe; box-shadow: 0 1px 6px rgba(79,70,229,.08); }
.delta { display: inline-flex; align-items: center; gap: .25rem; font-size: 11px; font-weight: 600; white-space: nowrap; }
.delta.up { color: #047857; } .delta.down { color: #b91c1c; } .delta.flat { color: #6b7280; }
.story { background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid #4f46e5; border-radius: .75rem; padding: .9rem 1.1rem; }
.story p { font-size: 14px; line-height: 1.65; color: #374151; }
.story b { color: #111827; font-weight: 600; }

/* ---- charts */
.viz-axis { font-size: 10px; fill: #8a8984; font-variant-numeric: tabular-nums; }
.viz-hit { outline: none; }
.viz-hit.clickable { cursor: pointer; }
.viz-tip { position: fixed; z-index: 80; pointer-events: none; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem;
           box-shadow: 0 8px 24px rgba(15,23,42,.14); padding: .45rem .6rem; font-size: 12px; min-width: 9rem; }
.viz-tip-h { font-size: 11px; color: #6b7280; margin-bottom: .2rem; }
.viz-tip-r { display: flex; align-items: center; gap: .45rem; line-height: 1.6; }
.viz-tip-r b { font-weight: 600; color: #111827; }
.viz-key { display: inline-block; width: 12px; height: 2px; border-radius: 2px; }
.viz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.viz-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.viz-stack span { display: block; min-width: 3px; }
.viz-stack span:hover, .viz-stack span:focus { filter: brightness(1.08); outline: none; }
.viz-stack span.clickable { cursor: pointer; }
table.dt tr.row-alert td:first-child { box-shadow: inset 3px 0 0 #d03b3b; }