/* Visual language observed in the current Modilo staging app: neutral shell,
   rectangular cards, violet actions and understated lavender surfaces. */
:root { --ink:#242424; --muted:#6b6b6b; --green:#6741d9; --line:#e3e3e8; --paper:#f1f1f1; --sidebar:#ebebeb; --lime:#e9e2fa; --radius:0; }
body { font-family:Arial,'Segoe UI',sans-serif; color:#292929; }
h1,h2,h3 { color:#242424; }
h1 { font-weight:650; letter-spacing:-.8px; }
.sidebar { background:#ebebeb; color:#3e3e3e; border-right:1px solid #dedee2; }
.brand,.brand:hover { color:#262626; letter-spacing:-1.6px; }
.brand-dot { color:#6741d9; }
.brand small { color:#737373; }
.workspace { border-color:#dadade; border-radius:0; background:#f7f7f7; }
.workspace-icon { background:#fff; color:#6741d9; border:1px solid #ded9e9; border-radius:0; }
.workspace small,.nav-label,.nav-disabled,.user small,.local-note small { color:#747474; }
.nav-item { color:#414141; }
.nav-item.selected { background:#fff; color:#4e2aac; border-left:3px solid #6741d9; border-radius:0; }
.nav-item:hover { background:#fafafa; color:#6741d9; }
.nav-item b { background:#eee8fb; color:#6741d9; }
.nav-disabled small { border-color:#ceced4; }
.local-note { color:#555; }
.local-note i { background:#6741d9; }
.user { border-color:#d6d6db; color:#333; }
.avatar { background:#e9e0ff; color:#6741d9; }
.icon-button { color:#666; }
.topbar { background:#fafafa; border-color:#dfdfe3; }
.breadcrumb,.platform { color:#666; }
.env-indicator { background:#f3f0fa; border-color:#e0d9f0; color:#6642bb; border-radius:0; }
.env-indicator.staging { background:#fff3a1; color:#504b20; border-color:#eee190; }
.demo-banner { background:#fff3ad; border-color:#eade94; border-radius:0; color:#645a27; }
.demo-banner b { background:#e9dc88; color:#574c21; border-radius:0; }
.eyebrow { color:#786695; }
.page-heading { background:#faf9ff; border:1px solid #ded9eb; padding:26px; position:relative; }
.page-heading p { color:#666; }
.button,select,input,textarea,.segments,.segments a,.search { border-radius:0; }
.button { color:#49414f; border-color:#d7d4dd; }
.button:hover { background:#f4efff; border-color:#c8b8ee; color:#5632b6; }
.button.primary { background:#6741d9; border-color:#6741d9; color:white; }
.button.primary:hover { background:#5632bd; }
.segments { background:#e5e3e9; }
.segments a { color:#666; }
.segments a.active { color:#5c37bd; box-shadow:none; }
.dot { background:#6741d9; }
.dot.staging { background:#b6941f; }
.check,.updated,.metric>div,.metric p,.card-heading p,.legend,.chart-summary>span,.chart-axis,.chart-grid,.footnote { color:#6d6d75; }
.check input { accent-color:#6741d9; }
select,input,textarea { border-color:#d8d6df; color:#333; }
input::placeholder,textarea::placeholder { color:#85818b; }
.metric { border-top:3px solid #6741d9; background:#fff; }
.metric:nth-child(2) { border-top-color:#1098ad; }
.metric:nth-child(3) { border-top-color:#1a56db; }
.metric:nth-child(4) { border-top-color:#e67700; }
.metric>div span { color:#8064c3; }
.metric strong small { font-size:14px; letter-spacing:0; color:#777; font-weight:400; }
.chart { background:repeating-linear-gradient(to top,transparent,transparent calc(50% - 1px),#eeedf1 calc(50% - 1px),#eeedf1 50%); border-color:#e8e5ee; }
.chart svg polyline,.sparkline polyline,.detail-chart polyline { stroke:#8662db; }
.chart-fill { fill:#eee8fa; }
.legend i { background:#8662db; }
.attention-item { border-color:#eceaf0; }
.attention-item small { color:#737078; }
.attention-item>span:last-child { color:#9c8ab8; }
.text-link,.back { color:#6741d9; }
.good { color:#32804a; }
.muted { color:#78747e; }
.calm p { color:#777; }
.table-label,.pagination { color:#716c79; }
thead { background:#f7f6f9; color:#706879; }
td { border-color:#eeecf1; }
tbody tr:hover { background:#fbf9ff; }
.tenant-link small { color:#77717f; }
.store-avatar { border-radius:0; background:#eee8fa; color:#7854b9; }
.color-1 { background:#eee8fa; color:#6741d9; }
.color-2 { background:#e6f1f3; color:#1098ad; }
.color-3 { background:#faf0dd; color:#b27b21; }
.color-4 { background:#e7edf9; color:#5575c3; }
.tags span,.badge { background:#f0eafb; color:#7752bd; border-color:#e0d5f1; border-radius:0; }
.shop-box { background:#faf9fc; border-color:#e6e1ed; border-radius:0; }
.facts dt,.notes label,.shop-title small { color:#78717f; }
.facts dd { color:#333; }
.detail-chart { background:#faf8ff; }
.milestones .complete { color:#6741d9; }
.support-card { background:#f7f4fe; border-color:#e1d9f0; }
.notice { background:#edf5ee; border-color:#cbdccc; color:#326640; border-radius:0; }
footer { color:#78747e; }
.login-panel { background:#222027; }
.login-panel .brand { color:#fff; }
.login-panel h1 { color:#fff; }
.login-panel .eyebrow,.login-panel>p,.login-art>span { color:#b3a7c7; }
.login-art>div { border-color:#786198; color:#dfd0ff; background:linear-gradient(140deg,#533c72,#2e253a); border-radius:0; box-shadow:25px 25px 0 -1px #222027,25px 25px 0 0 #67517d; }
.demo-login p { background:#eee8fa; color:#6d5888; border-radius:0; }
.login-card>p,.login-footer { color:#78717f; }
.login-footer { border-color:#dfdae7; }
.tenant-sections { display:flex; gap:24px; border-bottom:1px solid #ded9e6; margin:26px 0 20px; padding-bottom:14px; flex-wrap:wrap; }
.tenant-sections a { font-size:12px; color:#6741d9; font-weight:600; }
.tenant-summary { margin-top:16px; }
.fact-large { font-size:20px!important; letter-spacing:-.4px; margin-top:5px!important; }
.source-note { background:#f7f4fe; border-left:3px solid #8967d4; padding:13px 15px; margin:13px 0 17px; font-size:11px; }
.source-note p { color:#6e6678; margin-top:5px; line-height:1.7; }
.data-explanation { color:#77707e; font-size:11px!important; line-height:1.8; }
.timeline { list-style:none; margin:24px 0 0 7px; padding:0; max-height:740px; overflow-y:auto; }
.timeline li { position:relative; padding:0 12px 25px 24px; border-left:1px solid #e3ddef; }
.timeline-node { position:absolute; width:9px; height:9px; background:#9679d3; border:2px solid #f4effe; left:-5px; top:3px; }
.event-billing .timeline-node { background:#d5a148; }.event-usage .timeline-node { background:#6f9da7; }
.timeline time { font-size:10px; color:#817789; }
.timeline h3 { font-size:12px; margin:4px 0; font-weight:600; }
.timeline p { font-size:11px; color:#7b7282; line-height:1.7; }
.insights-grid { align-items:start; }
@media(max-width:580px) { .sidebar { border:0; }.page-heading { padding:18px 15px; }.heading-actions { padding-top:8px; }.tenant-sections { gap:17px; }.tenant-sections a { font-size:11px; }.metric { border-radius:0; }.timeline { max-height:540px; } }

/* Tenant priority: billing first, then usage, history and operational detail. */
tr[data-tenant-row]{cursor:pointer}tr[data-tenant-row]:hover td{background:#f3effc}tr[data-tenant-row]:focus-within td{background:#f3effc}
.tenant-sections{margin:8px 0 23px;gap:20px}.section-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:25px 0 14px}.section-heading .eyebrow{margin-bottom:5px}.section-heading h2{font-size:19px}.billing-priority{border:1px solid #dcd1f1;border-top:3px solid #6741d9}.billing-priority .card-heading{background:#fcfaff;border-bottom:1px solid #eee8f5;padding-bottom:17px}.billing-priority h3{font-size:13px}.billing-highlights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:24px 0}.billing-highlights>div{padding:0 23px;border-right:1px solid #ede9f2}.billing-highlights>div:last-child{border:0}.billing-highlights span{display:block;font-size:11px;color:#746c7d}.billing-highlights strong{display:block;font-size:22px;letter-spacing:-.6px;line-height:1.3;margin:10px 0}.billing-highlights small{display:block;font-size:10px;line-height:1.7;color:#7c7486}.trial-highlight strong{color:#6741d9}.billing-foot{padding:13px 23px;background:#faf9fc;border-top:1px solid #eee8f5;display:flex;gap:12px 27px;flex-wrap:wrap;font-size:10px;color:#77707e}.billing-foot p{width:100%;line-height:1.7}.billing-foot b{font-weight:500;color:#4d4359}.tenant-summary .metric strong{font-size:24px}.tenant-summary .metric{border-top:1px solid #e3e3e8;padding:16px 20px}.tenant-summary .metric>div{font-size:10px}.tenant-summary{margin-top:-8px}section[id],article[id]{scroll-margin-top:20px}
@media(max-width:1100px){.billing-highlights{grid-template-columns:1fr 1fr;gap:24px 0}.billing-highlights>div:nth-child(2){border:0}.billing-highlights strong{font-size:21px}}
@media(max-width:580px){.billing-highlights>div{padding:0 15px}.billing-highlights strong{font-size:18px}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}.section-heading h2{font-size:18px}.tenant-sections{gap:13px 20px}.billing-foot{padding:13px 15px}}

.tenant-page .page-heading{padding:18px 23px;margin-bottom:16px}.tenant-page .demo-banner{margin-bottom:16px}.tenant-page .toolbar{margin-bottom:12px}.tenant-page .back{margin-bottom:8px}.tenant-page .tenant-sections{margin-top:0;margin-bottom:12px;padding-bottom:10px}.tenant-page .section-heading{margin-top:16px}

.chart-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 23px 18px}.chart-tabs a{font-size:10px;padding:7px 9px;background:#f5f2fa;border:1px solid #e4dfee;color:#78658e}.chart-tabs a.active{background:#6741d9;color:#fff;border-color:#6741d9}.chart-currency{display:flex;gap:8px;align-items:center;padding:0 23px 17px;font-size:11px}.chart-values{margin:15px 23px 0;font-size:11px;color:#79668f}.chart-values summary{cursor:pointer}.chart-values-scroll{max-height:240px;overflow:auto;margin-top:10px}.chart-empty{padding:40px 23px;color:#777;font-size:12px}.distribution-bars{padding:0 23px 23px;display:grid;gap:15px}.distribution-row{display:grid;grid-template-columns:160px 1fr 30px;align-items:center;gap:16px;font-size:12px}.distribution-row meter{width:100%;height:18px}.distribution-row meter::-webkit-meter-bar{background:#eee9f6;border:0;border-radius:0}.distribution-row meter::-webkit-meter-optimum-value{background:#9676d9}.distribution-row meter::-moz-meter-bar{background:#9676d9}.note-entry{border-left:2px solid #dfd3f3;padding:0 0 20px 15px;margin-bottom:18px}.note-entry header{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:11px;align-items:baseline}.note-entry time,.note-entry header>span{color:#90829e;font-size:10px}.note-entry .note-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;font-size:12px;line-height:1.7}.note-entry small{display:block;color:#897d94;margin-top:10px}.history-pagination{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:580px){.distribution-row{grid-template-columns:100px 1fr 25px;gap:9px;font-size:11px}.distribution-card .card-heading{flex-direction:column}.chart-tabs{padding-left:17px;padding-right:17px}}

/* Persistent area navigation, separate from the current area's pages. */
.area-navigation { display:grid; gap:4px; padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid #dcdce0; }
.area-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:1px solid transparent; background:transparent; color:#59595f; font:inherit; font-size:12px; text-align:left; }
.area-item>span { width:16px; font-size:17px; }
.area-item.active { background:#fff; border-color:#ded9eb; color:#6741d9; font-weight:600; }
.area-item small { margin-left:auto; font-size:9px; color:#8a8a90; font-weight:400; }
.area-item:disabled { color:#85858a; cursor:not-allowed; }
@media(max-width:580px) { .area-navigation { grid-template-columns:repeat(3,minmax(0,1fr)); padding-bottom:12px; margin-bottom:10px; gap:3px; } .area-item { padding:9px 6px; gap:5px; font-size:10px; flex-wrap:wrap; } .area-item small { width:100%; margin-left:21px; } }

.billing-metrics { border-top:1px solid var(--line); padding:22px 23px; }
.billing-metrics-heading p,.billing-metrics p { color:#777; font-size:11px; line-height:1.7; margin-top:6px; }
.quota-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:22px; }
.quota-item>span { font-size:11px; color:#777; }
.quota-item strong,.operational-grid strong { display:block; font-size:21px; margin-top:10px; }
.quota-item strong small { font-size:12px; font-weight:400; color:#777; }
.quota-item meter { width:100%; height:12px; margin-top:10px; }
.quota-item meter::-webkit-meter-bar { background:#efedf2; border:0; border-radius:0; }
.quota-item meter::-webkit-meter-optimum-value { background:#987bd1; }
.environment-staging .quota-item meter::-webkit-meter-optimum-value { background:#b99a6c; }
.billing-metrics .metrics-explanation { margin-top:18px; }
.billing-metrics .cap-warning { color:#9b601b; font-weight:600; }
.operational-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-top:1px solid var(--line); margin-top:22px; padding-top:22px; }
.operational-grid>div { min-width:0; overflow-wrap:anywhere; }
.unresolved-billing { margin-top:24px; border-top:1px solid var(--line); padding-top:22px; }
.unresolved-billing table { margin-top:14px; }
@media(max-width:850px) { .quota-grid,.operational-grid { grid-template-columns:1fr; gap:18px; } }