ul {
    list-style: none;    
}

/* ##########################################################################
   HTMX Indicator Styles
   Uses Pattern: Indicator (primitive)
   ########################################################################## */

/* Base HTMX indicator styling - hidden by default, shown during requests */
.htmx-indicator {
    opacity: 0;
    visibility: hidden;
    margin-top: 0.5em;
    display: inline-block;
}

/* Show indicator when element has htmx-request class */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    margin-top: 0.5em;
    display: inline-block;
    transition: opacity 200ms ease-in;
}


/* Spinner animation for HTMX loading indicators */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Spinner image styling */
.htmx-spinner {
    width: 1.8em;
    height: auto;
    animation: spin 2s linear infinite;
}

/* Text next to spinner */
.htmx-indicator-text {
    margin-right: 1.0em;
}


#add-artists-to-form-component {
    padding:12px;
    border-radius:8px;
    box-shadow: 0px 0px 4px var(--theme-brand-dark);
}

#artist-autocomplete-component>div {
    margin-bottom:0.8rem;    
}


.form-data-group {
    margin:20px auto;
    padding:10px;
    border: 1px solid var(--chamois-dark)                
}

.form-group-heading {
    font-size: var(--h3-font-size);
    font-family: var(--h1-font-family);
    font-weight: bold;
    line-height: 1.2;
    margin-top: var(--h3-margin-top);
    margin-bottom: var(--h3-margin-bottom);
}

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.help-table table {
    margin-top:20px;
    font-size:12px;
}

/* Help popover styling */
.h1-spacing > span,
.h2-spacing > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.h1-spacing > span > h1,
.h2-spacing > span > h2 {
    margin-right: 0;
}

/* Make cross/close icons bolder for better visibility */
.bi-x-lg.bolder {
    -webkit-text-stroke: 1.5px;
    text-stroke: 1.5px;
    paint-order: stroke fill;
}

/* Make arrow-right icon bolder (midway between normal and very bold) */
.bi-arrow-right.bolder {
    -webkit-text-stroke: 1.5px;
    text-stroke: 1.5px;
    paint-order: stroke fill;
}

sup {
    display: inline;
    position: relative;
    vertical-align: 0.3em;
    font-size: 0.85em;
    line-height: 0;
}

.help-icon {
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 0.3em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
}

.help-popover {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    left: 100%;
    margin-left: 10px;
    max-width: 300px;
    min-width: 200px;
    top: 50%;
    transform: translateY(-50%);
    white-space: normal;
    line-height: 1.4;
}


a {
    cursor: pointer;
}

.data-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}


.artist-id-base {
    display: flex;
    flex-direction:row;
}

/* Search feedback container: unified container for search results and "can't find" message */
/* Container starts empty, gets content swapped in via HTMX */
.search-feedback {
    position: relative;
    margin-top: 1em; /* Space after form-group */
}

/* Participation user typeahead: the results live in a div that is a sibling of
   the .form-group, so they span full width and line up under the "Benutzer"
   label. Offset them to start at the value column (the form-group label is a
   fixed 200px + 1rem column at >=576px; below that the form-group stacks and
   no offset is needed). Scoped by id so song/artist search are unaffected. */
@media (min-width: 576px) {
    #participation-user-feedback {
        margin-left: calc(200px + 1rem);
    }
}

/* Reserved space at top of search results where indicator will visually appear */
.search-indicator-space {
    min-height: 2.5em; /* Match indicator height, but allow content to expand */
    margin-top: 0.5em; /* Reduced space after search bar - matches indicator positioning */
    margin-bottom: 0.25em; /* Small space before table */
}

/* Hide search result content when indicator is visible (during requests) */
.search-result-heading {
    font-size: var(--semantic-heading-mono-size);
    font-weight: bold;
    line-height: 1.2;
}

