/* Copyright ExaOps Pty Ltd 2026. All rights reserved. */

/*
 * Left-adjusted section tabs.
 *
 * MudBlazor centres tab content, which on a fixed-width vertical strip leaves every icon at a
 * different x and the labels ragged on both sides. Two pages needed this and both carried their own
 * copy in an inline <style> block; a third would have been written from memory and drifted.
 */
.collab-section-tabs .mud-tab {
    justify-content: flex-start;
    text-align: left;
}

/*
 * Help article typography. Long prose in a MudPaper otherwise runs at the default line height,
 * which is fine for a table and hard work for four hundred words.
 */
.collab-help h3 { margin-top: 1.6rem; margin-bottom: .4rem; }
.collab-help p  { margin-bottom: .9rem; line-height: 1.6; }
.collab-help ul { margin-bottom: .9rem; padding-left: 1.4rem; }
.collab-help li { margin-bottom: .35rem; line-height: 1.55; }

.collab-help code {
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(128, 128, 128, .16);
}

.collab-help pre {
    padding: .8rem;
    border-radius: 4px;
    background: rgba(128, 128, 128, .14);
    overflow-x: auto;
    font-size: .84rem;
    line-height: 1.45;
}

/*
 * A term that carries a definition on hover.
 *
 * The dotted underline is the whole point: a tooltip nobody knows is there is a tooltip nobody
 * reads, and "architectural" is exactly the word a reader will otherwise take to mean buildings.
 */
