/* OX Billing — full responsive dashboard page compositions. */
.theme-dashboard[hidden],
.catalog-content[hidden] { display:none !important; }
.theme-dashboard { width:100%; padding:8px 0 24px; }
.tdash { display:flex; flex-direction:column; gap:20px; color:var(--text); }
.tdash h1,.tdash h2,.tdash p { margin:0; }
.tdash h1 { font-size:clamp(23px,3vw,34px); line-height:1.12; letter-spacing:-.035em; font-weight:850; }
.tdash h2 { font-size:16px; line-height:1.3; font-weight:800; }
.tdash p { color:var(--text-muted); font-size:13px; line-height:1.55; }
.tdash-eyebrow { display:block; margin-bottom:7px; color:var(--primary); font-size:9px; line-height:1.3; font-weight:850; letter-spacing:.13em; }
.tdash-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.tdash-heading--split { align-items:center; }
.tdash-heading p { margin-top:8px; }
.tdash-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 15px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--app-surface); color:var(--text); font:700 12px/1.2 system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.tdash-button:hover { transform:translateY(-1px); border-color:var(--primary); }
.tdash-button--primary { border-color:transparent; background:var(--primary); color:var(--dashboard-button-ink,#fff); box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 20%,transparent); }
.tdash-button--quiet { background:transparent; color:var(--primary); }
.tdash-text-link { display:inline-flex; align-items:center; gap:7px; border:0; padding:6px 0; background:transparent; color:var(--primary); font:750 11px/1.2 system-ui,sans-serif; cursor:pointer; }
.tdash-panel { min-width:0; padding:18px; border:1px solid var(--border-subtle); border-radius:16px; background:var(--app-surface); box-shadow:0 9px 28px rgba(15,30,45,.07); }
.tdash-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tdash-panel-heading .tdash-eyebrow { margin-bottom:4px; }
.tdash-metrics { display:grid; gap:12px; }
.tdash-metrics--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tdash-metrics--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tdash-metric { display:flex; align-items:center; gap:13px; min-width:0; padding:15px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--app-surface); }
.tdash-metric-icon,.tdash-product-icon,.tdash-wallet-icon,.tdash-panel-icon,.tdash-callout-icon,.tdash-summary-icon,.tdash-activity-icon,.tdash-service-icon { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--primary) 13%,var(--app-bg)); color:var(--primary); font-size:16px; }
.tdash-metric small,.tdash-metric strong,.tdash-metric em { display:block; }
.tdash-metric small { color:var(--text-muted); font-size:10px; }
.tdash-metric strong { margin-top:3px; font-size:20px; line-height:1; font-weight:850; }
.tdash-metric em { margin-top:5px; color:var(--text-muted); font-size:9px; font-style:normal; }
.tdash-columns { display:grid; gap:16px; }
.tdash-columns--service-wallet { grid-template-columns:minmax(0,1.8fr) minmax(220px,.8fr); align-items:stretch; }
.tdash-columns--blue { grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); align-items:stretch; }
.tdash-columns--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tdash-panel--services { padding:18px 18px 10px; }
.tdash-service-list { display:flex; flex-direction:column; }
.tdash-service-row { display:grid; grid-template-columns:40px minmax(120px,1fr) minmax(75px,auto) minmax(90px,auto) auto; align-items:center; gap:12px; min-height:68px; padding:10px 0; border-top:1px solid var(--border-subtle); }
.tdash-service-row:first-child { border-top:0; }
.tdash-service-icon { width:36px; height:36px; flex-basis:36px; font-size:14px; }
.tdash-service-info { min-width:0; }
.tdash-service-info strong,.tdash-service-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdash-service-info strong { font-size:12px; }
.tdash-service-info small,.tdash-service-date { color:var(--text-muted); font-size:10px; }
.tdash-service-status,.tdash-table-status { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:10px; white-space:nowrap; }
.tdash-service-status i,.tdash-table-status::before { width:7px; height:7px; border-radius:50%; background:#929aa7; }
.tdash-service-status.is-active,.tdash-table-status.is-active { color:var(--neon-green); }
.tdash-service-status.is-active i,.tdash-table-status.is-active::before { background:var(--neon-green); box-shadow:0 0 9px color-mix(in srgb,var(--neon-green) 45%,transparent); }
.tdash-link-button,.tdash-icon-button { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 10px; border:1px solid var(--border-subtle); border-radius:9px; background:transparent; color:var(--primary); font:700 10px system-ui,sans-serif; white-space:nowrap; cursor:pointer; }
.tdash-icon-button { width:34px; padding:0; }
.tdash-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:165px; padding:22px; color:var(--text-muted); text-align:center; }
.tdash-empty>i { color:var(--primary); font-size:24px; }
.tdash-empty strong { color:var(--text); font-size:13px; }
.tdash-empty span { max-width:360px; font-size:11px; line-height:1.5; }
.tdash-empty--compact { min-height:80px; flex-direction:row; justify-content:flex-start; }
.tdash-wallet-panel { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; min-height:240px; }
.tdash-wallet-panel .tdash-eyebrow { margin:4px 0 0; }
.tdash-wallet-panel>small { color:var(--text-muted); font-size:10px; }
.tdash-wallet-icon { width:46px; height:46px; flex-basis:46px; font-size:18px; }
.tdash-balance-value { font-size:clamp(24px,3vw,34px); line-height:1; letter-spacing:-.04em; }
.tdash-wallet-panel .tdash-button { width:100%; margin-top:8px; }