/* We add 'searching' class via HTMX events (before-request/after-request) */
/* This is more reliable than CSS :has() selector */
.search-feedback.searching .search-result-content,
.search-feedback.searching > div {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* Fallback: also try CSS :has() selector if browser supports it */
#song-search-input-component:has(#song-input.htmx-request) #search-feedback .search-result-content,
#song-search-input-component:has(#song-input.htmx-request) #search-feedback > div {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Position indicator absolutely to overlay search-feedback container */
/* Indicator is a sibling of search-feedback, positioned to align with its top */
#song-search-input-component {
    position: relative;
}

/* Song search indicator positioning is now handled by .search-input-with-indicator styles */

/* Search input with inline indicator: spinner appears after typed text */
.search-input-with-indicator {
    position: relative;
    flex: 1 1 auto; /* Take remaining space in form-group */
    width: 100%; /* Full width */
}

.search-input-with-indicator .form-control {
    width: 100%; /* Full width input */
}

.search-input-with-indicator .htmx-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center both horizontally and vertically */
    pointer-events: none; /* Allow clicking through to input */
    z-index: 5; /* Above input text */
}

/* When indicator is shown (has htmx-request class), it overlays the reserved space */
/* When content arrives and indicator hides, the reserved space shows the content */

/* @media only screen and (max-width: 800px) #add-artists-form-component */
.selected-recording-artist {
    margin:0.2rem auto;
    width:fit-content;
    padding:0.2rem;
    border-radius:12px;    
}

.selected-recording-artist .btn-close {
    box-sizing: content-box;
    border: 0;
    opacity: .5;
}

.input-grid {
    display:grid;
    grid-template-columns: 1fr; /*2fr 1fr 1fr;*/
    align-content: center;
    align-items: center;
    grid-row-gap: 6px;
    grid-column-gap: 2rem;    
}

/* Artist selection table styling */
.artist-row-selected {
    color: var(--black);
}

/* Make selected artist names bold and strawberry colored */
.artist-row-selected td a {
    font-weight: bold;
    color: var(--strawberry) !important;
}

/* Make rows clickable */
.artist-row-selected,
.artist-row-unselected {
    cursor: pointer;
}

/* Hover state - note: standard table hover is already handled by .row-link class */
/* But we can enhance it if needed */
.artist-row-selected:hover,
.artist-row-unselected:hover {
    background-color: var(--chamois-light);
}

.btn-update-success {
    color: var(--green);
    opacity: 0;
    transition: opacity 2s ease-out;
}

/* ##########################################################################
   Date/Time Input Styling
   ########################################################################## */

/* Narrow width for date, time, and datetime inputs - just wide enough for content and icon */
/* Applied automatically to time inputs, can be added to date/datetime inputs as needed */
.form-control[type="time"],
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control-datetime {
    max-width: 10em; /* Wide enough for time format (HH:MM:SS) plus clock icon */
    width: auto;
}

/* ##########################################################################
   Matrix container: Status / Effort (data-view)
   ##########################################################################
   Drives show/hide of .cell-status and .cell-effort via [data-view].
   View select: matrixViewSelectComponent in Web.Components.Features (select-button pattern). */

.matrix-view-container[data-view="status"] .cell-status {
    display: inline-block !important;
}
.matrix-view-container[data-view="status"] .cell-effort {
    display: none !important;
}
.matrix-view-container[data-view="status"] .matrix-summary-row-effort-days,
.matrix-view-container[data-view="status"] .matrix-summary-row-effort-euros-monthly,
.matrix-view-container[data-view="status"] .matrix-summary-row-effort-euros-onetime,
.matrix-view-container[data-view="status"] .matrix-summary-row-tco {
    display: none;
}
.matrix-view-container[data-view="effort"] .cell-status {
    display: none !important;
}
.matrix-view-container[data-view="effort"] .cell-effort {
    display: inline-block !important;
    cursor: pointer;
}
.matrix-view-container[data-view="effort"] .matrix-summary-row-status {
    display: table-row;
}
.matrix-view-container[data-view="all"] .cell-status,
.matrix-view-container[data-view="all"] .cell-effort {
    display: block !important;
}
.matrix-view-container[data-view="all"] .cell-effort {
    cursor: pointer;
}
.matrix-view-container .cell-tooltip-text {
    display: none;
}
.matrix-view-container[data-view="all"] .cell-tooltip-text {
    display: block;
    font-size: inherit;
    color: var(--black);
    line-height: inherit;
}
/* Hide zero effort values (transparent text, still clickable) */
.matrix-view-container[data-view="effort"] .effort-zero,
.matrix-view-container[data-view="all"] .effort-zero {
    color: transparent;
}
/* For th/td elements with cell-effort class, use table-cell to preserve table layout */
.matrix-view-container[data-view="effort"] th.cell-effort,
.matrix-view-container[data-view="effort"] td.cell-effort {
    display: table-cell !important;
    cursor: default;
}
.matrix-view-container[data-view="all"] th.cell-effort,
.matrix-view-container[data-view="all"] td.cell-effort {
    display: table-cell !important;
    cursor: default;
}

