/* Remove shadow from all cards */
[data-slot="card"],
.bg-card {
    box-shadow: none;
}

/* Remove the left nav sidebar's right border line */
[class~="bg-sidebar"][class~="border-r"] {
    border-right: none;
}

/* SidebarInset's own <main> (BlazorBlueprint) is a flex item with no min-width:0, so it
 * never shrinks below its content's natural width — one unbreakable long string anywhere
 * on a page (e.g. a signal excerpt with no spaces near its truncation point) inflates the
 * whole sidebar+content row instead of being clipped/scrolled within the content area,
 * pushing the entire page wider than the viewport. Our own MainLayout.razor <main> already
 * has min-w-0; this is the one level up we can't add a class to directly. */
main[class~="flex-col"][class~="bg-background"][class~="h-full"] {
    min-width: 0;
}

/* Repo topology role badge colors (used via C# method — ensure Tailwind includes these) */
.bg-gray-100  { background-color: rgb(243 244 246); }
.text-gray-600 { color: rgb(75 85 99); }

/* Chat markdown prose */
.chat-markdown p            { margin-bottom: 0.5rem; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4           { font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.25rem; }
.chat-markdown h1           { font-size: 1rem; }
.chat-markdown h2           { font-size: 0.9375rem; }
.chat-markdown h3,
.chat-markdown h4           { font-size: 0.875rem; }
.chat-markdown ul,
.chat-markdown ol           { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.chat-markdown ul           { list-style-type: disc; }
.chat-markdown ol           { list-style-type: decimal; }
.chat-markdown li           { margin-bottom: 0.125rem; }
.chat-markdown code         { font-family: ui-monospace, monospace; font-size: 0.8125rem;
                              background: var(--muted); border-radius: 0.25rem;
                              padding: 0.1em 0.35em; }
.chat-markdown pre          { background: var(--muted); border-radius: 0.375rem;
                              padding: 0.75rem; overflow-x: auto; margin-bottom: 0.5rem; }
.chat-markdown pre code     { background: none; padding: 0; font-size: 0.8125rem; }
.chat-markdown strong       { font-weight: 600; }
.chat-markdown em           { font-style: italic; }
.chat-markdown blockquote   { border-left: 3px solid var(--border); padding-left: 0.75rem;
                              color: var(--muted-foreground); margin-bottom: 0.5rem; }
.chat-markdown hr           { border: none; border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent); margin: 0.75rem 0; }
.chat-markdown table        { border-collapse: collapse; width: 100%; margin-bottom: 0.5rem;
                              font-size: 0.8125rem; display: block; overflow-x: auto; }
.chat-markdown th,
.chat-markdown td           { border: 1px solid var(--border); padding: 0.25rem 0.5rem; text-align: left; }
.chat-markdown th           { background: var(--muted); font-weight: 600; }

/* Task detail tray — draggable resize handle */
.tray-resize-handle {
    width: 4px;
    flex-shrink: 0;
    align-self: stretch;
    cursor: col-resize;
    background-color: var(--border);
    transition: background-color 150ms ease;
    user-select: none;
    position: relative;
    z-index: 10;
}
.tray-resize-handle:hover,
.tray-resize-handle.dragging {
    background-color: color-mix(in oklch, var(--primary) 40%, transparent);
}
.tray-resize-handle.hidden {
    width: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Remove borders from all BbBadge elements.
   BbBadge always renders with rounded-full + text-xs + font-semibold.
   The Outline variant adds text-foreground and intentionally keeps its border. */
.rounded-full.text-xs.font-semibold:not(.text-foreground) {
    border-width: 0;
}

/* Avatar trigger: always styled as violet avatar square */
[data-sidebar="trigger"].logo-trigger {
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    border-radius: 0.375rem;
    background-color: rgb(139 92 246);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
[data-sidebar="trigger"].logo-trigger:hover {
    background-color: rgb(124 58 237);
}
/* Panel icon hidden by default — only revealed on hover in collapsed state */
[data-sidebar="trigger"].logo-trigger .logo-icon {
    display: none;
}
/* Collapsed state: hover the avatar to reveal expand icon */
[data-state=collapsed] [data-sidebar="trigger"].logo-trigger:hover .logo-a {
    display: none;
}
[data-state=collapsed] [data-sidebar="trigger"].logo-trigger:hover .logo-icon {
    display: block;
}
/* Right-side trigger: hide when sidebar is collapsed (avatar takes over) */
[data-state=collapsed] [data-sidebar="trigger"].logo-expand-trigger {
    display: none;
}

/* Coming Soon overlay utilities */
.pointer-events-auto { pointer-events: auto; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* Build cost pill — informational only, not clickable. BbBadge's default variant ships its own
   dark hover state; disable pointer interaction entirely rather than fight its hover styling. */
.build-cost-badge { pointer-events: none; }

/* Active sidebar menu item — overrides BlazorBlueprint utility class */
[data-sidebar="menu-button"][data-active="true"] {
    background-color: var(--sidebar-primary) !important;
    color: var(--sidebar-primary-foreground) !important;
    font-weight: 500;
}

/* Collapsed sidebar: .main-content's left padding (p-4 in MainLayout.razor)
   adds a 1rem gap between the sidebar and the visible card that the
   library's icon-centering math doesn't know about, making every collapsed
   icon (nav items, footer avatar, header logo) sit visually left of center
   relative to the card's true edge. Close the gap on the sidebar side only
   so the sidebar's own default centering — already correct relative to its
   own width — lines up with the card. BbSidebar renders with class="peer"
   and data-state="collapsed"/"expanded"; BbSidebarInset is its direct
   sibling, so the sibling combinator below reaches .main-content inside it. */
:where(.peer)[data-state="collapsed"] ~ * .main-content {
    padding-left: 0;
}

/* Issues board — Tailwind classes used via C# string helpers */
.bg-red-50    { background-color: rgb(254 242 242); }
.bg-amber-50\/50 { background-color: rgb(255 251 235 / 0.5); }
.bg-blue-50\/50  { background-color: rgb(239 246 255 / 0.5); }
.bg-green-50\/50 { background-color: rgb(240 253 244 / 0.5); }
.bg-slate-400 { background-color: rgb(148 163 184); }
.bg-red-500   { background-color: rgb(239 68 68); }
.bg-amber-500 { background-color: rgb(245 158 11); }
.bg-blue-500  { background-color: rgb(59 130 246); }
.bg-green-600 { background-color: rgb(22 163 74); }
.min-w-max    { min-width: max-content; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Feature badge palette */
.bg-blue-100   { background-color: rgb(219 234 254); } .text-blue-700   { color: rgb(29 78 216); }
.bg-purple-100 { background-color: rgb(243 232 255); } .text-purple-700 { color: rgb(126 34 206); }
.bg-emerald-100{ background-color: rgb(209 250 229); } .text-emerald-700{ color: rgb(4 120 87); }
.bg-amber-100  { background-color: rgb(254 243 199); } .text-amber-700  { color: rgb(180 83 9); }
.bg-rose-100   { background-color: rgb(255 228 230); } .text-rose-700   { color: rgb(190 18 60); }
.bg-cyan-100   { background-color: rgb(207 250 254); } .text-cyan-700   { color: rgb(14 116 144); }
.bg-orange-100 { background-color: rgb(255 237 213); } .text-orange-700 { color: rgb(194 65 12); }
.bg-indigo-100 { background-color: rgb(224 231 255); } .text-indigo-700 { color: rgb(67 56 202); }

/* BbRichTextEditor: upstream blazorblueprint.css styles the empty-state ::before pseudo-element
   (position, color) but never sets `content`, so the Placeholder text never actually renders. */
[data-slot="rich-text-editor"] .ql-editor.ql-blank::before {
    content: attr(data-placeholder);
}