/* Light SaaS template: welcome banner, stat strip, domain search and recent services. */
.tdash-blue-hero { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:155px; overflow:hidden; padding:26px 30px; border:1px solid var(--border-subtle); border-radius:20px; background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 9%,var(--app-surface)),var(--app-surface)); }
.tdash-blue-hero p { margin-top:8px; }
.tdash-hero-mark { display:grid; place-items:center; width:132px; height:132px; border-radius:50%; background:color-mix(in srgb,var(--primary) 9%,transparent); color:color-mix(in srgb,var(--primary) 50%,var(--app-surface)); font-size:56px; }
.tdash-domain-search p { max-width:520px; margin-bottom:13px; }
.tdash-panel-icon { flex-basis:38px; width:38px; height:38px; }
.tdash-domain-form { display:flex; gap:8px; }
.tdash-domain-form input { flex:1; min-width:0; height:42px; padding:0 12px; border:1px solid var(--border-subtle); border-radius:10px; outline:none; background:var(--app-bg); color:var(--text); font:12px system-ui,sans-serif; }
.tdash-domain-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); }
.tdash-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tdash-recent .tdash-service-row { grid-template-columns:36px minmax(120px,1fr) minmax(70px,auto) auto; }
.tdash-recent .tdash-service-date { display:none; }
.tdash-service-row--compact .tdash-link-button { min-height:28px; }

/* Violet operations template: dense table and command cards. */
.tdash--violet .tdash-metric { min-height:82px; background:linear-gradient(145deg,var(--app-surface),color-mix(in srgb,var(--primary) 5%,var(--app-surface))); }
.tdash--violet .tdash-metric-icon { background:color-mix(in srgb,var(--primary) 20%,var(--app-bg)); }
.tdash-ops-table { padding-bottom:8px; }
.tdash-table-scroll { overflow-x:auto; }
.tdash-table-scroll table { width:100%; border-collapse:collapse; font-size:11px; }
.tdash-table-scroll th { padding:10px 9px; color:var(--text-muted); font-size:9px; font-weight:700; text-align:left; white-space:nowrap; }
.tdash-table-scroll td { padding:10px 9px; border-top:1px solid var(--border-subtle); color:var(--text-muted); white-space:nowrap; }
.tdash-table-scroll td:first-child { min-width:150px; color:var(--text); }
.tdash-table-scroll td:first-child strong,.tdash-table-scroll td:first-child small { display:block; }
.tdash-table-scroll td:first-child strong { font-size:11px; }
.tdash-table-scroll td:first-child small { margin-top:3px; color:var(--text-muted); font-size:9px; }
.tdash-type-pill { display:inline-flex; padding:5px 8px; border-radius:7px; background:color-mix(in srgb,var(--primary) 15%,var(--app-bg)); color:var(--primary); font-size:9px; font-weight:750; }
.tdash-type-pill--domain { color:var(--neon-green); background:color-mix(in srgb,var(--neon-green) 12%,var(--app-bg)); }
.tdash-type-pill--reseller { color:var(--neon-purple); background:color-mix(in srgb,var(--neon-purple) 12%,var(--app-bg)); }
.tdash-table-status::before { display:inline-block; content:''; }
.tdash-callout { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:17px; border:1px solid var(--border-subtle); border-radius:15px; background:var(--app-surface); }
.tdash-callout--accent { background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 14%,var(--app-surface)),var(--app-surface)); }
.tdash-callout-icon { width:40px; height:40px; }
.tdash-callout h2 { font-size:13px; }
.tdash-callout p { margin-top:4px; font-size:10px; }