/* Effort view: right-align numbers in product columns (overrides text-center on cells) */
.matrix-view-container[data-view="effort"] td.matrix-cell {
    text-align: right !important;
}
.matrix-view-container[data-view="effort"] td.matrix-cell .cell-editable {
    text-align: right !important;
}
/* Effort summary columns: align flex children to the right */
.matrix-view-container[data-view="effort"] .matrix-category-effort-sums .d-flex {
    align-items: flex-end !important;
}

/* Matrix header strip: the Status/Effort toggle uses renderSingleSelectButtonsOnly,
   whose wrapper has `mb-3`. In a flex row this bottom margin shifts the buttons
   upwards (margins participate in flex alignment). Remove it and ensure vertical centering. */
.matrix-view-container [role="group"] {
    margin-bottom: 0 !important;
    align-self: center;
}
.matrix-view-container [role="group"] > .d-flex {
    align-items: center;
}

/* Feature matrix layout exception:
   The matrix owns its full-bleed breakout because its toolbar/modal/table
   structure is bespoke. Do not additionally wrap it in .full-bleed.
   This makes row background colors and borders span full screen width, while cell
   padding (see global th/td:first-child rules) keeps content aligned to gutters. */
.main-content > .container-fluid .matrix-view-container > .table-responsive {
    width: calc(100% + 2 * var(--page-edge-padding));
    margin-left: calc(-1 * var(--page-edge-padding));
    margin-right: calc(-1 * var(--page-edge-padding));
}
.main-content > .container-fluid .matrix-view-container > .table-responsive > .table {
    width: 100%;
}
@media (min-width: 576px) {
    .main-content > .container-fluid .matrix-view-container > .table-responsive {
        width: calc(100% + 2 * var(--page-edge-padding-desktop));
        margin-left: calc(-1 * var(--page-edge-padding-desktop));
        margin-right: calc(-1 * var(--page-edge-padding-desktop));
    }
}

/* Matrix: rightmost actions column aligns with header buttons ("New", "Import", …) */
.matrix-view-container #comparisonMatrix th:last-child,
.matrix-view-container #comparisonMatrix td:last-child {
    text-align: right;
}

/* Matrix: fixed width for product columns removed */

/* The action buttons are wrapped in a `d-flex` div; ensure the group itself is right-aligned. */
.matrix-view-container #comparisonMatrix td:last-child > .d-flex {
    justify-content: flex-end;
}

