@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

/**
 * Shared shell styles for the Clarity app workspace (dashboard, reports, settings, …).
 * Clarity brand tokens — prefer these variables in new UI.
 */
:root {
  --clarity-page-bg: #f0efea;
  --clarity-surface: #ffffff;
  --clarity-surface-soft: #fafaf8;
  --clarity-hover-surface: #f7f7f5;
  --clarity-active-surface: #f0efea;
  --clarity-border: #e5e5e0;
  --clarity-text: #1a1a18;
  --clarity-text-secondary: #4a4a46;
  --clarity-text-muted: #9e9e96;
  --clarity-text-hint: #b0b0aa;
  --clarity-accent: #1d9e75;
  --clarity-accent-bright: #2fcf99;
  --clarity-accent-soft: rgba(29, 158, 117, 0.1);
  --clarity-badge-positive-bg: rgba(29, 158, 117, 0.12);
  --clarity-badge-positive-fg: #085041;
  --clarity-badge-negative-bg: rgba(226, 75, 74, 0.12);
  --clarity-badge-negative-fg: #791f1f;
  --clarity-badge-neutral-bg: rgba(55, 138, 221, 0.12);
  --clarity-badge-neutral-fg: #0c447c;
  --clarity-badge-warning-bg: rgba(239, 159, 39, 0.12);
  --clarity-badge-warning-fg: #633806;
  --clarity-v2-rail-width: 18rem;
  --clarity-v2-chart-primary: rgb(29, 158, 117);
  --clarity-v2-chart-grid: rgba(229, 229, 224, 0.95);
  --clarity-v2-chart-tick: #9e9e96;
}

