/* Vuega look for Kaneo: Albert Sans, soft blue surfaces, blue accent. Only overrides Kaneo's own variables. */
:root {
  --font-sans: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
}
:root:not(.dark) {
  --background: #f7f9fd;
  --foreground: #1f2533;
  --card: #ffffff;
  --card-foreground: #1f2533;
  --popover: #ffffff;
  --popover-foreground: #1f2533;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #e8eefb;
  --secondary-foreground: #1f2533;
  --muted: #edf2fc;
  --muted-foreground: #5b6478;
  --accent: #e3ebfb;
  --accent-foreground: #1f2533;
  --border: #e2e8f3;
  --input: #dfe5f1;
  --ring: #2563eb;
  --sidebar: #f7f9fd;
  --sidebar-foreground: #1f2533;
  --sidebar-accent: #e3ebfb;
  --sidebar-accent-foreground: #1d4ed8;
  --sidebar-border: #e2e8f3;
  --sidebar-primary: #2563eb;
  --sidebar-primary-foreground: #ffffff;
  --radius: 0.75rem;
}
.dark {
  --primary: #5b8def;
  --primary-foreground: #ffffff;
  --ring: #5b8def;
  --sidebar-primary: #5b8def;
}
html, body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Posted comments: tint the whole comment card (the innermost bordered box around a read-only comment body). */
[class*="border"]:has(.kaneo-comment-editor-shell-readonly):not(:has([class*="border"] .kaneo-comment-editor-shell-readonly)) {
  background: color-mix(in srgb, var(--primary) 9%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  border-left: 3px solid var(--primary) !important;
}
.kaneo-comment-editor-shell-readonly { background: transparent; font-size: 0.875rem; line-height: 1.55; }

/* Description and comment text: Albert Sans 14px, like the reference. */
.kaneo-comment-editor-prose, .kaneo-comment-editor-content .ProseMirror {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6;
}
:root:not(.dark) .kaneo-comment-editor-prose, :root:not(.dark) .kaneo-comment-editor-content .ProseMirror { color: #1f1f1f; }

/* Ticket header: spread Status / Priority / Assignee / Start date / Due date across the width, with a label above each. */
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  align-items: end;
  gap: 0.75rem 1.25rem !important;
  padding: 0.875rem 1.25rem 0.75rem !important;
}
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > * {
  position: relative;
  margin-top: 1.25rem;
  width: fit-content;
  max-width: 100%;
}
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > *::before {
  position: absolute;
  top: -1.3rem;
  left: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
  pointer-events: none;
}
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > :nth-child(1)::before { content: "Status"; }
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > :nth-child(2)::before { content: "Priority"; }
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > :nth-child(3)::before { content: "Assignee"; }
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > :nth-child(4)::before { content: "Start date"; }
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full > :nth-child(5)::before { content: "Due date"; }
.flex.flex-row.flex-wrap.gap-1.items-center.p-2.w-full .text-xs { font-size: 0.875rem; }