/* Matrix: overall summary rows (below table header) - split into two rows for TCO */
.matrix-view-container .matrix-overall-summary-row {
    background-color: var(--chamois-medium) !important;
}
/* Summary sub-rows (status + effort): tighter height, no row separators */
.matrix-view-container .matrix-summary-row-status td,
.matrix-view-container .matrix-summary-row-effort-days td,
.matrix-view-container .matrix-summary-row-effort-euros-monthly td,
.matrix-view-container .matrix-summary-row-effort-euros-onetime td {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    border-bottom: none !important;
    height: 30px;
    line-height: 1.1;
}
/* Align unit column labels with readiness/TCO */
.matrix-view-container .matrix-summary-row-status td.cell-effort,
.matrix-view-container .matrix-summary-row-effort-days td.cell-effort,
.matrix-view-container .matrix-summary-row-effort-euros-monthly td.cell-effort,
.matrix-view-container .matrix-summary-row-effort-euros-onetime td.cell-effort {
    text-align: left !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
/* Unit label spans: keep consistent left inset */
.matrix-view-container .matrix-summary-row-effort-days td.cell-effort > span,
.matrix-view-container .matrix-summary-row-effort-euros-monthly td.cell-effort > span,
.matrix-view-container .matrix-summary-row-effort-euros-onetime td.cell-effort > span {
    display: inline-block;
    padding-left: 0.5rem;
}
/* TCO label cell: align padding with unit column */
.matrix-view-container .matrix-tco-sum-line {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
/* Top row: no bottom border */
.matrix-view-container .matrix-overall-summary-row-top td {
    border-bottom: none !important;
}
/* TCO row: black bottom border (like original total row) */
.matrix-view-container .matrix-overall-summary-row-tco td {
    border-bottom: 0.15em solid var(--black) !important;
}
/* TCO row visibility: only in Effort view */
.matrix-view-container[data-view="status"] .matrix-overall-summary-row-tco {
    display: none !important;
}
/* In Status view, top row needs the bottom border back */
.matrix-view-container[data-view="status"] .matrix-overall-summary-row-top td {
    border-bottom: 0.15em solid var(--black) !important;
}
/* TCO sum line: black top border starting from Unit column (like manual calculation sum line) */
.matrix-view-container .matrix-tco-sum-line {
    border-top: 0.15em solid var(--black) !important;
}
/* TCO label styling */
.matrix-view-container .matrix-tco-label {
    font-weight: 700;
}
/* TCO value styling (black, bold) */
.matrix-view-container .matrix-tco-value {
    font-weight: 700;
}

/* Matrix: category group header rows (summary stack) */
.matrix-view-container tr.matrix-category-group-header > td {
    background-color: var(--chamois-light) !important; /* match total row (previous) */
}
/* Only the first (status) row gets the top spacing */
.matrix-view-container tr.matrix-category-group-header.matrix-summary-row-status > td {
    padding-top: 2.0rem !important;
}
/* Only the last effort row gets the separator before features */
/* Category summary rows: remove per-row borders */
.matrix-view-container tr.matrix-category-group-header > td {
    border-bottom: none !important;
}
/* Category group borders: top and bottom line across full width */
.matrix-view-container #comparisonMatrix tbody.matrix-category-group > tr.matrix-summary-row-status > td {
    border-top: 1px solid var(--black) !important;
    border-top-width: 1px !important;
    border-top-style: solid !important;
    border-top-color: var(--black) !important;
    box-shadow: none !important;
}
/* Fallback: row-level top border (covers full width) */
.matrix-view-container tbody.matrix-category-group > tr.matrix-summary-row-status {
    box-shadow: inset 0 1px 0 0 var(--black) !important;
}
.matrix-view-container tbody.matrix-category-group > tr.matrix-summary-row-effort-euros-onetime > td {
    border-bottom: 1px solid var(--black) !important;
}
/* Also apply borders to the rowspan cells (left columns) */
.matrix-view-container tbody.matrix-category-group > tr.matrix-summary-row-status > td[rowspan] {
    border-top: 1px solid var(--black) !important;
}
.matrix-view-container tbody.matrix-category-group > tr.matrix-summary-row-status > td[rowspan] {
    border-bottom: 1px solid var(--black) !important;
}

/* Category group borders via pseudo elements (robust across cells) */
.matrix-view-container tbody.matrix-category-group {
    position: relative;
}
.matrix-view-container tbody.matrix-category-group::before,
.matrix-view-container tbody.matrix-category-group::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}
.matrix-view-container tbody.matrix-category-group::before {
    top: 0;
    border-top: 1px solid var(--black);
}
.matrix-view-container tbody.matrix-category-group::after {
    bottom: 0;
    border-bottom: 1px solid var(--black);
}

