/* ============================================================================
   Client-area dashboard rebuild - refines the existing .ca-* dashboard to the
   approved preview (workspace/site-redesign/clientarea-preview.html):
   legible glass cards over the aurora, greeting status chip, gradient quick-action
   icon squares, glass home panels, and the clashing stock promo hidden.
   ADDITIVE override - loaded after ca-v4-6.css; reversible by removing the <link>.
   Uses the ca-theme --panel/--accent tokens so it follows light/dark x blue/coral.
   ============================================================================ */

/* greeting status chip */
.ca-head .ca-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:#0e9f6e;background:rgba(18,183,106,.13);border-radius:99px;padding:4px 11px;margin-top:9px}
body[data-mode="dark"] .ca-head .ca-chip,html.lagom-dark-mode .ca-head .ca-chip{color:#3ddc97}
.ca-head .ca-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ca-head .ca-chip.ca-chip-warn{color:#b45309;background:rgba(224,168,60,.16)}
body[data-mode="dark"] .ca-head .ca-chip.ca-chip-warn,html.lagom-dark-mode .ca-head .ca-chip.ca-chip-warn{color:#fbbf24}

/* KPI cards -> legible glass (near-opaque so they never wash out over the aurora) */
#main-body .ca-stat{
  background:color-mix(in srgb,var(--panel) 84%,transparent)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.15);backdrop-filter:blur(11px) saturate(1.15);
  border:1px solid var(--line)!important;border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px -20px rgba(8,12,20,.6)!important;
}
#main-body .ca-stat-ic{background:var(--accent-bg)!important;color:var(--accent)!important;border:0!important}
#main-body .ca-stat b{font-size:28px}

/* quick-action tiles -> glass + gradient icon square */
#main-body .ca-quick-a{
  background:color-mix(in srgb,var(--panel) 84%,transparent)!important;
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border:1px solid var(--line)!important;border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;padding:12px 13px!important;gap:12px!important;
}
#main-body .ca-quick-a i,#main-body .ca-quick-a svg{
  width:36px!important;height:36px!important;border-radius:10px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent))!important;
  color:#fff!important;display:inline-grid!important;place-items:center;font-size:15px!important;flex:none;
  box-shadow:0 6px 16px -8px var(--accent);
}

/* home panels (services/tickets/news/renewals) -> glass */
#main-body .client-home-cards .card{
  background:color-mix(in srgb,var(--panel) 84%,transparent)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.15);backdrop-filter:blur(11px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px -20px rgba(8,12,20,.6)!important;
}

/* hide the stock "Recommended for you" promo (clashes with the theme) */
#main-body .promo-container{display:none!important}

/* client-area rail: on mobile it becomes a horizontal scroller - hide the ugly
   scrollbar (the partial next-tab is a fine "more" affordance on its own) */
#main-body .ca-side-rail nav{scrollbar-width:none;-ms-overflow-style:none}
#main-body .ca-side-rail nav::-webkit-scrollbar{display:none;height:0;width:0}

/* ============================================================================
   Inner client-area pages (services / invoices / tickets / domains / details) -
   bring them up to the modernized dashboard: coral accent (was hardwired blue),
   glass table cards, and semantic status pills. Reversible; scoped to #main-body.
   ============================================================================ */
/* coral accent finally reaches inner pages - --accent is already accent-aware,
   so this follows whatever theme the visitor picks (coral or blue) */
#main-body{--w-acc:var(--accent,#e8502e);--w-acc-deep:var(--accent-text,#ff6b4a)}
/* glass table shell to match the dashboard's card look */
#main-body .table-container{
  padding:10px;
  background:color-mix(in srgb, var(--panel,#fff) 84%, transparent);
  border:1px solid var(--line,rgba(0,0,0,.10));
  border-radius:16px; overflow:hidden;
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.06);
}
#main-body .table-container .table-list{margin-bottom:0;background:transparent}
/* semantic status pills: active/paid = green, unpaid/overdue/suspended = red,
   everything else (cancelled/terminated/pending) stays neutral grey */
#main-body .label.status-active,#main-body .label.status-paid,#main-body .label.status-completed{
  background:rgba(34,197,94,.16)!important;color:#15803d!important;border:1px solid rgba(34,197,94,.30)!important}
#main-body .label.status-unpaid,#main-body .label.status-overdue,#main-body .label.status-suspended,#main-body .label.status-past_due{
  background:rgba(239,68,68,.15)!important;color:#b91c1c!important;border:1px solid rgba(239,68,68,.30)!important}
html[data-mode="dark"] #main-body .label.status-active,html[data-mode="dark"] #main-body .label.status-paid,html[data-mode="dark"] #main-body .label.status-completed,
html.lagom-dark-mode #main-body .label.status-active,html.lagom-dark-mode #main-body .label.status-paid{color:#4ade80!important}
html[data-mode="dark"] #main-body .label.status-unpaid,html[data-mode="dark"] #main-body .label.status-overdue,html[data-mode="dark"] #main-body .label.status-suspended,html[data-mode="dark"] #main-body .label.status-past_due,
html.lagom-dark-mode #main-body .label.status-unpaid,html.lagom-dark-mode #main-body .label.status-overdue{color:#f87171!important}
/* mobile: wide 5-col tables scroll rather than squish */
@media(max-width:600px){#main-body .table-container{overflow-x:auto}}