.collab-defined {
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Definitions are two or three sentences, and the default tooltip width turns that into a column. */
.collab-definition .mud-tooltip {
    max-width: 32rem;
    text-align: left;
    line-height: 1.5;
}

/*
 * File drop zone. Same shape as the PM module's, so somebody who has attached a file to a work
 * item does not have to learn a second pattern.
 */
.collab-dropzone {
    position: relative;
    min-height: 90px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    transition: border-color .2s, background .2s;
}

.collab-dropzone-over {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* Covers the whole zone so the entire area is clickable, not just the icon. */
.collab-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/*
 * Row actions: small pills that stay out of the way until you are on the row.
 *
 * A dense table with six buttons on every row reads as a wall of controls, and the reader's eye has
 * to filter them out before it can find the data. Hiding them until the row is under the pointer
 * gives back the scannability without hiding the functionality — the row you are looking at is the
 * only row whose actions you can act on anyway.
 *
 * This was written inline on the projects table first. It is here now because three more tables
 * needed it, and a fourth copy would have been the one that drifted.
 */
/*
 * Stacked, not in a row.
 *
 * A change carries up to six actions, and laid out horizontally they pushed the last two past the
 * right edge of a 1500px viewport — with no horizontal scrollbar, because the table clips rather
 * than scrolls. They were not merely hard to find, they were unreachable, which is why this read as
 * "hover does not work": the pills being hovered were off-screen.
 *
 * Stacking also makes the column width independent of how many actions a row happens to have, so a
 * row with one action and a row with six line up.
 */
.collab-actions {
    white-space: normal;
    width: 1%;
}

.collab-actions .mud-button-root {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin: 1px 0;
    white-space: nowrap;
    opacity: 0;
    border-radius: 999px;
    text-transform: none;
    padding: 2px 12px;
    min-width: 0;
    min-height: 26px;
    font-size: 0.78rem;
    line-height: 1.2;
    transition: opacity .25s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out;
}

/*
 * Two different things, and they were conflated.
 *
 * The ROW decides whether the group is visible. Hovering anywhere on a row reveals all of its
 * actions at once — that is a statement about which row you are working on.
 */
tr:hover .collab-actions .mud-button-root,
tr:focus-within .collab-actions .mud-button-root {
    opacity: 1;
    background-color: transparent;
}

/*
 * The BUTTON decides whether it is the one under the pointer. Applying the highlight on row hover
 * lit all six identically, so nothing told the reader which one they were about to press — the
 * feedback that matters most in a stack of similar labels.
 *
 * Written as `tr:hover ... :hover` rather than the shorter `.collab-actions .mud-button-root:hover`
 * deliberately. The rule above it is `tr:hover .collab-actions .mud-button-root`, which scores an
 * element plus three classes; the short form scores three classes and loses, so the button stayed
 * transparent no matter where the pointer was. Reordering would not have fixed it — specificity is
 * decided before source order.
 */
tr:hover .collab-actions .mud-button-root:hover,
tr:focus-within .collab-actions .mud-button-root:hover {
    opacity: 1;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/*
 * Keyboard users never hover. Without this the actions are unreachable by tab — visible focus is
 * not a nicety here, it is the only way anybody navigating by keyboard knows where they are.
 */
.collab-actions .mud-button-root:focus-visible {
    opacity: 1;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/*
 * There is no hover on a touch screen, so the pills would simply never appear. Anything gated on
 * hover needs this or the feature does not exist on half the devices that reach it.
 */
@media (hover: none) {
    .collab-actions .mud-button-root {
        opacity: 1;
    }
}

/* The whole row is a target, so the pointer says so wherever it is. */
.collab-clickable-rows tbody tr {
    cursor: pointer;
}

/*
 * ---------------------------------------------------------------------------
 * Rich text editor, themed to match the rest of the application.
 * ---------------------------------------------------------------------------
 *
 * Radzen ships its own light stylesheet and knows nothing about MudBlazor's palette, so out of the
 * box the editor is a white panel with white text on it in dark mode — the text is there, and
 * invisible, which is worse than an obviously broken control because people retype it.
 *
 * Everything is driven from MudBlazor's palette variables rather than fixed colours, so the editor
 * follows the theme instead of guessing at it.
 *
 * NOTE: the CRM has an equivalent block in Marketly/wwwroot/css/site.css. It is deliberately not
 * shared yet, and it differs on one point: the CRM keeps its content area white on purpose, because
 * what is typed there becomes an email read on a white background. A Collab comment is only ever
 * read inside this application, so it follows the application's theme. Merging the two would have
 * to preserve that difference — which is why it is a note rather than a copy.
 */
.rz-html-editor {
    --rz-editor-button-background-color: transparent;
    --rz-editor-button-color: var(--mud-palette-text-primary);
    --rz-editor-button-selected-background-color: var(--mud-palette-primary);
    --rz-editor-button-selected-color: var(--mud-palette-primary-text);
    --rz-editor-button-disabled-color: var(--mud-palette-text-disabled);
    --rz-editor-separator-background-color: var(--mud-palette-lines-default);
    --rz-editor-toolbar-background-color: var(--mud-palette-surface);
    --rz-editor-border: 1px solid var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

.rz-html-editor-toolbar {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.rz-html-editor-button {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    border-radius: var(--mud-default-borderradius);
}

.rz-html-editor-button.rz-selected {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.rz-html-editor-toolbar .rzi {
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-colorpicker,
.rz-html-editor-colorpicker .rz-colorpicker-trigger,
.rz-html-editor-colorpicker .rz-colorpicker {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

/* The part the reported bug was about: what you are typing. */
.rz-html-editor-content {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/*
 * Links need their own colour. The palette's primary is chosen to sit on a surface, and a link
 * inheriting the body colour is indistinguishable from ordinary text — which defeats the point of
 * having pasted one in.
 */
.rz-html-editor-content a {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

/* Bullets and numbers are clipped off the left edge without this. */
.rz-html-editor-content ol,
.rz-html-editor-content ul {
    padding-left: 1.5em !important;
    margin-left: 0.5em !important;
}

/* The raw-HTML view is the same editor in a different mode, and needs the same treatment. */
.rz-html-editor-source.rz-textarea {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Radzen's dialogs — the link editor opens one — are otherwise light panels in a dark app. */
.rz-dialog {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog .rz-inputtext {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

/* A stat card is a link, so it says so before it is pressed. */
.collab-stat {
    cursor: pointer;
    transition: background-color 120ms ease-in-out;
}

.collab-stat:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Analysis findings: a list, indented enough to read as one without shouting. */
.collab-analysis {
    margin: .2rem 0 .4rem 0;
    padding-left: 1.3rem;
}

/*
 * ---------------------------------------------------------------------------
 * Buttons look like buttons, and respond when you point at one.
 * ---------------------------------------------------------------------------
 *
 * MudBlazor's text variant renders with no border and no background, which makes it indistinguishable
 * from a caption until it is hovered. "Draft the specification" sat next to a paragraph of prose and
 * read as part of it — somebody looking for the way forward could not see one.
 *
 * Done in CSS rather than by changing twenty Variant="Variant.Text" attributes, so a new button gets
 * the behaviour without anybody remembering to ask for it.
 */
.mud-button-root {
    /* MudBlazor title-cases button labels, which turns "Use this" into "Use This" and reads as a
       heading rather than an instruction. The labels are written as sentences; show them that way. */
    text-transform: none;
    transition: background-color .25s ease-in-out,
                border-color .25s ease-in-out,
                color .25s ease-in-out,
                box-shadow .25s ease-in-out,
                opacity .25s ease-in-out;
}

/* A text button gets an outline, so it reads as pressable before it is pointed at. */
.mud-button-text {
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.mud-button-text:hover {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.mud-button-outlined:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Filled buttons already read as buttons; they lift instead. */
.mud-button-filled:hover {
    box-shadow: var(--mud-elevation-4);
}

/*
 * Row action pills opt out of the outline. They are deliberately invisible until their row is
 * hovered, and a permanent border on every row would put back exactly the wall of controls that
 * hiding them removed.
 */
.collab-actions .mud-button-text {
    border: none;
    background-color: transparent;
}

/* Navigation links in the menu are not buttons and must not grow borders. */
.mud-navmenu .mud-button-root {
    border: none;
    background-color: transparent;
}

/* The step you are on, so the eye lands on it before reading the others. */
.collab-step { opacity: .65; transition: opacity .25s ease-in-out; }
.collab-step-current { opacity: 1; }

/*
 * Tabs are controls, and have to behave like them.
 *
 * MudBlazor's left tab strip renders as a list that gives no feedback until it is clicked: no
 * pointer, no hover state. On a strip that is the primary navigation of a page, that reads as a
 * table of contents — you look at it rather than pressing it.
 */
.mud-tab {
    cursor: pointer;
    transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.mud-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* The one you are on stays distinct from the one under the pointer. */
.collab-section-tabs .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

/*
 * Disabled means disabled, and should say so before it is pressed rather than by doing nothing when
 * it is. A control that looks pressable and silently ignores you is read as broken.
 */
.mud-button-root:disabled,
.mud-button-root.mud-disabled,
.mud-tab.mud-disabled {
    cursor: not-allowed;
}

.mud-button-root:disabled:hover,
.mud-button-root.mud-disabled:hover {
    background-color: transparent;
    border-color: var(--mud-palette-lines-default);
}

/* Anything clickable that is not a button or a tab still needs to say so. */
.collab-stat,
.collab-clickable-rows tbody tr,
.mud-button-root {
    cursor: pointer;
}

/*
 * Worked examples inside a help dialog. Indented and marked so an example of what to write is
 * visibly an example, rather than another paragraph telling you about writing.
 */
.help-dialog blockquote {
    margin: .4rem 0 .8rem 0;
    padding: .6rem .9rem;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
    border-radius: 0 4px 4px 0;
    font-style: normal;
}

.help-dialog h3 { margin-top: 1.4rem; margin-bottom: .4rem; }
.help-dialog p, .help-dialog li { line-height: 1.6; }
.help-dialog ul { padding-left: 1.4rem; margin-bottom: .8rem; }
.help-dialog code {
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(128, 128, 128, .18);
}

/* The composed instruction, shown before it is issued. Monospaced so line breaks are trustworthy. */
.collab-instruction-preview {
    white-space: pre-wrap;
    font-size: .82rem;
    line-height: 1.5;
    padding: .8rem;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
    max-height: 22rem;
    overflow-y: auto;
}

/*
 * The three mode buttons.
 *
 * MudButtonGroup styles its children itself, so the general button hover rules do not reach them and
 * the group sat there giving no feedback at all — on the one control that decides whether code gets
 * written. The selected one is filled and must stay obviously selected while a neighbour is hovered.
 */
.collab-modes .mud-button-root {
    transition: background-color .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out;
    cursor: pointer;
}

.collab-modes .mud-button-outlined:hover {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.collab-modes .mud-button-filled:hover {
    box-shadow: var(--mud-elevation-6);
}

/* A unified diff. Monospaced, because alignment is meaning in a patch. */
.collab-patch {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.45;
    max-height: 30rem;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
}

.collab-patch-line { white-space: pre; padding: 0 .6rem; }

/* Green and red carry the meaning, so they are also the only two with a background — a colour-blind
   reader still has the leading + and - and the alignment. */
.collab-patch-added   { background: rgba(46, 160, 67, .18); }
.collab-patch-removed { background: rgba(248, 81, 73, .18); }
.collab-patch-hunk    { color: var(--mud-palette-info); }
.collab-patch-file    { color: var(--mud-palette-text-secondary); font-weight: 600; }

/* The chosen ticket kind. MudChipSet cascades its own variant over its chips, so setting
   Variant="Filled" on the selected one has no effect — the library's own selected state is a 6%
   tint over a transparent chip, which is indistinguishable from the others at a glance. This
   states it outright. Weight and border move as well as colour, so the choice is still legible
   without relying on hue. */
.collab-kind-on {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 600;
}

.collab-kind-off {
    background-color: transparent !important;
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-secondary) !important;
}