/* Matrix: category header sums (effort view only; uses .cell-effort visibility rules) */
.matrix-category-sums .matrix-category-effort-sums {
    cursor: default; /* don't look clickable like editable effort cells */
}
.matrix-category-effort-must,
.matrix-category-effort-all {
    font-weight: 700;
}

/* Effort by unit type in summary cells - all bold since all sums are equally significant */
.matrix-effort-days,
.matrix-effort-euros-monthly,
.matrix-effort-euros-onetime {
    font-weight: 700;
}
.matrix-effort-euros-monthly {
    color: var(--blue-strong); /* blue-as-text: AA on chamois-medium summary rows; --blue (fill) fails here */
}
.matrix-effort-euros-onetime {
    color: var(--brown-dark); /* brown-as-text: AA on chamois-medium; --chamois-deep failed (~3.4:1, 2.2:1 on medium) */
}

/* Unit legend in the total row - all bold to match the sums */
.matrix-unit-legend {
    line-height: 1.3;
    font-weight: 700;
}
.matrix-readiness-label {
    font-weight: 700;
    font-size: inherit;
    color: var(--black);
}
.matrix-unit-legend span:nth-child(2) {
    color: var(--blue-strong); /* match euros-monthly value colour (legible as text) */
}
.matrix-unit-legend span:nth-child(3) {
    color: var(--brown-dark); /* match euros-onetime value colour (legible as text) */
}

/* TCO inputs visibility (only in Effort view) */
.matrix-view-container[data-view="status"] .tco-inputs {
    display: none !important;
}
.matrix-view-container[data-view="effort"] .tco-inputs {
    display: inline-flex !important;
}
.matrix-view-container[data-view="all"] .tco-inputs {
    display: inline-flex !important;
}

/* Matrix: category header scores (status view; uses .cell-status visibility rules) */
.matrix-category-sums .matrix-category-status-sums {
    cursor: default;
}
.matrix-category-status-must,
.matrix-category-status-all {
    font-weight: 700;
}

/* Matrix: in-cell controls are compact (28px) to match icon-only buttons.
   Keep the top "Status/Effort" view toggles at their normal size. */
.matrix-view-container td.matrix-cell .btn-select {
    height: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Matrix: keep status dropdown trigger aligned to in-cell height */
.matrix-view-container td.matrix-cell .select-dropdown-btn.dropdown-toggle {
    height: 28px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative; /* for note dot positioning */
}

/* Matrix read-only status (non-admins): the disabled dropdown trigger carries
   Bootstrap's `pe-none`, which suppresses hover events and thus the note tooltip.
   Re-enable hover here; the trigger has no `data-bs-toggle`, so it stays inert. */
.matrix-view-container td.matrix-cell .cell-status .select-dropdown-btn.pe-none {
    pointer-events: auto !important;
    cursor: default;
}

/* Matrix status trigger: icon-first, a bit bolder for readability */
.matrix-status-trigger i.bi {
    font-size: 1em;
}

.matrix-display-text {
    display: inline-block;
    max-width: 12rem;
    vertical-align: middle;
    white-space: normal;       /* wrap like the header row instead of truncating */
    overflow-wrap: break-word; /* break long tokens (e.g. "Band-/Ensemble-Mgmt") */
    color: var(--black); /* plain table text, not a status button */
}
/* Editable display text/effort buttons: native buttons with plain text styling */
.matrix-inline-text-button {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
}
.matrix-display-text-editable {
    cursor: pointer;
}
.matrix-display-text-editable:hover {
    text-decoration: underline dotted;
}

/* Matrix: note dot positioning (Status vs Effort) */
.cell-editable {
    position: relative; /* anchor for note dot */
}
.matrix-note-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--strawberry); /* primary strawberry */
    transform: translate(50%, -50%); /* center on the corner */
    pointer-events: none; /* don't interfere with cell clicks */
}
.matrix-note-dot-trigger {
    top: 0;
    right: 0;
}
.matrix-note-dot-cell {
    top: 2px;
    right: 2px;
    transform: none; /* sit just inside the cell, not centred on the border */
}
.matrix-view-container[data-view="status"] .matrix-note-dot-cell {
    display: none !important;
}
/* Display-text cells have no status-trigger dot; surface the note dot at the
   cell's top-right corner in status view too. */
