/* RevTrack look & feel — matches the Chatbot.Team Sales CRM: blue brand, bold KPI numbers with a coloured top edge,
   uppercase KPI labels, rounder cards, and a light / dark theme (Theme toggle at the bottom of the sidebar). */
:root{--k-slate:#94A3B8;--brand:#2563EB;--brand-2:#1D4ED8;--k-blue:#2563EB;--k-green:#16A34A;--k-red:#DC2626;--k-purple:#7C3AED;--k-teal:#0891B2;--k-amber:#D97706;--shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06)}
html[data-theme="dark"]{--k-slate:#64748B;--brand:#3B82F6;--brand-2:#60A5FA;--k-blue:#3B82F6;--k-green:#22C55E;--k-red:#EF4444;--k-purple:#A78BFA;--k-teal:#22D3EE;--k-amber:#F59E0B;--shadow:0 1px 2px rgba(0,0,0,.4)}

body{font-family:'Plus Jakarta Sans','Geist',ui-sans-serif,system-ui,sans-serif}
.h1{font-weight:700;letter-spacing:-0.02em}
.h2{font-weight:700}

/* brand mark: blue square like the CRM */
.logo{background:transparent!important;border-radius:0;width:36px!important;height:36px!important;display:grid;place-items:center;flex:none}
.logo img{width:34px;height:34px;display:block}
.brand-name{font-weight:700;font-size:15px}
.brand-sub{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:700}

/* cards */
.card,.kpi{border-radius:14px;box-shadow:var(--shadow)}

/* KPI cards — same look and size as the Sales CRM: equal cards in a neat grid, coloured top edge,
   small uppercase label, big number in the edge colour, notes kept to two lines */
.kpis{display:grid!important;gap:12px!important;align-items:stretch;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(6):last-child){grid-template-columns:repeat(6,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(9):last-child){grid-template-columns:repeat(5,minmax(0,1fr))!important}
.kpis:has(>.kpi:nth-child(9):last-child)>.kpi:last-child{grid-column:span 2}
.kpis:has(>.kpi:nth-child(10):last-child){grid-template-columns:repeat(5,minmax(0,1fr))!important}
/* 7 cards (4 columns): the last one widens so both rows line up */
.kpis:has(>.kpi:nth-child(7):last-child)>.kpi:last-child{grid-column:span 2}
.kpi{position:relative;border-top:3px solid var(--k-blue);padding:12px 14px!important;min-height:0;height:100%;gap:4px!important;display:flex;flex-direction:column}
.kpis>.kpi:nth-child(6n+1){border-top-color:var(--k-slate)}
.kpis>.kpi:nth-child(6n+2){border-top-color:var(--k-green)}
.kpis>.kpi:nth-child(6n+3){border-top-color:var(--k-amber)}
.kpis>.kpi:nth-child(6n+4){border-top-color:var(--k-purple)}
.kpis>.kpi:nth-child(6n+5){border-top-color:var(--k-teal)}
.kpis>.kpi:nth-child(6n+6){border-top-color:var(--k-blue)}
.kpis>.kpi:nth-child(6n+2) .kpi-value{color:var(--k-green)}
.kpis>.kpi:nth-child(6n+3) .kpi-value{color:var(--k-amber)}
.kpis>.kpi:nth-child(6n+4) .kpi-value{color:var(--k-purple)}
.kpis>.kpi:nth-child(6n+5) .kpi-value{color:var(--k-teal)}
.kpis>.kpi:nth-child(6n+6) .kpi-value{color:var(--k-blue)}
.kpi-top{min-height:18px;align-items:center!important}
.kpi-label{text-transform:uppercase;letter-spacing:.08em;font-size:11px!important;font-weight:700;line-height:1.35;color:var(--c-6e7078,#64748B)!important}
.kpi-value{font-size:22px!important;font-weight:800!important;letter-spacing:-0.02em;line-height:1.1;margin:2px 0}
.kpi-foot{font-size:12px!important;line-height:1.4;margin-top:auto}
.kpi-foot>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi .tag,.kpi .pill{font-size:11px;white-space:nowrap}
.kpi-ic{width:22px!important;height:22px!important}
.kpi .bar{margin:2px 0}
.kpi .spark{height:24px}

/* "How it's worked out" — a small info line with a tooltip instead of a paragraph */
.pace-info{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--brand);cursor:help;position:relative;width:max-content;outline:none}
.pace-info::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);width:260px;padding:10px 12px;border-radius:10px;background:#0F172A;color:#E2E8F0;font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(2,6,23,.3);opacity:0;pointer-events:none;transform:translateY(4px);transition:.15s;z-index:20}
.pace-info:hover::after,.pace-info:focus::after{opacity:1;transform:none}

@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.kpis>.kpi:last-child{grid-column:auto!important}}
@media (max-width:600px){.kpis{grid-template-columns:minmax(0,1fr)!important}.kpi{min-height:0}.pace-info::after{width:220px}}

/* primary actions in the CRM blue */
.btn-primary{background:var(--brand)!important;border-color:var(--brand)!important}
.btn-primary:hover{background:var(--brand-2)!important;border-color:var(--brand-2)!important}

/* sidebar footer: name + role, and the Theme row */
.u-meta{min-width:0;flex:1}
.u-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{font-size:11.5px;color:var(--c-62646c,#64748B);line-height:1.35;margin-top:1px}
.theme-row{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 0;border-top:1px solid var(--c-ededf0,#E5E7EB);font-size:13px;font-weight:600;color:var(--c-55575f,#475569)}
.theme-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--c-dadbe0,#CBD5E1);background:var(--c-ffffff,#fff);color:inherit;display:grid;place-items:center;cursor:pointer}
.theme-btn:hover{border-color:var(--brand)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .ic{display:none}
html:not([data-theme-pref]) .theme-btn .ic-system,html[data-theme-pref="system"] .theme-btn .ic-system,html[data-theme-pref="light"] .theme-btn .ic-light,html[data-theme-pref="dark"] .theme-btn .ic-dark{display:block}
.side-foot{border-top:0!important;padding-top:8px!important}
@media (max-width:760px){.theme-row{order:2;border-top:0;padding:0;gap:6px}.theme-row>span{display:none}}

/* dark mode details the colour swap can't cover */
html[data-theme="dark"] .overlay{background:rgba(2,6,23,.66)}
html[data-theme="dark"] img{opacity:.95}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.85)}
html[data-theme="dark"] .dbar.zero{opacity:.35}

/* use the full width like the CRM */
.page{max-width:none!important;width:100%}

/* compact KPI cards: one-line labels and notes, no empty stretch */
@media (max-width:1280px) and (min-width:1181px){.kpis:has(>.kpi:nth-child(9):last-child),.kpis:has(>.kpi:nth-child(10):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}.kpis:has(>.kpi:nth-child(9):last-child)>.kpi:last-child{grid-column:auto}}
.kpi-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kpi-top{gap:8px;min-width:0}
.kpi-foot>span:first-child{-webkit-line-clamp:1!important}
.kpi .bar{margin:4px 0 2px!important}
.tag:empty{display:none}
/* tables scroll inside their own box: header stays visible, side-scroll bar always in reach */
.tw.tw-box,.tw{max-height:calc(100vh - 230px);overflow:auto!important;overscroll-behavior:contain}
.tw .tr.th{position:sticky;top:0;z-index:3;background:var(--c-fafafb,#FAFAFB)}
.tw .tr.th>*{background:inherit}
.tw::-webkit-scrollbar{width:10px;height:10px}.tw::-webkit-scrollbar-thumb{background:var(--c-cfd1d8,#CFD1D8);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.tpager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0 2px;font-size:13px;color:var(--c-62646c,#62646C)}
.tpager .tp-size{display:flex;align-items:center;gap:8px;font-weight:500}
.tpager select{height:32px;border:1px solid var(--c-dadbe0,#DADBE0);border-radius:8px;padding:0 8px;background:var(--c-ffffff,#fff);color:inherit;font:inherit}
.tpager .tp-nav{margin-left:auto;display:flex;gap:8px}
.tr[hidden]{display:none!important}
.pager .tp-size{display:flex;align-items:center;gap:8px;font-weight:500}
.pager select{height:32px;border:1px solid var(--c-dadbe0,#DADBE0);border-radius:8px;padding:0 8px;background:var(--c-ffffff,#fff);color:inherit;font:inherit}
.pager .tp-size+span{margin-right:auto}
.kpi-foot{flex-wrap:nowrap!important;min-width:0}
.kpi-foot>span:first-child{flex:1 1 auto;min-width:0}
.kpi-foot>a,.kpi-foot>button,.kpi-foot>.btn-link{flex:none;white-space:nowrap}
.kpi-foot .pace-info{flex:none;font-size:13px;width:18px;height:18px;justify-content:center;border-radius:50%}
.kpi-foot .pace-info:hover,.kpi-foot .pace-info:focus{background:var(--c-eef0fb,#EEF0FB)}
.kpi-foot .pace-info::after{left:auto;right:-8px;font-weight:400}
.kpi-label{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;letter-spacing:.05em!important}
*:has(> .tpager) > .pager{display:none!important}
.kpi-top>.kpi-label{flex:1 1 0;min-width:0}.kpi-top>.tag,.kpi-top>.pill,.kpi-top>.kpi-ic{flex:none}.kpi{min-width:0;overflow:hidden}
@media (max-width:1180px){.kpis.kpis.kpis.kpis:has(>.kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important}.kpis.kpis>.kpi:last-child{grid-column:auto!important}}
@media (max-width:600px){.kpis.kpis.kpis.kpis:has(>.kpi){grid-template-columns:minmax(0,1fr)!important}}
/* Hide / show sidebar */
.sb-toggle{position:fixed;z-index:40;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--c-e5e5e8,#E5E5E8);background:var(--c-ffffff,#fff);color:var(--c-55575f,#55575F);cursor:pointer;padding:0;box-shadow:0 1px 2px rgba(15,23,42,.06);transition:background .15s,color .15s}
.sb-toggle:hover{background:var(--c-f3f3f5,#F3F3F5);color:var(--brand,#2563EB)}
.sb-toggle:focus-visible{outline:2px solid var(--brand,#2563EB);outline-offset:2px}
.sb-toggle[hidden]{display:none!important}
html.has-sbt .app .topbar{padding-left:62px!important}
@media (min-width:761px){html.sb-hidden .app .side{display:none!important}}
/* revenue split: usage + subscriptions = total */
.kpi-split{font-size:11.5px;color:var(--c-62646c,#62646C);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev-split{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;margin:4px 0 10px}
.rev-split .rs{border:1px solid var(--c-e5e5e8,#E5E5E8);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;min-width:140px;background:var(--c-ffffff,#fff)}
.rev-split .rs span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-6e7078,#6E7078)}
.rev-split .rs b{font-size:17px;font-variant-numeric:tabular-nums}
.rev-split .op{font-size:18px;color:var(--c-62646c,#62646C);font-weight:600}
.rev-split .rs.tot{border-color:var(--c-3442c4,#3442C4)}
html[data-theme="dark"] .svc-tag.use{background:rgba(34,197,94,.16);color:#4ade80}
html[data-theme="dark"] .svc-tag.sub{background:rgba(167,139,250,.18);color:#c4b5fd}
html[data-theme="dark"] .sr-cell.sub.on{background:rgba(167,139,250,.10)}
html[data-theme="dark"] .sr-cell.use.on{background:rgba(34,197,94,.08)}
.zero-legend{font-size:12px;color:var(--c-6e7078,#6e7078);margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
.zero-legend b{font-weight:700;color:inherit}