/* Warm catalog template: three large service-selection cards and account shortcuts. */
.tdash-warm-hero { display:flex; align-items:center; justify-content:space-between; min-height:145px; padding:24px 26px; border-radius:18px; background:var(--app-surface); }
.tdash-warm-hero .tdash-eyebrow { color:var(--neon-green); }
.tdash-warm-hero p { margin-top:8px; }
.tdash-leaf-mark { display:grid; place-items:center; width:78px; height:78px; border-radius:24px 6px 24px 6px; background:color-mix(in srgb,var(--neon-green) 12%,var(--app-bg)); color:var(--neon-green); font-size:30px; transform:rotate(-7deg); }
.tdash-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tdash-product-card { display:flex; flex-direction:column; min-height:255px; padding:20px; border:1px solid var(--border-subtle); border-radius:17px; background:var(--app-surface); box-shadow:0 12px 28px rgba(64,57,40,.07); }
.tdash-product-icon { width:48px; height:48px; flex-basis:48px; margin-bottom:14px; border-radius:15px; background:color-mix(in srgb,var(--neon-green) 12%,var(--app-bg)); color:var(--neon-green); font-size:20px; }
.tdash-product-card h2 { font-size:18px; }
.tdash-product-card p { margin-top:7px; font-size:12px; }
.tdash-product-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:18px; }
.tdash-product-foot small { color:var(--text-muted); font-size:9px; }
.tdash-product-card--reseller .tdash-product-icon { color:var(--neon-purple); background:color-mix(in srgb,var(--neon-purple) 13%,var(--app-bg)); }
.tdash-product-card--domain .tdash-product-icon { color:var(--neon-cyan); background:color-mix(in srgb,var(--neon-cyan) 13%,var(--app-bg)); }
.tdash-warm-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; border:1px solid var(--border-subtle); border-radius:15px; background:var(--app-surface); }
.tdash-summary-link { display:flex; align-items:center; gap:13px; min-width:0; padding:9px 14px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.tdash-summary-link+ .tdash-summary-link { border-left:1px solid var(--border-subtle); }
.tdash-summary-icon { width:44px; height:44px; flex-basis:44px; color:var(--neon-green); background:color-mix(in srgb,var(--neon-green) 12%,var(--app-bg)); }
.tdash-summary-link span:nth-child(2) { min-width:0; flex:1; }
.tdash-summary-link small,.tdash-summary-link strong { display:block; }
.tdash-summary-link small { color:var(--text-muted); font-size:10px; }
.tdash-summary-link strong { margin-top:2px; font-size:19px; }
.tdash-summary-link>i:last-child { color:var(--text-muted); font-size:11px; }

/* Green account template: wallet hero, service KPIs and real recent transactions. */
.tdash-green-grid { display:grid; grid-template-columns:minmax(260px,1.15fr) minmax(0,1fr); gap:13px; }
.tdash-wallet-hero { display:flex; flex-direction:column; justify-content:center; min-height:210px; padding:20px; border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border-subtle)); border-radius:17px; background:linear-gradient(130deg,color-mix(in srgb,var(--primary) 24%,var(--app-surface)),var(--app-surface)); }
.tdash-wallet-top { display:flex; align-items:center; gap:12px; }
.tdash-wallet-top small,.tdash-wallet-top strong { display:block; }
.tdash-wallet-top small { color:var(--text-muted); font-size:10px; }
.tdash-wallet-top strong { margin-top:3px; font-size:clamp(25px,3vw,34px); line-height:1; }
.tdash-wallet-status { display:flex; align-items:center; gap:7px; margin:16px 0; color:var(--text-muted); font-size:10px; }
.tdash-wallet-status i { width:8px; height:8px; border-radius:50%; background:var(--neon-green); box-shadow:0 0 10px var(--neon-green); }
.tdash-wallet-hero .tdash-button { align-self:flex-start; min-width:150px; }
.tdash-green-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tdash-green-metrics .tdash-metric { min-height:96px; }
.tdash-green-metrics .tdash-metric:last-child { grid-column:1 / -1; }
.tdash-activity-list { display:flex; flex-direction:column; }
.tdash-activity-row { display:flex; align-items:center; gap:11px; min-height:58px; padding:9px 0; border-top:1px solid var(--border-subtle); }
.tdash-activity-row:first-child { border-top:0; }
.tdash-activity-icon { width:34px; height:34px; flex-basis:34px; border-radius:11px; font-size:12px; }
.tdash-activity-copy { min-width:0; flex:1; }
.tdash-activity-copy strong,.tdash-activity-copy small { display:block; }
.tdash-activity-copy strong { font-size:11px; }
.tdash-activity-copy small { margin-top:3px; color:var(--text-muted); font-size:9px; }
.tdash-activity-amount { font-size:11px; white-space:nowrap; }
.tdash-activity-empty { display:flex; align-items:center; gap:10px; min-height:56px; color:var(--text-muted); font-size:11px; }