.matrix-view-container[data-view="status"] .cell-has-display-text .matrix-note-dot-cell {
    display: inline-block !important;
}
.matrix-view-container[data-view="effort"] .matrix-note-dot-trigger {
    display: none !important;
}

/* ##########################################################################
   Tooltips (system-wide)
   ########################################################################## */

.tooltip {
    --bs-tooltip-bg: var(--chamois-light);
    --bs-tooltip-color: var(--black);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-border-radius: calc(var(--bs-border-radius) / 2);
    --bs-tooltip-padding-x: 0.55rem;
    --bs-tooltip-padding-y: 0.4rem;
}

.tooltip .tooltip-inner {
    font-size: 0.9rem;
    border: 1px solid var(--chamois-deep);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Notes modal: chamois-pale background to match app palette */
#notesModal .modal-content {
    background-color: var(--chamois-pale);
}

/* Row highlight when feature needs discussion (workflow flag) */
.matrix-view-container #comparisonMatrix tr.matrix-row-needs-discussion {
    background-color: var(--chamois-light);
}

.matrix-icon-toggle i {
    transform: scale(1.15); /* slightly larger = bolder appearance */
}
/* Override Bootstrap Icons font-weight:normal on ::before */
.matrix-icon-toggle i::before {
    font-weight: 700 !important;
}
/* Inactive (unchecked): chamois-deep to match checkbox border */
.matrix-icon-toggle i.bi-question-circle {
    color: var(--chamois-deep);
}
/* Active (checked): chamois-full */
.matrix-icon-toggle i.bi-question-circle-fill {
    color: var(--chamois-full);
}

/* Status-based shaded cell backgrounds (Effort view only; Status view has colored buttons) */
/* Keep alternating row backgrounds as fallback, only override for cells with status shades */
/* Use high specificity to override Bootstrap's .table>:not(caption)>*>* */
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-ready,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-ready {
    background-color: var(--green-shade) !important;
}
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-manual,
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-setup,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-manual,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-setup {
    background-color: var(--chamois-light) !important;
}
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-develop,
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-api,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-develop,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-api {
    background-color: var(--blue-shade) !important;
}
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-unknown,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-unknown {
    background-color: var(--grey-shade) !important;
}
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-negative,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-negative {
    background-color: var(--signal-red-shade) !important;
}
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-nocost,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-nocost {
    background-color: var(--green-shade) !important;
}
.matrix-view-container[data-view="effort"] .table td.matrix-cell-bg-paid,
.matrix-view-container[data-view="all"] .table td.matrix-cell-bg-paid {
    background-color: var(--blue-shade) !important;
}

.matrix-product-blocked-total {
    background-color: var(--signal-red) !important;
    border-color: var(--signal-red) !important;
    color: var(--signal-yellow) !important;
}

/* Single cell: critical feature + NotAvailable = same red as blocked total (overrides shaded bg) */
.matrix-cell-critical-negative,
.matrix-view-container[data-view="effort"] .table td.matrix-cell-critical-negative,
.matrix-view-container[data-view="all"] .table td.matrix-cell-critical-negative {
    background-color: var(--signal-red) !important;
    border-color: var(--signal-red) !important;
    color: var(--signal-yellow) !important;
}

/* ordng AccessibilitySemanticColor — "reassert signal foregrounds over semantic
   descendants": these cells are signal-red bg + signal-yellow text. Pull EVERY
   descendant back to the cell's signal foreground, not only the classes that
   failed first. This catches the euro labels (blue/brown, ≈2:1 on red), category
   sums, status triggers, notes rows and any future semantic-colored child; icons
   follow via currentColor. `inherit` tracks the cell colour set above. */
.matrix-product-blocked-total *,
.matrix-cell-critical-negative * {
    color: inherit !important;
}