* {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

body.v2-app {
  background: var(--clarity-page-bg);
  color: var(--clarity-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.dark body.v2-app {
  background: #09090b;
  color: #d4d4d8;
}

.glass {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
  backdrop-filter: none;
}

.dark .glass {
  background: rgba(24, 24, 27, 0.76);
  border-color: rgba(63, 63, 70, 0.85);
  box-shadow: none;
}

.metric {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
}

.panel {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
}

.dark .panel {
  background: rgba(24,24,27,0.82);
  border-color: rgba(63,63,70,0.9);
  box-shadow: none;
}

.dark .metric {
  background: linear-gradient(180deg, rgba(39,39,42,0.9), rgba(24,24,27,0.86));
  border-color: rgba(63,63,70,0.9);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  gap: 0.425rem;
  border-radius: 8px;
  padding: 0.55rem 0.78rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, opacity 150ms ease;
}

.btn-primary {
  background: var(--clarity-text);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.btn-muted {
  background: transparent;
  border: 1px solid var(--clarity-border);
  color: var(--clarity-text-secondary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.btn-muted:hover:not(:disabled) {
  background: var(--clarity-hover-surface);
  border-color: var(--clarity-border);
}

.dark .btn-muted {
  background: rgba(39, 39, 42, 0.9);
  border-color: rgba(63, 63, 70, 0.9);
  color: #f4f4f5;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

.mobile-safe {
  padding-top: env(safe-area-inset-top);
}

.skeleton {
  animation: pulse 1.5s ease-in-out infinite;
  background: #e2e8f0;
}

.mobile-drawer {
  transform: translateX(-100%);
  transition: transform 180ms ease;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.dark .skeleton { background: #27272a; }

@keyframes pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: .45; }
}

/* -------------------------------------------------------------------------- */
/* App shell: topbar + left rail (lg) + scrollable main */
/* Add class "v2-app" to <body>. Main column uses .v2-app__main on <main>.     */
/* -------------------------------------------------------------------------- */

.v2-app {
  color-scheme: light;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Native fields — Clarity form tokens */
.v2-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.v2-app select,
.v2-app textarea {
  color: var(--clarity-text-secondary);
  border: 1px solid var(--clarity-border);
  border-radius: 8px;
  background: var(--clarity-surface-soft);
}

.v2-app input::placeholder,
.v2-app textarea::placeholder {
  color: var(--clarity-text-hint);
}

.v2-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
.v2-app select:focus,
.v2-app textarea:focus {
  outline: none;
  border-color: var(--clarity-accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12) !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

.v2-app__row {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .v2-app__row {
    flex-direction: row;
    align-items: stretch;
  }
}

.v2-app__rail {
  display: none;
}

@media (min-width: 1024px) {
  .v2-app__rail {
    display: flex;
    flex-direction: column;
    width: var(--clarity-v2-rail-width);
    flex-shrink: 0;
    min-height: 0;
    align-self: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
  }

  .dark .v2-app__rail {
    border-right-color: rgb(39 39 42);
    background: rgb(9 9 11);
  }

  .v2-app__rail > aside {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
  }

  .v2-app__rail > aside > nav {
    flex: 1 1 auto;
  }

  .v2-app__rail > aside > div:last-of-type {
    margin-top: auto;
  }
}

.v2-app__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem 0.75rem 1rem;
}

@media (min-width: 640px) {
  .v2-app__main {
    padding: 1rem 1rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .v2-app__main {
    padding: 1rem 1.25rem 1.5rem;
  }
}

/* -------------------------------------------------------------------------
 * Shared primitives used across all v2 pages
 * ------------------------------------------------------------------------- */

/* Pill badge — slightly larger than .chip, supports a .dot child */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.71rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.pill .dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* Page header card */
.workspace-header {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
}

.dark .workspace-header {
  background: #18181b;
  border-color: #27272a;
}

/* Solid card */
.card {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
}

.dark .card {
  background: #18181b;
  border-color: #27272a;
}

/* Raised card */
.card-raised {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
}

.dark .card-raised {
  background: #18181b;
  border-color: #27272a;
  box-shadow: none;
}

/* KPI tile */
.kpi-card {
  background: var(--clarity-surface);
  border: 1px solid var(--clarity-border);
  box-shadow: none;
}

.dark .kpi-card {
  background: linear-gradient(180deg, #18181b 0%, #111113 100%);
  border-color: #27272a;
}

/* KPI typography */
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clarity-text-muted);
}

.dark .kpi-label { color: #a1a1aa; }

.kpi-value {
  margin-top: 0.45rem;
  font-size: clamp(1.45rem, 2vw, 2.08rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clarity-text);
}

.dark .kpi-value { color: #fafafa; }

.kpi-sub {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clarity-text-muted);
}

.dark .kpi-sub { color: #a1a1aa; }

/* Eyebrow / section label */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clarity-text-muted);
}

.dark .eyebrow { color: #a1a1aa; }

/* Range-pill selector bar (cash chart time-range controls) */
.range-pill-bar {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.range-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1;
  background: var(--clarity-hover-surface);
  color: var(--clarity-text-secondary);
  border: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}

.range-pill:hover:not(.active) {
  background: #ebeae6;
  color: var(--clarity-text);
}

.range-pill.active {
  background: var(--clarity-accent);
  color: #ffffff;
  box-shadow: none;
}

.dark .range-pill {
  background: #27272a;
  color: #a1a1aa;
}

.dark .range-pill:hover:not(.active) {
  background: #3f3f46;
  color: #f4f4f5;
}

.dark .range-pill.active {
  background: var(--clarity-accent);
  color: #ffffff;
}

/* -------------------------------------------------------------------------
 * Clarity shell chrome (topbar, sidebar rail, mobile drawer)
 * Overrides Tailwind utilities from shell.js without changing markup.
 * ------------------------------------------------------------------------- */

/* Accent / success CTA (non-primary) */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  gap: 0.425rem;
  border-radius: 8px;
  padding: 0.55rem 0.78rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--clarity-accent);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: none;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.btn-accent:hover:not(:disabled) {
  opacity: 0.92;
}

.btn-accent:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Topbar */
#shell-topbar > header {
  background: var(--clarity-surface) !important;
  border-bottom: 1px solid var(--clarity-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#shell-topbar > header > div {
  min-height: 56px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}

#shell-topbar header a[href] span.grid.h-10.w-10,
#shell-topbar header a[href] span.grid {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px;
  min-width: 36px;
  border-radius: 10px !important;
  background: var(--clarity-text) !important;
  color: var(--clarity-accent-bright) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

#shell-topbar header .text-sm.font-extrabold,
#shell-topbar header span.block.text-sm {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clarity-text) !important;
}

#shell-topbar header .text-xs.font-semibold.text-slate-500,
#shell-topbar header span.block.text-xs {
  color: var(--clarity-text-muted) !important;
}

#shell-topbar .btn.btn-muted {
  border: 1px solid var(--clarity-border);
  border-radius: 8px;
  background: transparent;
  color: var(--clarity-text-secondary);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

#shell-topbar .btn.btn-muted:hover:not(:disabled) {
  background: var(--clarity-hover-surface);
}

/* Primary sidebar + mobile-mounted nav (shell.js) */
body.v2-app a[data-clarity-nav] {
  position: relative;
  display: block;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-color: transparent;
}

body.v2-app a[data-clarity-nav]:not([aria-current="page"]) {
  background-color: transparent !important;
  color: var(--clarity-text-muted) !important;
  box-shadow: none !important;
}

body.v2-app a[data-clarity-nav]:not([aria-current="page"]):hover {
  background-color: var(--clarity-hover-surface) !important;
  color: var(--clarity-text) !important;
}

body.v2-app a[data-clarity-nav][aria-current="page"] {
  background-color: var(--clarity-active-surface) !important;
  color: var(--clarity-text) !important;
  font-weight: 500 !important;
  box-shadow: inset 2px 0 0 0 var(--clarity-accent) !important;
}

/* Desktop sidebar wordmark + subtitle */
#shell-sidebar aside > div > div.text-2xl.font-extrabold,
#mobile-shell-sidebar aside > div > div.text-2xl.font-extrabold {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.25rem;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--clarity-text) !important;
}

#shell-sidebar aside > div > div.text-2xl.font-extrabold::before,
#mobile-shell-sidebar aside > div > div.text-2xl.font-extrabold::before {
  content: "C";
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--clarity-text);
  color: var(--clarity-accent-bright);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}

#shell-sidebar aside > div > div.mt-1.text-xs,
#mobile-shell-sidebar aside > div > div.mt-1.text-xs {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--clarity-text-muted) !important;
}

#shell-sidebar aside > div > div.mt-1.text-xs.font-medium,
#mobile-shell-sidebar aside > div > div.mt-1.text-xs.font-medium {
  color: var(--clarity-text-muted) !important;
}

#shell-sidebar aside > div.border-t,
#mobile-shell-sidebar aside > div.border-t {
  border-color: var(--clarity-border) !important;
}

/* Mobile drawer shell header */
#mobile-menu-drawer {
  background: var(--clarity-surface) !important;
  border-right: 1px solid var(--clarity-border);
  box-shadow: none !important;
}

#mobile-menu-drawer .text-lg.font-black.text-blue-600,
#mobile-menu-drawer .text-blue-600 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--clarity-text) !important;
}

#mobile-menu-drawer .text-lg.font-black.text-blue-600::before,
#mobile-menu-drawer .text-blue-600::before {
  content: "C";
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--clarity-text);
  color: var(--clarity-accent-bright);
  font-weight: 800;
  font-size: 1rem;
}

#mobile-menu-drawer #mobile-menu-close {
  border: 1px solid var(--clarity-border);
  border-radius: 8px;
  background: transparent;
  color: var(--clarity-text-secondary);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

#mobile-menu-drawer #mobile-menu-close:hover {
  background: var(--clarity-hover-surface);
}