/**
 * Blink Billing — project tokens (blink.mk brand + finance semantics)
 *
 * --color-primary     → Blink brand red (#ef4444) — actions, nav, links
 * --bl-finance-profit → Emerald — income / positive amounts (NOT brand red)
 * --bl-finance-loss   → Rose — expenses / negative amounts (NOT brand red)
 */

:root,
[data-theme="light"],
[data-theme="dark"] {
  --bl-finance-profit: oklch(52.7% 0.137 163.225); /* #059669 emerald-600 */
  --bl-finance-loss: oklch(44.4% 0.177 13.697);   /* #be123c rose-700 */
  --bl-finance-profit-muted: color-mix(in oklch, var(--bl-finance-profit) 16%, transparent);
  --bl-finance-loss-muted: color-mix(in oklch, var(--bl-finance-loss) 16%, transparent);
}

/* Finance chart / legend utilities */
.bg-finance-profit {
  background-color: var(--bl-finance-profit);
}

.bg-finance-loss {
  background-color: var(--bl-finance-loss);
}

.text-finance-profit {
  color: var(--bl-finance-profit);
}

.text-finance-loss {
  color: var(--bl-finance-loss);
}

.finance-bar-profit {
  fill: var(--bl-finance-profit);
}

.finance-bar-loss {
  fill: var(--bl-finance-loss);
}

.border-finance-profit {
  border-color: color-mix(in oklch, var(--bl-finance-profit) 45%, transparent);
}

.border-finance-loss {
  border-color: color-mix(in oklch, var(--bl-finance-loss) 45%, transparent);
}

/* --------------------------------------------------------------------------
   Render stability (FOUC / CLS) — complements Blinkstrap theme.css
   -------------------------------------------------------------------------- */

/* Alpine x-cloak: missing from Blinkstrap theme; without this, x-show panels flash */
[x-cloak] {
  display: none !important;
}

/* Global slide-over drawer: do not rely on Tailwind utilities before @tailwindcss/browser runs */
#bl-drawer-aside {
  transform: translateX(100%);
}

#bl-drawer-panel.bl-drawer-open #bl-drawer-aside {
  transform: translateX(0);
}

#bl-drawer-panel:not(.bl-drawer-open) .bl-drawer-backdrop {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* Sidebar closed preference (set in layout_bootstrap.html before paint) */
@media (min-width: 1024px) {
  html.bl-sidebar-pref-closed #bl-layout:not(.sidebar-disabled) #bl-sidebar {
    transform: translateX(-101%);
  }

  html.bl-sidebar-pref-closed #bl-layout:not(.sidebar-disabled) #bl-main-shell {
    margin-left: 0;
    width: 100%;
  }
}