/* Dropdown options: fixed icon slot so labels align */
.matrix-status-option-icon {
    width: 2.2rem; /* sized to fit the widest marker ("API") */
    flex: 0 0 2.2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Matrix extra dropdown rows: icon-button + plain annotation text */
.matrix-edit-notes-row,
.matrix-edit-display-text-row {
    padding: 0.08rem 0.65rem; /* align with .btn-select padding */
    color: var(--black) !important;
}
.matrix-edit-notes-row:hover,
.matrix-edit-display-text-row:hover {
    color: var(--black) !important;
    text-decoration: none !important;
}
.matrix-edit-notes-icon-btn {
    /* Ensure the outline uses our strawberry secondary style (btn-secondary is customized in layout.css) */
    background-color: transparent !important;
    border-color: var(--strawberry) !important;
    color: var(--strawberry) !important;
}
.matrix-edit-notes-icon-btn i,
.matrix-edit-notes-icon-btn .bi,
.matrix-display-text-icon-letter {
    color: var(--strawberry) !important;
}
.matrix-display-text-icon-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1;
}
.matrix-edit-notes-label {
    font-weight: 400;
    font-size: 1.06rem; /* match .btn-select */
    line-height: 1;
}

/* Comparison dropdown (H1): normal text styling */
.comparison-dropdown-item {
    color: var(--black) !important;
    font-family: var(--font-sans, "Carlito", sans-serif) !important;
    font-size: 1rem;
    line-height: 1.3;
}

/* H1 dropdown trigger: native button with link-like heading styling */
.comparison-dropdown-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
}
.comparison-dropdown-toggle:hover,
.comparison-dropdown-toggle:focus {
    color: inherit !important;
    text-decoration: none !important;
}

/* Make line-icons in the matrix visually bolder (Bootstrap Icons are single-weight fonts). */
.matrix-view-container .bi-check-lg::before,
.matrix-view-container .bi-hand-index-thumb::before,
.matrix-view-container .bi-gear::before,
.matrix-view-container .bi-plug::before,
.matrix-view-container .bi-question-lg::before,
.matrix-view-container .bi-dash-lg::before {
    font-weight: 700 !important; /* overrides bootstrap-icons.css' 400 */
    -webkit-text-stroke: 0.35px currentColor;
    text-stroke: 0.35px currentColor;
}

/* ##########################################################################
   Sortable Tables (drag-and-drop row reordering)
   Generic styles for tables with class="sortable" on tbody.
   ########################################################################## */
.drag-handle {
    cursor: grab;
    color: var(--chamois-medium);
    padding-right: 0.5rem;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Drop placeholder: faded appearance while dragging */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--chamois-whisper) !important;
}

/* Currently dragged item: subtle highlight */
.sortable-chosen {
    background-color: var(--chamois-light) !important;
}

/* Column width for drag handle (narrow) in the features matrix */
.matrix-view-container th.drag-column,
.matrix-view-container td.drag-column {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
/* Force drag column padding/width in the comparison matrix */
#comparisonMatrix th.drag-column,
#comparisonMatrix td.drag-column {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Override global first-column padding for comparison matrix */
#comparisonMatrix th:first-child,
#comparisonMatrix td:first-child {
    padding-left: 0 !important;
}

/* Sortable index tables: keep content aligned, handles in left padding */
.table.sortable-table th.drag-column,
.table.sortable-table td.drag-column {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding: 0 !important;
    overflow: visible;
}
/* Empty header spacer for sortable tables */
.table.sortable-table thead th:first-child {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding: 0 !important;
}
@media (min-width: 576px) {
    .table.sortable-table tr > th.drag-column + th,
    .table.sortable-table tr > td.drag-column + td {
        padding-left: var(--page-edge-padding-desktop) !important;
    }
}

/* Feature comparison membership table: align checkbox column */
.comparison-alternatives-table .form-check {
    padding-left: 0;
    margin-left: 0;
}

.comparison-alternatives-table .form-check-input {
    margin-left: 0;
}

/* Keep disabled checkboxes visually consistent in this table */
.comparison-alternatives-table .form-check-input:disabled {
    opacity: 1;
    border-color: var(--chamois-deep) !important;
    background-color: var(--white);
}