/* PSC.Blazor.Components.Projects — shared styles */
.project-status-active { color: #16a34a; }
.project-status-onhold { color: #f59e0b; }
.project-status-completed { color: #3b82f6; }
.project-status-cancelled { color: #dc2626; text-decoration: line-through; }

.kanban-column { min-width: 260px; }
.kanban-card { cursor: grab; }

/* ===== Dark-mode cell background neutralisation =====
   Bootstrap's `.table > :not(caption) > * > *` rule paints every cell
   with `background-color: var(--bs-table-bg)`. In dark mode Bootstrap
   resolves --bs-table-bg to a specific dark color that doesn't match
   the host's actual page bg, so component tables read as a slightly-
   different shade card on top of the page. Overriding the variable
   on each Project-component table (identified by data-resizable-id)
   to `transparent` makes Bootstrap's rule resolve to no fill — cells
   inherit the page bg directly.
   Light mode is unaffected: --bs-table-bg defaults to white there,
   which the host's white page bg already matches. */
/* Fixed layout + width:100% anchor the table to its container, so dragging
   one column shrinks the rest proportionally instead of pushing the table
   — and the page — wider. Without this, browser default 'table-layout: auto'
   treats style.width on <th> as a minimum rather than absolute: the dragged
   column grows but the others keep their content-derived widths, the table
   widens by the drag delta, and the page picks up a horizontal scrollbar.
   FLNKA-62. */
table[data-resizable-id] {
    table-layout: fixed;
    width: 100%;
}

[data-bs-theme="dark"] table[data-resizable-id] {
    --bs-table-bg: transparent;
}
/* Explicit override of Bootstrap's per-cell background rule so the
   change is plainly visible in devtools (the variable approach above
   makes Bootstrap's `.table > :not(caption) > * > *` rule resolve
   to no fill at runtime, but the rule still shows in the Styles
   panel which can read like the bg is still applied). The direct
   selector below wins on specificity (0,1,4 vs Bootstrap's 0,1,3)
   and removes any ambiguity. */
[data-bs-theme="dark"] table[data-resizable-id] > :not(caption) > * > * {
    background-color: transparent;
}

/* ===== Sortable column header button (FLNKA-66) =====
   Used by tables that want click-on-header sorting. Resets Bootstrap
   button defaults so the button visually reads as a plain header label;
   only the hover colour + focus ring distinguish it from a non-clickable
   <th>. The caret indicator is a Bootstrap Icon rendered next to the
   label by the consuming page when this column is the active sort. */
.psc-sort-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
}
/* No :hover rule — the button's cursor:pointer + the ⇅ / ↑ / ↓ icon
   beside each header label already communicate sortability; adding an
   underline or colour shift on hover reads as fussy (FLNKA-69 revised
   after user feedback). Focus-visible still triggers for keyboard nav. */
.psc-sort-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== Generic resizable-column handle =====
   Any table that opts into projects-table-resize.js sets
   data-resizable-id on the <table> element and renders
   <span class="psc-tcr-handle"></span> inside each header cell
   except the last. The selectors below target ALL such tables
   in one place so each consumer doesn't have to repeat the CSS. */
table[data-resizable-id] thead th { position: relative; }
table[data-resizable-id] thead th:last-child .psc-tcr-handle { display: none; }
.psc-tcr-handle {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 6px;
    cursor: col-resize;
    user-select: none;
    background: transparent;
    transition: background 0.1s ease;
    z-index: 1;
}
/* Always-visible 1px divider on the inner edge of the handle
   (= the right border of the column header). Inset 25% top/bottom
   so it reads as a subtle separator, not a heavy vertical rule. */
.psc-tcr-handle::before {
    content: '';
    position: absolute;
    top: 25%; bottom: 25%; right: 0;
    width: 1px;
    background: var(--bs-border-color, #dee2e6);
    transition: background 0.1s ease, top 0.1s ease, bottom 0.1s ease;
    pointer-events: none;
}
.psc-tcr-handle:hover::before,
.psc-tcr-handle.dragging::before {
    background: var(--bs-primary);
    top: 0; bottom: 0;
}
.psc-tcr-handle:hover,
.psc-tcr-handle.dragging {
    background: var(--bs-primary);
    opacity: 0.55;
}

/* ===== Phases page — drag-to-reorder rows =====
   The whole row is draggable; the grip icon at the start signals the
   affordance without taking up much space. Dragging fades the source
   row to half opacity so the user can see what they're holding; the
   drop target gets a primary-coloured top border to signal "this is
   where it'll land". The row's underlying click targets (Edit /
   Delete buttons) keep their pointer behaviour. */
.psc-pp-row {
    transition: opacity 0.1s ease, border-top-color 0.1s ease;
    border-top: 2px solid transparent;
}
.psc-pp-grip {
    cursor: grab;
    user-select: none;
    line-height: 1;
}
.psc-pp-row:active .psc-pp-grip { cursor: grabbing; }
.psc-pp-row-dragging {
    opacity: 0.45;
}
.psc-pp-row-droptarget {
    border-top-color: var(--bs-primary);
}

/* ===== Gantt swimlane drag-target highlight =====
   Lane backdrops are emitted as transparent <rect class="psc-lane-bg">
   spanning the lane's full Y range. projects-gantt.js toggles
   psc-lane-target on the rect that the cursor is currently resolving
   to during a body drag — gives the user a clear "this is where the
   item will land" cue while the bar is in flight. The light/dark
   colours are tuned to read on top of the existing lane header tint
   without competing with the bar fills. */
.psc-lane-bg.psc-lane-target {
    fill: rgba(34, 197, 94, 0.16);
}
[data-bs-theme="dark"] .psc-lane-bg.psc-lane-target {
    fill: rgba(34, 197, 94, 0.22);
}


/* ===== EasyMDE / MarkdownEditor — dark-mode overrides =====
   The bundled EasyMDE CSS has its own light theme with white CodeMirror
   background. These rules follow Bootstrap's data-bs-theme="dark" attribute
   so the editor blends into the app instead of glowing. Copied from
   PSC.Blazor.Components.Wiki/wwwroot/css/wiki.css so projects-only apps
   (Demo) don't need the Wiki's CSS loaded just to get a dark editor. */

[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror {
    background: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
/* CodeMirror's own stylesheet sets `.CodeMirror { background: #fff; }`
   directly on the element. Without this explicit override the bundled
   white bg wins because the rule above only sets background-color via
   the shorthand on a different selector path. The unscoped `.CodeMirror`
   rule below has the same specificity but ours wins on source order. */
[data-bs-theme="dark"] .CodeMirror {
    background: transparent;
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button:hover,
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button.active {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: var(--bs-border-color);
    border-right-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-statusbar {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-selected,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
    background: var(--bs-primary-bg-subtle) !important;
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-preview,
[data-bs-theme="dark"] .EasyMDEContainer .editor-preview-side {
    /* OPAQUE — EasyMDE adds the preview <div> on top of the CodeMirror
       textarea without hiding it; the preview's background is what
       visually replaces the editor. `transparent` here let both layers
       render simultaneously (raw markdown source + rendered HTML in the
       same pane). FLNKA-65. */
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-header    { color: var(--bs-primary); }
[data-bs-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-link      { color: var(--bs-info); }
[data-bs-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-url       { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-comment   { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-string    { color: var(--bs-success); }
[data-bs-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-keyword   { color: var(--bs-warning); }
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-linenumber      { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-gutters {
    background: var(--bs-tertiary-bg);
    border-right-color: var(--bs-border-color);
}