body[data-theme="teal"] { --dashboard-button-ink:#06252a; }
body[data-theme="blue"] { --dashboard-button-ink:#fff; }
body[data-theme="violet"] { --dashboard-button-ink:#fff; }
body[data-theme="warm"] { --dashboard-button-ink:#fff; }
body[data-theme="green"] { --dashboard-button-ink:#05251b; }

@media(max-width:900px) {
  .tdash-columns--service-wallet,.tdash-columns--blue { grid-template-columns:1fr; }
  .tdash-columns--service-wallet { grid-template-columns:minmax(0,1fr) 240px; }
  .tdash-green-grid { grid-template-columns:1fr; }
  .tdash-green-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tdash-green-metrics .tdash-metric:last-child { grid-column:auto; }
}
@media(max-width:680px) {
  .theme-dashboard { padding-top:2px; }
  .tdash { gap:14px; }
  .tdash-heading,.tdash-heading--split { align-items:flex-start; flex-direction:column; }
  .tdash-heading--split>.tdash-button { width:100%; }
  .tdash-metrics--four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .tdash-metrics--three { gap:8px; }
  .tdash-metric { gap:9px; padding:11px; }
  .tdash-metric-icon { width:34px; height:34px; flex-basis:34px; border-radius:10px; font-size:13px; }
  .tdash-metric strong { font-size:17px; }
  .tdash-columns--service-wallet,.tdash-columns--two { grid-template-columns:1fr; }
  .tdash-wallet-panel { min-height:0; }
  .tdash-blue-hero { min-height:130px; padding:20px; }
  .tdash-hero-mark { width:64px; height:64px; flex:0 0 64px; font-size:26px; }
  .tdash-product-grid { grid-template-columns:1fr; }
  .tdash-product-card { min-height:0; display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:13px; padding:15px; }
  .tdash-product-icon { grid-row:1 / span 2; margin:0; }
  .tdash-product-card h2 { align-self:end; font-size:15px; }
  .tdash-product-card p { margin-top:4px; }
  .tdash-product-foot { grid-column:1 / -1; padding-top:12px; }
  .tdash-warm-hero { min-height:0; padding:19px; }
  .tdash-leaf-mark { width:52px; height:52px; flex:0 0 52px; font-size:22px; }
  .tdash-warm-summary { padding:7px; }
  .tdash-summary-link { gap:8px; padding:8px; }
  .tdash-summary-icon { width:36px; height:36px; flex-basis:36px; }
  .tdash-summary-link strong { font-size:15px; }
  .tdash-callout { grid-template-columns:38px minmax(0,1fr); }
  .tdash-callout>.tdash-button { grid-column:1 / -1; width:100%; }
  .tdash-service-row { grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:6px 8px; min-height:62px; }
  .tdash-service-date { display:none; }
  .tdash-service-status { grid-column:2; grid-row:2; justify-self:start; }
  .tdash-link-button { grid-column:3; grid-row:2; justify-self:end; min-height:27px; }
  .tdash-recent .tdash-service-row { grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:auto; }
  .tdash-recent .tdash-service-row .tdash-service-status { display:none; }
  .tdash-recent .tdash-service-row .tdash-link-button { grid-column:3; grid-row:1; }
  .tdash-panel { padding:14px; }
  .tdash-panel--services { padding-bottom:6px; }
  .tdash-table-scroll table { min-width:620px; }
}
@media(max-width:390px) {
  .tdash-metrics--three { grid-template-columns:1fr; }
  .tdash-blue-hero { gap:8px; }
  .tdash-warm-summary { grid-template-columns:1fr; }
  .tdash-summary-link+ .tdash-summary-link { border-left:0; border-top:1px solid var(--border-subtle); }
  .tdash-domain-form { flex-direction:column; }
  .tdash-domain-form .tdash-button { width:100%; }
  .tdash-green-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tdash-green-metrics .tdash-metric:last-child { grid-column:1 / -1; }
}


/* Live catalog tariff cards embedded in all five home compositions. */
.tdash-catalog-preview { margin-top:0; }
.tdash-tariff-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.tdash-tariff-card { display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:8px 11px; min-width:0; padding:14px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--app-bg); }
.tdash-tariff-icon { grid-column:1; grid-row:1 / span 2; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:color-mix(in srgb,var(--primary) 13%,var(--app-surface)); color:var(--primary); }
.tdash-tariff-copy { min-width:0; }
.tdash-tariff-copy small,.tdash-tariff-copy strong,.tdash-tariff-copy span { display:block; overflow:hidden; text-overflow:ellipsis; }
.tdash-tariff-copy small { color:var(--text-muted); font-size:9px; }
.tdash-tariff-copy strong { margin-top:2px; color:var(--text); font-size:12px; white-space:nowrap; }
.tdash-tariff-copy span { margin-top:3px; color:var(--text-muted); font-size:9px; white-space:nowrap; }
.tdash-tariff-price { grid-column:2; color:var(--text); font-size:14px; font-weight:850; white-space:nowrap; }
.tdash-tariff-price small { color:var(--text-muted); font-size:9px; font-weight:500; }
.tdash-tariff-link { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; min-height:32px; padding:0 2px; border:0; border-top:1px solid var(--border-subtle); background:transparent; color:var(--primary); font:750 10px system-ui,sans-serif; cursor:pointer; }
.tdash-tariff-link i { font-size:10px; }
.tdash-tariff-card--reseller .tdash-tariff-icon { color:var(--neon-purple); background:color-mix(in srgb,var(--neon-purple) 12%,var(--app-surface)); }
.tdash-tariff-card--domain .tdash-tariff-icon { color:var(--neon-green); background:color-mix(in srgb,var(--neon-green) 12%,var(--app-surface)); }
body[data-theme="teal"] .tdash-tariff-card { border-radius:11px; }
body[data-theme="blue"] .tdash-tariff-card { background:#fff; box-shadow:0 5px 15px rgba(22,65,114,.06); }
body[data-theme="violet"] .tdash-tariff-card { background:linear-gradient(145deg,var(--app-bg),color-mix(in srgb,var(--primary) 4%,var(--app-bg))); }
body[data-theme="warm"] .tdash-tariff-card { background:#fffdf7; border-radius:17px; box-shadow:0 7px 18px rgba(83,71,48,.05); }
body[data-theme="green"] .tdash-tariff-card { background:color-mix(in srgb,var(--primary) 4%,var(--app-bg)); border-color:color-mix(in srgb,var(--primary) 18%,var(--border-subtle)); }
@media(max-width:900px) { .tdash-tariff-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .tdash-tariff-grid { grid-template-columns:1fr; gap:8px; } .tdash-tariff-card { padding:12px; } }

/* Keep the warm catalog-first screen compact enough for live tariff previews to surface sooner. */
@media(min-width:681px) {
  body[data-theme="warm"] .tdash-product-card { min-height:176px; padding:17px; }
  body[data-theme="warm"] .tdash-product-icon { margin-bottom:10px; }
  body[data-theme="warm"] .tdash-product-foot { padding-top:12px; }
}