body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/*
 * Stratum Project Board — Backend Styles
 *
 * Uses Contao's CSS custom properties exclusively for colours, ensuring
 * automatic light / dark mode support via html[data-color-scheme="dark"].
 *
 * Custom classes are prefixed with "stratum-" to avoid collisions with
 * Contao core or third-party bundles.  Built-in classes (.tl_submit,
 * .tl_select, .tl_text, .tl_gray, .tl_listing_container, etc.) are
 * reused wherever possible.
 *
 * @see vendor/contao/core-bundle/contao/themes/flexible/styles/base/variables.pcss
 */

/* ── Board wrapper ──────────────────────────────────────────────── */

.stratum-board {
    margin: 0;
    padding: 0;
}

/* ── Filter panel ──────────────────────────────────────────────────
   Uses Contao's native content-filter layout.  At ≥1280 px the
   .tl_show_all:has(>.content-filter) grid places the filter as a
   sticky right column and .content-inner as the left listing column.

   On mobile (<1280 px) the panel slides in from the right when the
   filter toggle button is pressed, exactly like Contao's native
   DC_Table list views. The Stimulus contao--toggle-sender /
   contao--toggle-receiver controllers handle the interaction.
   ─────────────────────────────────────────────────────────────────── */

/* Add horizontal padding to the content column to match Contao's
   tl_listing_container spacing (15 px each side). */
.stratum-board > .content-inner {
    padding: 0 15px;
}

/* ── Project card ───────────────────────────────────────────────── */

/* Base project styling — applied via details.stratum-project in the
   collapsible card section below. This block is intentionally empty;
   the old padding/border/background are on details.stratum-project. */

.stratum-project.is-hidden-from-client {
    opacity: 0.65;
}

/* ── Project header row ─────────────────────────────────────────── */

.stratum-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.stratum-project-title {
    margin: 0;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.stratum-project-title small {
    font-weight: normal;
    color: var(--gray);
}

.stratum-project-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.78rem;
}

/* ── Badge (status, hidden-from-client, etc.) ───────────────────── */

.stratum-badge {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
}

.stratum-badge--status {
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.stratum-badge--hidden {
    background: var(--new-bg);
    color: var(--orange);
    border: 1px solid transparent;
}

/* ── Project meta row ───────────────────────────────────────────── */

.stratum-project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    font-size: 0.8rem;
    color: var(--gray);
    margin-bottom: 8px;
    line-height: 1.4;
}

.stratum-project-meta strong {
    color: var(--text);
}

.stratum-project-meta a {
    color: var(--blue);
}

/* Inline date cell inside the project meta row — keep it visually
   aligned with the surrounding labels and color-shift to red when
   the project is past its due date and not done.

   The Due chip is an inline-flex so the "Due:" label sits centered
   on the picker icon rather than dropping to the baseline.

   Override the global .stratum-date-label absolute positioning so
   the date label flows inline next to the icon and the meta row's
   flex gap actually separates this chip from the next item. */
.stratum-project-meta-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stratum-project-meta-due.is-overdue {
    color: var(--red);
}

.stratum-project-meta-due.is-overdue strong,
.stratum-project-meta-due.is-overdue .stratum-meta-date-text {
    color: var(--red);
    font-weight: 600;
}

/* Dedicated meta-row date input — icon-only picker followed by the
   in-flow MM/DD/YY label. Independent of the table-cell variant
   (.stratum-date-cell) so it doesn't inherit absolute positioning
   that overflows the meta row. */
.stratum-meta-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.stratum-meta-date-input {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    color-scheme: light dark;
    flex-shrink: 0;
    border-radius: var(--border-radius);
}

.stratum-meta-date-input:hover {
    border-color: var(--form-border);
}

.stratum-meta-date-input::-webkit-datetime-edit,
.stratum-meta-date-input::-webkit-datetime-edit-fields-wrapper,
.stratum-meta-date-input::-webkit-datetime-edit-text,
.stratum-meta-date-input::-webkit-datetime-edit-month-field,
.stratum-meta-date-input::-webkit-datetime-edit-day-field,
.stratum-meta-date-input::-webkit-datetime-edit-year-field {
    display: none;
}

/* Picker indicator (calendar icon) styling is shared with the
   .stratum-date-cell rule below, which sets the background SVG. */

.stratum-meta-date-text {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.stratum-meta-date-text.is-empty {
    color: var(--gray);
}

/* ── Recent SOP runs (focus mode only) ───────────────────────────── */

.stratum-focus-runs {
    margin: 16px 0 0;
    padding: 12px 16px 14px;
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--border-radius);
}

.stratum-focus-runs-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.stratum-focus-runs-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.stratum-focus-runs-count {
    font-size: 0.75rem;
    color: var(--gray);
    background: var(--new-bg, var(--table-even));
    padding: 1px 8px;
    border-radius: 10px;
}

.stratum-focus-runs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stratum-focus-run {
    border-bottom: 1px solid var(--border, #eee);
}

.stratum-focus-run:last-child {
    border-bottom: none;
}

.stratum-focus-run-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    color: var(--text);
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.1s ease;
}

.stratum-focus-run-link:hover {
    background: var(--table-hover, rgba(46, 110, 191, 0.06));
    color: var(--blue, #2e6ebf);
    text-decoration: none;
}

.stratum-focus-run-status {
    flex-shrink: 0;
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--gray, #888);
    border-radius: 3px;
    min-width: 76px;
    text-align: center;
}

.stratum-focus-run-status--active    { background: #2e6ebf; }
.stratum-focus-run-status--completed { background: #16a34a; }
.stratum-focus-run-status--abandoned { background: #9a9a9a; }

.stratum-focus-run-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.stratum-focus-run-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--gray);
}

/* ── SOP picker modal (project board → "Run SOP" action) ─────────── */

.stratum-modal--sops {
    width: min(480px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.stratum-modal--sops .stratum-modal-body {
    overflow: auto;
    padding: 14px 18px 18px;
}

.stratum-sop-picker-sub {
    font-size: 0.85rem;
    color: var(--gray, #888);
    margin-bottom: 10px;
}

.stratum-sop-picker-filter {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 12px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    background: var(--input-bg, #fff);
    font-size: 0.9rem;
}

.stratum-sop-picker-filter:focus {
    outline: none;
    border-color: var(--blue, #2e6ebf);
    box-shadow: 0 0 0 2px rgba(46, 110, 191, 0.18);
}

.stratum-sop-picker-section + .stratum-sop-picker-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #eee);
}

.stratum-sop-picker-show-all {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed var(--form-border, #ccc);
    border-radius: var(--border-radius);
    color: var(--gray, #666);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.stratum-sop-picker-show-all:hover {
    background: var(--table-hover, rgba(46, 110, 191, 0.06));
    color: var(--blue, #2e6ebf);
    border-color: var(--blue, #2e6ebf);
}

.stratum-sop-picker-section h4 {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray, #777);
    text-transform: uppercase;
}

.stratum-sop-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stratum-sop-picker-list li {
    border-bottom: 1px solid var(--border, #eee);
}

.stratum-sop-picker-list li:last-child {
    border-bottom: none;
}

.stratum-sop-picker-list a {
    display: block;
    padding: 8px 10px;
    color: var(--text);
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.1s ease;
}

.stratum-sop-picker-list a:hover,
.stratum-sop-picker-list a:focus {
    background: var(--table-hover, rgba(46, 110, 191, 0.08));
    color: var(--blue, #2e6ebf);
    text-decoration: none;
}

.stratum-sop-picker-list--suggested a {
    font-weight: 600;
}

/* ── Project description (rich text below the meta row) ──────────── */

.stratum-project-description {
    position: relative;
    padding: 12px 14px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--new-bg, var(--table-even));
    border-left: 3px solid var(--blue, #2e6ebf);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.stratum-project-description-body p {
    margin: 0 0 0.5em;
}

.stratum-project-description-body p:last-child {
    margin-bottom: 0;
}

.stratum-project-description-body ul,
.stratum-project-description-body ol {
    margin: 0.25em 0 0.5em 1.25em;
    padding: 0;
}

/* Collapsed state — clamp to 3 lines using webkit-line-clamp.
   line-clamp is now broadly supported (Chrome, Firefox 68+, Safari).
   Fallback for older browsers: max-height + overflow hidden. */
.stratum-project-description.is-collapsed .stratum-project-description-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Fallback clamp: 3 lines × 1.5 line-height = 4.5em */
    max-height: 4.5em;
}

.stratum-project-description-toggle {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--blue, #2e6ebf);
    text-decoration: none;
    cursor: pointer;
}

.stratum-project-description-toggle:hover {
    text-decoration: underline;
}

/* ── Unmatched change-order banner ──────────────────────────────── */

.stratum-co-banner {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: var(--new-bg);
    border-left: 3px solid var(--orange);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.4;
}

.stratum-co-banner strong {
    color: var(--orange);
}

.stratum-co-banner em {
    color: var(--gray);
}

/* ── Milestone / task table ─────────────────────────────────────── */

/* Both header and body tables use table-layout:fixed with a shared
   <colgroup> so that columns align perfectly across separate tables
   (one header table + one body table per milestone group).            */
.stratum-board-table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.8rem;
    border-collapse: collapse;
    color: var(--text);
}

/* Column widths are set via inline style on <col> elements in the
   template <colgroup>.  table-layout:fixed ensures all tables share
   exactly the same widths:
   28 | flex | 100 | 40 | 110 | 110 | 110 | 160
   (handle | name | status | % | start | due | manager | actions) */

.stratum-board-table th {
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--gray);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stratum-board-table th.stratum-col-actions-th {
    text-align: right;
}

/* Header table sits flush against the body tables below */
.stratum-board-header-table {
    margin-bottom: 0;
}

/* Body tables: remove top margin so groups stack without gaps */
.stratum-board-body-table {
    margin: 0;
}

/* ── Drag handles ──────────────────────────────────────────────── */

td.stratum-col-handle {
    padding: 4px 2px !important;
    text-align: center;
    vertical-align: middle;
}

.stratum-milestone-handle,
.stratum-task-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    cursor: move;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.stratum-milestone-handle:hover,
.stratum-task-handle:hover {
    opacity: 1;
}

.stratum-milestone-handle img,
.stratum-task-handle img {
    width: 16px;
    height: 16px;
}

/* ── Sortable feedback (SortableJS classes) ────────────────────── */

/* The item left in place while dragging (ghost) */
div.stratum-milestone-group.sortable-chosen,
tr.stratum-task-row.sortable-chosen {
    opacity: 0.45;
    background: var(--panel-bg);
}

/* The dragged clone (follows cursor) — fully hidden by SortableJS */
div.stratum-milestone-group.sortable-drag,
tr.stratum-task-row.sortable-drag {
    opacity: 0;
}

/* Each milestone group gets a light border and vertical spacing
   to visually separate it from neighbouring groups */
.stratum-milestone-group {
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-block: 15px;
}

/* Milestone sortable wrapper — no extra spacing */
.stratum-milestone-sortable {
    margin: 0;
}

/* ── Inline select dropdowns (status, manager) ─────────────────── */

.stratum-inline-select {
    height: 24px;
    padding: 1px 4px;
    font-size: 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.stratum-inline-select:hover {
    border-color: var(--form-border);
    background: var(--form-bg);
}

.stratum-inline-select:focus {
    border-color: var(--blue);
    background: var(--form-bg);
    outline: none;
}

/* ── Inline date inputs ──────────────────────────────────────────
   Compact display: the <input type="date"> is collapsed to just the
   calendar icon, and a sibling <span class="stratum-date-label"> shows
   MM/DD/YY. Click the icon → native browser picker opens. Less visual
   noise than a full-width YYYY-MM-DD text field across rows. */

.stratum-date-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.stratum-inline-date {
    /* Native WebKit inputs don't respect a smaller `width` for the
       picker indicator — we shrink the visible-text area with field-sizing
       and hide the datetime-edit spinners below. */
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0;            /* collapse any text value */
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    color: transparent;      /* hide YYYY-MM-DD text */
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    color-scheme: light dark;
    flex-shrink: 0;
}

/* Hide the datetime-edit part entirely so only the picker indicator
   remains visible. WebKit only — other browsers fall back gracefully. */
.stratum-inline-date::-webkit-datetime-edit,
.stratum-inline-date::-webkit-datetime-edit-fields-wrapper,
.stratum-inline-date::-webkit-datetime-edit-text,
.stratum-inline-date::-webkit-datetime-edit-month-field,
.stratum-inline-date::-webkit-datetime-edit-day-field,
.stratum-inline-date::-webkit-datetime-edit-year-field {
    display: none;
}

.stratum-inline-date:hover {
    border-color: var(--form-border);
    background: var(--form-bg);
}

.stratum-inline-date:focus {
    border-color: var(--blue);
    background: var(--form-bg);
    outline: none;
}

.stratum-date-label {
    position: absolute;
    left: 1.5em;
    font-size: 0.75rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    user-select: none;
}

.stratum-date-label--empty {
    color: var(--gray);
}

/* Read-only date display — matches the .stratum-date-label font
   treatment but without the absolute positioning, so it can stand
   on its own in a cell (e.g. client request `receivedAt`). */
.stratum-date-readonly {
    font-size: 0.75rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.stratum-date-readonly--empty {
    color: var(--gray);
}

/* ── Native date picker icon override ──────────────────────────────
   Replace the browser's default ::-webkit-calendar-picker-indicator
   with our Stratum calendar SVG. Scoped to .stratum-date-cell so it
   only applies to our compact inline date inputs (board + client
   request list), not Contao's datepicker-wizard edit forms. */

.stratum-date-cell input[type="date"]::-webkit-calendar-picker-indicator,
.stratum-date-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.stratum-date-cell input[type="time"]::-webkit-calendar-picker-indicator,
.stratum-meta-date-input::-webkit-calendar-picker-indicator {
    background-image: url('/bundles/stratumclientportal/backend/calendar.svg');
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    cursor: pointer;
    opacity: 0.65;
    padding: 0;
    width: 16px;
    height: 16px;
    filter: none;
}

.stratum-date-cell input[type="date"]::-webkit-calendar-picker-indicator:hover,
.stratum-date-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.stratum-date-cell input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

html[data-color-scheme="dark"] .stratum-date-cell input[type="date"]::-webkit-calendar-picker-indicator,
html[data-color-scheme="dark"] .stratum-date-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-color-scheme="dark"] .stratum-date-cell input[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url('/bundles/stratumclientportal/backend/calendar--dark.svg');
}

/* Date inputs fill their column width (each date has its own column) */
.stratum-inline-date {
    width: 100%;
    box-sizing: border-box;
}

/* ── Milestone row ──────────────────────────────────────────────── */

.stratum-milestone-row td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.stratum-milestone-row.is-hidden-from-client {
    opacity: 0.55;
}

.stratum-milestone-name {
    font-size: 1em;
    font-weight: 600;
}

/* Overdue titles — red to flag items past their due date */
.stratum-milestone-name.is-overdue,
.stratum-task-name.is-overdue {
    color: var(--red);
}

/* Inline-editable rich-text descriptions (project / milestone /
   task). The block reads as static text by default; hover hints at
   editability, focus draws a soft blue ring, and an empty editor
   shows a placeholder via the data-placeholder attribute. */
.stratum-inline-richtext {
    position: relative;
    cursor: text;
    border-radius: 3px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 1.5em;
    outline: none;
}

.stratum-inline-richtext:hover {
    background: var(--table-hover, rgba(46, 110, 191, 0.06));
}

.stratum-inline-richtext:focus {
    background: var(--input-bg, #fff);
    box-shadow: 0 0 0 2px var(--blue, #2e6ebf);
}

html[data-color-scheme="dark"] .stratum-inline-richtext:focus {
    background: var(--input-bg, #1f1f1f);
}

/* Placeholder when the editor is empty. We can't use ::placeholder
   on a contenteditable, so we render data-placeholder via ::before
   when the element has no content. */
.stratum-inline-richtext:empty::before {
    content: attr(data-placeholder);
    color: var(--gray, #888);
    font-style: italic;
    pointer-events: none;
}

/* Editor is currently focused inside a clamped project description —
   suppress the clamp so the user can see what they're typing. */
.stratum-project-description.is-editing .stratum-project-description-body {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
    display: block;
    overflow: visible;
}

/* Empty description block — bypass the line-clamp so the placeholder
   text renders correctly, and keep a small clickable region visible
   so users can click in to add content. */
.stratum-project-description.is-empty .stratum-project-description-body {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
    min-height: 1.5em;
    overflow: visible;
}

/* Empty milestone / task / bug description rows — collapse padding when
   no content exists, but keep the editable region clickable. */
.stratum-task-description-row.is-empty-desc .stratum-task-description,
.stratum-milestone-description-row.is-empty-desc .stratum-milestone-description,
.stratum-bug-description-row.is-empty-desc .stratum-bug-description {
    min-height: 1.5em;
}

/* Faded chevron when the description is empty — hints that clicking
   it opens an empty editor rather than existing content. */
.stratum-task-toggle.is-empty,
.stratum-milestone-toggle.is-empty,
.stratum-bug-toggle.is-empty {
    opacity: 0.4;
}

.stratum-task-toggle.is-empty:hover,
.stratum-milestone-toggle.is-empty:hover,
.stratum-bug-toggle.is-empty:hover {
    opacity: 0.8;
}

/* Inline-editable milestone / task names (contenteditable spans).
   The default state looks like plain text; hover shows a subtle
   underline cue, and focus reveals a soft outline + background so
   the user can clearly see the editing region. */
.stratum-inline-name {
    cursor: text;
    border-radius: 3px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.stratum-inline-name:hover {
    background: var(--table-hover, rgba(46, 110, 191, 0.06));
}

.stratum-inline-name:focus {
    outline: none;
    background: var(--input-bg, #fff);
    box-shadow: 0 0 0 2px var(--blue, #2e6ebf);
}

html[data-color-scheme="dark"] .stratum-inline-name:focus {
    background: var(--input-bg, #1f1f1f);
}

/* ── Task row ───────────────────────────────────────────────────── */

.stratum-task-row td {
    padding: 4px 8px 4px 24px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    background: var(--table-even);
}

/* First column gets the indent, others reset to normal */
.stratum-task-row td:not(:first-child) {
    padding-left: 8px;
}

.stratum-task-row.is-hidden-from-client {
    opacity: 0.45;
}

.stratum-task-arrow {
    color: var(--gray);
}

/* Inner flex wrapper for the task-name cell — arrow, timer, and
   title are vertically centered; wrapped title lines stay in the
   title column instead of flowing under the timer icon. Wrapping
   is on a <div> rather than the <td> itself because `display:flex`
   on a table cell is inconsistent across browsers. */
.stratum-task-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stratum-task-name-cell > .stratum-task-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* When the task-name is a clickable toggle, lay it out as an inline
   flex row so the chevron stays pinned next to the title text
   regardless of how the title wraps. */
a.stratum-task-name.stratum-task-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

a.stratum-task-name.stratum-task-toggle > .stratum-toggle-icon {
    flex: 0 0 auto;
}

/* ── Task description accordion ──────────────────────────────────── */

.stratum-task-toggle {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stratum-task-toggle:hover {
    text-decoration: underline;
}

.stratum-toggle-icon {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.15s ease;
    line-height: 0;
}

/* backend_icon() emits TWO imgs (light + dark variants) toggled by
   Contao's BE CSS via .color-scheme--light / .color-scheme--dark.
   Size them without touching display, so Contao's hide rule still wins. */
.stratum-toggle-icon img {
    width: 18px;
    height: 18px;
}

.stratum-task-toggle.is-open .stratum-toggle-icon {
    transform: rotate(90deg);
}

.stratum-task-description-row td {
    padding: 0 8px 0 48px;
    border-bottom: 1px solid var(--border);
    background: var(--table-even);
}

.stratum-task-description {
    padding: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    border-left: 3px solid var(--primary);
    margin: 4px 0 8px;
}

.stratum-task-description p {
    margin: 0 0 0.5em;
}

.stratum-task-description p:last-child {
    margin-bottom: 0;
}

.stratum-task-description ul,
.stratum-task-description ol {
    margin: 0.25em 0 0.5em 1.25em;
    padding: 0;
}

/* ── Milestone name cell + description row ───────────────────────── */

/* Inline flex wrapper so the chevron + Hidden badge stay on one line
   next to the editable name without odd wrapping. */
.stratum-milestone-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stratum-milestone-name-cell > .stratum-milestone-name {
    flex: 1 1 auto;
    min-width: 0;
}

.stratum-milestone-toggle {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.stratum-milestone-toggle .stratum-toggle-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease;
}

.stratum-milestone-toggle.is-open .stratum-toggle-icon {
    transform: rotate(90deg);
}

.stratum-milestone-description-row td {
    padding: 0 8px 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--table-header, var(--table-even));
}

.stratum-milestone-description {
    padding: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    border-left: 3px solid var(--primary);
    margin: 4px 0 8px;
}

.stratum-milestone-description p {
    margin: 0 0 0.5em;
}

.stratum-milestone-description p:last-child {
    margin-bottom: 0;
}

.stratum-milestone-description ul,
.stratum-milestone-description ol {
    margin: 0.25em 0 0.5em 1.25em;
    padding: 0;
}

/* ── Change-order row (inside milestone table) ──────────────────── */

.stratum-co-row td {
    padding: 4px 8px 4px 24px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    background: var(--new-bg);
    font-style: italic;
}

.stratum-co-row td:not(:first-child) {
    padding-left: 8px;
}

.stratum-co-label {
    color: var(--orange);
    font-weight: 600;
    font-style: normal;
}

/* ── Action links ───────────────────────────────────────────────── */

.stratum-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.stratum-actions a,
.stratum-project-actions a {
    font-size: 0.75rem;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.stratum-actions a:hover,
.stratum-project-actions a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Icon-based action links (edit, delete, visibility) */
.stratum-icon-action {
    display: inline-flex;
    align-items: center;
    position: relative;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.stratum-icon-action:hover {
    opacity: 1;
    text-decoration: none !important;
}

.stratum-icon-action img {
    width: 16px;
    height: 16px;
}

.stratum-action-sop.has-suggestions {
    opacity: 0.9;
}

.stratum-sop-count {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--blue, #2e6ebf);
    color: #fff;
    font-size: 9px;
    line-height: 13px;
    text-align: center;
}

/* Disabled icon — greyed out, not clickable */
.stratum-icon-disabled {
    opacity: 0.2 !important;
    cursor: default;
    pointer-events: none;
}

/* Delete icon — slightly red-tinted via filter on hover */
.stratum-actions .stratum-action-delete {
    color: var(--red);
}

.stratum-actions .stratum-action-delete:hover {
    color: var(--red);
}

/* Visibility toggle — both icons rendered; CSS shows/hides by state */
.stratum-action-visibility {
    opacity: 0.45;
}

.stratum-action-visibility:hover {
    opacity: 1;
}

.stratum-action-visibility .stratum-vis-show,
.stratum-action-visibility .stratum-vis-hide {
    display: inline-flex;
    align-items: center;
}

.stratum-action-visibility .stratum-vis-hide {
    display: none;
}

.stratum-action-visibility.is-invisible .stratum-vis-show {
    display: none;
}

.stratum-action-visibility.is-invisible .stratum-vis-hide {
    display: inline-flex;
}

/* ── Empty state ────────────────────────────────────────────────── */

.stratum-empty {
    padding: 16px 8px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray);
}

.stratum-empty-milestones {
    padding: 4px 0 0;
    font-size: 0.8rem;
    color: var(--gray);
}

/* ── Timer column ─────────────────────────────────────────────── */

.stratum-col-timer {
    white-space: nowrap;
    width: 60px;
    padding-right: 0 !important;
}

.stratum-timer-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stratum-timer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    color: var(--text);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.stratum-timer-btn:hover {
    opacity: 1;
}

/* Hide the play button when this task's timer is running (header bar controls stop) */
.stratum-timer-btn .stratum-timer-play { color: var(--green, #16a34a); }
.stratum-timer-btn.is-running { display: none; }

/* ── Notes badge ───────────────────────────────────────────────── */

.stratum-notes-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

/* ── Modal overlay ─────────────────────────────────────────────── */

.stratum-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.stratum-modal {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--border-radius-lg);
    width: 420px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.stratum-modal--entries {
    width: 560px;
}

.stratum-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
}

.stratum-modal-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stratum-modal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--gray);
    cursor: pointer;
    padding: 0 4px;
}

.stratum-modal-close:hover {
    color: var(--text);
}

.stratum-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.stratum-modal-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.stratum-modal-body .tl_textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    padding: 8px;
    background: var(--form-bg);
    color: var(--text);
    resize: vertical;
}

.stratum-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--content-border);
}

/* ── Time entries list (inside modal) ──────────────────────────── */

.stratum-entries-total {
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text);
}

.stratum-entries-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stratum-entry {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--table-even);
}

.stratum-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 4px;
}

.stratum-entry-date {
    font-weight: 600;
}

.stratum-entry-user {
    color: var(--gray);
}

.stratum-entry-time {
    color: var(--gray);
}

.stratum-entry-desc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text);
}

.stratum-entry-desc-text {
    flex: 1;
    line-height: 1.4;
}

.stratum-entry-edit-btn,
.stratum-entry-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 1px;
    vertical-align: middle;
}

.stratum-entry-editor {
    margin-top: 6px;
}

.stratum-entry-editor .tl_textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    padding: 6px;
    background: var(--form-bg);
    color: var(--text);
    resize: vertical;
    margin-bottom: 6px;
}

.stratum-entry-editor-actions {
    display: flex;
    gap: 6px;
}

.stratum-entry-editor-actions .tl_submit {
    font-size: 0.75rem;
    padding: 4px 10px;
    height: auto;
}

/* ── Time link (clickable to edit) ─────────────────────────────── */

.stratum-entry-time-link {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dotted var(--link);
}

.stratum-entry-time-link:hover {
    color: var(--link-hover);
    border-bottom-style: solid;
}

/* ── Time editor (inline start/end inputs) ─────────────────────── */

.stratum-entry-time-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.stratum-time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.stratum-entry-time-editor label {
    font-size: 0.8rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.stratum-entry-time-editor .tl_text {
    width: 110px;
    font-size: 0.8rem;
    padding: 3px 6px;
    height: auto;
}

/* ── Modal header actions (add + close) ─────────────────────────── */

.stratum-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.stratum-add-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--link);
    text-decoration: none;
    white-space: nowrap;
}

.stratum-add-entry-btn:hover {
    color: var(--link-hover);
}

/* ── Add entry form ─────────────────────────────────────────────── */

.stratum-add-entry-form {
    padding: 12px;
    margin-bottom: 12px;
    background: var(--panel-bg, #f6f6f6);
    border: 1px solid var(--content-border);
    border-radius: var(--border-radius);
}

.stratum-add-entry-form .stratum-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.stratum-add-entry-form label {
    font-size: 0.8rem;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stratum-add-entry-form .tl_text {
    font-size: 0.8rem;
    padding: 3px 6px;
    height: auto;
}

.stratum-add-entry-form .tl_textarea {
    font-size: 0.8rem;
    padding: 6px;
    border: 1px solid var(--form-border);
    border-radius: var(--border-radius);
    background: var(--form-bg);
    color: var(--text);
    resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════
   Stratum Add-on Section — shared standard for collapsible
   project-level panels (bugs, Slack, future add-ons).
   ═══════════════════════════════════════════════════════════════ */
.stratum-addon-section {
    margin: 10px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--form-bg);
}

.stratum-addon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 12px;
}

.stratum-addon-toggle {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    line-height: inherit;
}

.stratum-addon-toggle:hover {
    text-decoration: none;
    color: var(--link);
}

.stratum-addon-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url('/system/themes/flexible/icons/chevron-right.svg') center / contain no-repeat;
    transition: transform 0.2s ease;
}

html[data-color-scheme="dark"] .stratum-addon-arrow {
    background-image: url('/system/themes/flexible/icons/chevron-right--dark.svg');
}

.stratum-addon-toggle.is-open .stratum-addon-arrow {
    transform: rotate(90deg);
}

.stratum-addon-count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 400;
    background: var(--panel-bg, #e5e5e5);
    color: var(--gray, #555);
}

.stratum-addon-count--alert {
    background: #ffeaea;
    color: #c0392b;
    font-weight: 600;
}

.stratum-addon-action {
    color: var(--link);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--body-bg, #fff);
}

.stratum-addon-action:hover {
    background: var(--panel-bg);
    text-decoration: none;
}

.stratum-addon-body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--border);
}

.stratum-addon-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Bug section (extends add-on standard) ─────────────────────── */

.stratum-bugs-empty {
    padding: 12px 0;
    text-align: center;
    font-style: italic;
}

.stratum-bugs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.85rem;
    margin-top: 8px;
}

.stratum-bugs-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
    background: transparent;
}

.stratum-bugs-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.stratum-bug-row.is-resolved .stratum-bug-title {
    text-decoration: line-through;
    color: var(--text-muted, #888);
}

.stratum-bug-row.is-resolved {
    opacity: 0.65;
}

.stratum-bug-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.stratum-bug-title {
    color: var(--text);
    font-weight: 500;
}

a.stratum-bug-toggle {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
}

a.stratum-bug-toggle:hover {
    text-decoration: underline;
}

a.stratum-bug-toggle.is-open .stratum-toggle-icon {
    display: inline-block;
    transform: rotate(90deg);
}

.stratum-bug-description-row td {
    background: var(--table-even);
    border-bottom: 1px solid var(--border);
    padding: 0 8px 0 40px;
}

.stratum-bug-description {
    padding: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    border-left: 3px solid var(--primary);
    margin: 4px 0 8px;
}

.stratum-bug-description p {
    margin: 0 0 0.5em;
}

.stratum-bug-description p:last-child {
    margin-bottom: 0;
}

.stratum-bug-description ul,
.stratum-bug-description ol {
    margin: 0.25em 0 0.5em 1.25em;
    padding: 0;
}

/* Priority badges */
.stratum-bug-priority-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #e5e5e5;
    color: #555;
}

.stratum-bug-priority-badge--low {
    background: #e7f3ff;
    color: #2e6ebf;
}

.stratum-bug-priority-badge--normal {
    background: #eef0f3;
    color: #555;
}

.stratum-bug-priority-badge--high {
    background: #fff1e0;
    color: #b85c00;
}

.stratum-bug-priority-badge--critical {
    background: #fbdede;
    color: #c0392b;
}

/* Left-border accent on critical/high bug rows */
.stratum-bug-row.stratum-bug-priority--critical td:first-child {
    border-left: 3px solid #c0392b;
}

.stratum-bug-row.stratum-bug-priority--high td:first-child {
    border-left: 3px solid #b85c00;
}

/* ═══════════════════════════════════════════════════════════════
   Collapsible project cards, groups, toolbar, progress bar.
   Phase 1 UX: scalable board for many projects.
   ═══════════════════════════════════════════════════════════════ */

/* ── Board toolbar ─────────────────────────────────────────────── */

.stratum-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 12px;
    font-size: 0.85rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.stratum-board-summary {
    color: var(--gray);
}

.stratum-attention-count {
    color: var(--red, #c0392b);
}

.stratum-board-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stratum-toolbar-btn {
    padding: 3px 10px;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--body-bg, #fff);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease;
}

.stratum-toolbar-btn:hover {
    background: var(--panel-bg);
}

/* ── "Only mine" toggle ───────────────────────────────────────── */

.stratum-only-mine {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--body-bg, #fff);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.stratum-only-mine:hover {
    background: var(--panel-bg);
}

.stratum-only-mine.is-active {
    background: var(--blue, #2e6ebf);
    color: #fff;
    border-color: var(--blue, #2e6ebf);
}

.stratum-only-mine input[type="checkbox"] {
    accent-color: #fff;
}

/* ── Group sections ───────────────────────────────────────────── */

.stratum-group {
    margin-bottom: 16px;
}

.stratum-group-heading {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 0 4px;
    margin: 0 0 6px;
    color: var(--gray);
    border-bottom: 1px solid var(--border);
}

.stratum-group-heading--attention {
    color: var(--red, #c0392b);
    border-bottom-color: var(--red, #c0392b);
}

.stratum-group-heading--active {
    color: var(--green, #2e8b57);
    border-bottom-color: var(--green, #2e8b57);
}

.stratum-group-heading--recurring {
    color: var(--blue, #2b6cb0);
    border-bottom-color: var(--blue, #2b6cb0);
}

.stratum-group-heading--inactive {
    color: var(--gray);
}

/* ── Collapsible project card (<details>) ──────────────────────── */

details.stratum-project {
    margin-bottom: 8px;
    border: 1px solid var(--content-border);
    border-radius: var(--border-radius);
    background: var(--content-bg);
    transition: border-color 0.15s ease;
}

/* Closed project card — preview the open-state accent on hover. */
details.stratum-project:not([open]):hover {
    border-color: var(--blue, #2e6ebf);
}

/* Open project — subtle elevation + left accent bar to make the
   active card stand out from the collapsed siblings. */
details.stratum-project[open] {
    margin-block: 16px;
    border: 1px solid var(--blue, #2e6ebf);
    border-left: 10px solid var(--blue, #2e6ebf);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

html[data-color-scheme="dark"] details.stratum-project[open] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Remove default <details> marker */
details.stratum-project > summary {
    list-style: none;
}

details.stratum-project > summary::-webkit-details-marker {
    display: none;
}

details.stratum-project > summary::marker {
    display: none;
    content: '';
}

/* ── Summary row (collapsed header) ────────────────────────────── */

.stratum-project-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease;
}

.stratum-project-summary:hover {
    background: var(--panel-bg);
}

/* Chevron icon — uses Contao's own theme icon with dark mode swap */
.stratum-project-chevron {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url('/system/themes/flexible/icons/chevron-right.svg') center / contain no-repeat;
    transition: transform 0.2s ease;
}

html[data-color-scheme="dark"] .stratum-project-chevron {
    background-image: url('/system/themes/flexible/icons/chevron-right--dark.svg');
}

details.stratum-project[open] > .stratum-project-summary .stratum-project-chevron {
    transform: rotate(90deg);
}

.stratum-project-summary-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.stratum-project-summary-title small {
    font-weight: normal;
    color: var(--gray);
}

.stratum-project-summary-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.78rem;
}

/* ── Progress bar ──────────────────────────────────────────────── */

.stratum-progress-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
}

.stratum-progress-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.stratum-progress--done { background: var(--green, #2e8b57); }
.stratum-progress--good { background: var(--green, #2e8b57); }
.stratum-progress--mid  { background: var(--orange, #f47c00); }
.stratum-progress--low  { background: var(--yellow, #d4a017); }

/* ── Summary count badges ──────────────────────────────────────── */

.stratum-summary-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--gray);
    white-space: nowrap;
}

.stratum-count-badge {
    display: inline-block;
    padding: 0 5px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.5;
}

.stratum-count-badge--bug {
    background: #fff1e0;
    color: #b85c00;
}

.stratum-count-badge--overdue {
    background: #ffeaea;
    color: #c0392b;
}

/* ── Summary chips: due date + assigned manager ───────────────── */

/* Both render at the start of the summary meta row (before recurring,
   bug, and overdue badges) so the user can see them at a glance on
   collapsed project cards without expanding. Intentionally low-key
   compared to the alert badges — informational, not warnings. */
.stratum-summary-due,
.stratum-summary-manager {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    background: var(--new-bg, var(--table-even, #eef2f7));
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
}

.stratum-summary-manager {
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overdue projects — match the meta-row's red-bold treatment in the
   expanded view so a closed card screams "this slipped" the same way. */
.stratum-summary-due.is-overdue {
    background: #ffeaea;
    color: #c0392b;
    font-weight: 700;
}

/* ── Recurring badge ───────────────────────────────────────────── */

.stratum-badge--recurring {
    border: 1px dashed var(--purple, #7c3aed);
    color: var(--purple, #7c3aed);
    background: transparent;
    font-size: 0.65rem;
}

/* ── Expanded project body ─────────────────────────────────────── */

.stratum-project-body {
    padding: 0 12px 10px;
}

/* When expanded, the summary acts as the top border and the
   full header is inside the body — hide the summary title's
   duplicate info by keeping the summary visually simple. */
details.stratum-project[open] > .stratum-project-summary {
    margin-bottom: 0;
    border-bottom: none;
}

/* Hide the summary meta (badges, progress bar) when expanded —
   the full header inside the body shows everything already. */
details.stratum-project[open] .stratum-project-summary-meta {
    display: none;
}

details.stratum-project[open] .stratum-project-summary-title {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 2 UX: client prominence, by-client grouping, focus mode.
   Per team feedback, the team thinks first in terms of "which
   client is this for", not "which project is this". So the
   collapsed summary leads with the client name (bold) and trails
   with the project name in muted text.
   ═══════════════════════════════════════════════════════════════ */

/* Collapsed summary: client name primary, project name secondary. */
.stratum-summary-client {
    font-weight: 600;
    color: var(--text);
}

.stratum-summary-project {
    font-weight: 400;
    color: var(--gray);
    margin-left: 4px;
}

/* In-body header: stack client name (h2) + project subtitle. */
.stratum-project-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stratum-project-subtitle {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.3;
}

/* Group heading variant for "by client" mode — neutral colour,
   slightly larger client name. */
.stratum-group-heading--client {
    color: var(--text);
    border-bottom-color: var(--border);
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Focus mode: hide the right-hand filter panel and let the
   project card take the full content width. A small "back to
   board" bar replaces the filter chrome. */
.stratum-board--focus .content-filter {
    display: none;
}

.stratum-board--focus .content-inner {
    grid-column: 1 / -1;
}

.stratum-focus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}

.stratum-focus-back {
    color: var(--blue, #2e6ebf);
    text-decoration: none;
    font-weight: 600;
}

.stratum-focus-back:hover {
    text-decoration: underline;
}

.stratum-focus-label {
    color: var(--gray);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* "Flip to next cycle" button — only renders for recurring projects.
   Sits to the right of the Focus Mode label so it's visible the moment
   the user opens a recurring project. */
.stratum-focus-flip {
    margin-left: auto;
    padding: 4px 10px;
    background: var(--blue, #2e6ebf);
    color: #fff;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}

.stratum-focus-flip:hover {
    background: #1d4f99;
    color: #fff;
    text-decoration: none;
}

/* Focus icon styling — borrows the standard icon-action treatment. */
.stratum-action-focus {
    opacity: 0.7;
}

.stratum-action-focus:hover {
    opacity: 1;
}

/*
 * Stratum Time Reports — Backend Styles
 *
 * Uses Contao's CSS custom properties for automatic light/dark mode.
 * Custom classes prefixed with "stratum-report-" to avoid collisions.
 */

/* ── Report wrapper ──────────────────────────────────────────────── */

.stratum-reports > .content-inner {
    padding: 0 15px;
}

/* ── Preset buttons ──────────────────────────────────────────────── */

.stratum-report-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.stratum-report-presets .tl_submit {
    font-size: 0.8rem;
    padding: 4px 10px;
    height: auto;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

/* ── Grand total banner ──────────────────────────────────────────── */

.stratum-report-grand-total {
    display: flex;
    gap: 20px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--panel-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    color: var(--text);
}

/* ── Project card ────────────────────────────────────────────────── */

.stratum-report-project {
    margin-bottom: 16px;
    border: 1px solid var(--content-border);
    border-radius: var(--border-radius);
    background: var(--content-bg);
    overflow: hidden;
}

.stratum-report-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--table-header);
    border-bottom: 1px solid var(--border);
}

.stratum-report-project-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

/* ── Totals ──────────────────────────────────────────────────────── */

.stratum-report-totals {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Milestone ───────────────────────────────────────────────────── */

.stratum-report-milestone {
    border-bottom: 1px solid var(--border);
}

.stratum-report-milestone:last-child {
    border-bottom: none;
}

.stratum-report-milestone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
}

.stratum-report-milestone-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

/* ── Task ────────────────────────────────────────────────────────── */

.stratum-report-task {
    padding: 0;
}

.stratum-report-task-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 28px;
    font-size: 0.85rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.stratum-report-task-header .stratum-report-totals {
    margin-left: auto;
}

/* ── Entry table ─────────────────────────────────────────────────── */

.stratum-report-entries {
    width: 100%;
    font-size: 0.78rem;
    color: var(--text);
    border-collapse: collapse;
}

.stratum-report-entries tr {
    border-bottom: 1px solid var(--border);
}

.stratum-report-entries tr:last-child {
    border-bottom: none;
}

.stratum-report-entries td {
    padding: 4px 8px 4px 0;
    vertical-align: top;
}

.stratum-report-entries td:first-child {
    padding-left: 42px;
}

.stratum-re-date {
    font-weight: 600;
    white-space: nowrap;
    width: 100px;
}

.stratum-re-user {
    color: var(--gray);
    white-space: nowrap;
    width: 120px;
}

.stratum-re-time {
    color: var(--gray);
    white-space: nowrap;
    width: 130px;
}

.stratum-re-dur {
    font-weight: 600;
    white-space: nowrap;
    width: 60px;
}

.stratum-re-cost {
    white-space: nowrap;
    width: 70px;
    color: var(--gray);
}

.stratum-re-desc {
    color: var(--gray);
}

/* ── Print styles ────────────────────────────────────────────────── */

@media print {
    .content-filter,
    .operations,
    .stratum-report-presets {
        display: none !important;
    }

    .stratum-reports > .content-inner {
        padding: 0;
    }

    .stratum-report-project {
        break-inside: avoid;
    }
}

/*
 * Stratum Client Report — Backend Styles
 *
 * Summary-level billing report: Client → Project table with subtotals.
 * Uses Contao CSS custom properties for automatic light/dark mode.
 */

/* ── Filter summary bar ─────────────────────────────────────────── */

.stratum-cr-filter-summary {
    padding: 8px 14px;
    margin-bottom: 14px;
    background: var(--panel-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--border-radius);
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.6;
}

/* ── Report table ───────────────────────────────────────────────── */

.stratum-cr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--text);
}

.stratum-cr-table thead th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--gray, #888);
    white-space: nowrap;
}

.stratum-cr-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

/* Column widths and alignment */

.cr-col-client { min-width: 160px; }
.cr-col-project { min-width: 200px; }
.cr-col-status { width: 80px; }
.cr-col-type { width: 100px; }

.cr-col-rate,
.cr-col-hours,
.cr-col-fees {
    text-align: right;
    white-space: nowrap;
}

th.cr-col-rate,
th.cr-col-hours,
th.cr-col-fees {
    text-align: right;
}

.cr-col-rate { width: 80px; }
.cr-col-hours { width: 70px; }
.cr-col-fees { width: 90px; }

/* ── Project rows ───────────────────────────────────────────────── */

.cr-row-project td {
    color: var(--text);
}

/* ── Subtotal rows (per client) ─────────────────────────────────── */

.cr-row-subtotal td {
    border-bottom: 1px solid var(--border);
    background: var(--table-even, #f8f8f8);
    padding-top: 6px;
    padding-bottom: 6px;
}

.cr-row-subtotal .cr-col-client {
    font-weight: 700;
}

/* Spacing between client groups */
.cr-row-subtotal + .cr-row-project td {
    padding-top: 14px;
}

/* ── Grand total row ────────────────────────────────────────────── */

.cr-row-total td {
    border-top: 2px solid var(--border);
    border-bottom: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding-top: 10px;
}

/* ── Print styles ───────────────────────────────────────────────── */

@media print {
    .content-filter,
    .operations,
    .stratum-cr-filter-summary {
        display: none !important;
    }

    .stratum-client-report > .content-inner {
        padding: 0;
    }

    .stratum-cr-table {
        font-size: 11px;
    }

    .cr-row-subtotal td {
        background: #f5f5f5 !important;
    }

    tr {
        page-break-inside: avoid;
    }
}

/**
 * My Work Dashboard — backend welcome screen widget.
 *
 * Renders three side-by-side columns (Tasks | Requests | Bugs) beneath
 * the system messages area. Uses Contao's backend CSS vars so light and
 * dark themes are honored automatically.
 */

.stratum-mywork {
    margin: 1.5em 0 2em;
    margin-inline: 15px;
    padding: 0;
    background: var(--panel-bg, #fff);
    border: 1px solid var(--content-border, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stratum-mywork-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1.25em;
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex-wrap: wrap;
    gap: 1em;
}

.stratum-mywork-title {
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--text, #111827);
}

.stratum-mywork-filters {
    font-size: 0.9em;
}

.stratum-mywork-filters > summary {
    cursor: pointer;
    padding: 0.35em 0.75em;
    background: var(--button-bg, #f3f4f6);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 4px;
    user-select: none;
    list-style: none;
}

.stratum-mywork-filters > summary::-webkit-details-marker {
    display: none;
}

.stratum-mywork-filters[open] > summary {
    background: var(--active-bg, #e0e7ff);
}

.stratum-mywork-filter-form {
    position: absolute;
    right: 1.25em;
    z-index: 50;
    margin-top: 0.5em;
    padding: 1em;
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 600px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}

.stratum-mywork-filter-form fieldset {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    padding: 0.5em 0.75em;
    margin: 0;
}

.stratum-mywork-filter-form legend {
    font-weight: 600;
    padding: 0 0.25em;
    font-size: 0.85em;
    color: var(--text, #111827);
}

.stratum-mywork-filter-form label {
    display: block;
    padding: 0.15em 0;
    font-size: 0.85em;
    cursor: pointer;
}

.stratum-mywork-filter-form label input {
    margin-right: 0.4em;
}

.stratum-mywork-filter-buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
    padding-top: 0.5em;
    border-top: 1px solid var(--border, #e5e7eb);
}

/* ── Columns ────────────────────────────────────────────────── */

.stratum-mywork-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border, #e5e7eb);
}

.stratum-mywork-col {
    background: var(--panel-bg, #fff);
    padding: 1em 1.25em;
    min-width: 0;
}

.stratum-mywork-col header {
    margin-bottom: 0.75em;
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding-bottom: 0.5em;
}

.stratum-mywork-col h3 {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text, #111827);
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.stratum-mywork-count {
    display: inline-block;
    background: var(--button-bg, #f3f4f6);
    color: var(--text, #374151);
    font-size: 0.75em;
    padding: 0.1em 0.5em;
    border-radius: 10px;
    font-weight: 500;
}

.stratum-mywork-empty {
    margin: 1em 0;
    padding: 1em;
    text-align: center;
    color: var(--gray, #6b7280);
    font-size: 0.9em;
    background: var(--button-bg, #f9fafb);
    border-radius: 4px;
}

/* ── Buckets ────────────────────────────────────────────────── */

.stratum-mywork-bucket {
    margin-bottom: 1em;
}

.stratum-mywork-bucket:last-child {
    margin-bottom: 0;
}

.stratum-mywork-bucket h4 {
    margin: 0 0 0.4em 0;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray, #6b7280);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.stratum-mywork-bucket-overdue h4 {
    color: #dc2626;
}

.stratum-mywork-bucket-week h4 {
    color: #d97706;
}

.stratum-mywork-bucket-count {
    font-size: 0.95em;
    color: inherit;
    opacity: 0.7;
}

/* ── Items ──────────────────────────────────────────────────── */

.stratum-mywork-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stratum-mywork-item {
    /* Position the card so the title's ::before overlay can cover
       the whole item (card-link pattern). */
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.5em 0.6em;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    margin-bottom: 0.35em;
    background: var(--panel-bg, #fff);
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}

.stratum-mywork-item:hover {
    background: var(--hover-bg, #f9fafb);
    border-color: var(--blue, #2e6ebf);
}

.stratum-mywork-item-body {
    flex: 1;
    min-width: 0;
}

.stratum-mywork-item-title {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text, #111827);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stratum-mywork-item-title:hover {
    color: var(--link-hover, #2563eb);
}

/* The whole card navigates via a JS click delegate on the dashboard
   root (see my-work-dashboard.js) — clicks on the timer button (or
   any other <button>) opt out and run their own handler. We use JS
   rather than a CSS overlay because the CSS approach was unreliable
   when other backend stylesheets re-asserted z-index. */

.stratum-mywork-item-meta {
    font-size: 0.75em;
    color: var(--gray, #6b7280);
    margin-top: 0.2em;
    display: flex;
    gap: 0.4em;
    flex-wrap: wrap;
}

.stratum-mywork-item-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em;
}

.stratum-mywork-item-client {
    font-weight: 500;
    color: var(--text, #374151);
}

.stratum-mywork-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25em;
    flex-shrink: 0;
}

.stratum-mywork-status-pill {
    display: inline-block;
    padding: 0.1em 0.5em;
    font-size: 0.7em;
    font-weight: 600;
    color: #fff;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.stratum-mywork-item-date {
    font-size: 0.75em;
    color: var(--gray, #6b7280);
    font-weight: 500;
}

.stratum-mywork-item-substatus {
    font-size: 0.7em;
    color: var(--gray, #6b7280);
    font-style: italic;
}

/* ── Timer button ───────────────────────────────────────────── */

.stratum-mywork-timer-btn {
    /* Sits above the card-link overlay so it remains independently
       clickable without triggering the card's link. */
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.stratum-mywork-timer-btn img {
    width: 14px;
    height: 14px;
    pointer-events: none; /* Click target is the button, not the image */
}

.stratum-mywork-timer-btn:hover {
    opacity: 1;
    transform: scale(1.08);
}

.stratum-mywork-timer-btn.is-running {
    opacity: 1;
}

/* Subtle pulse so a running timer is obvious at a glance. */
.stratum-mywork-timer-btn.is-running img {
    animation: stratumMyworkPulse 1.4s ease-in-out infinite;
}

@keyframes stratumMyworkPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.stratum-mywork-timer-btn.is-loading {
    opacity: 0.45;
    cursor: wait;
}

.stratum-mywork-timer-btn[disabled] {
    cursor: wait;
}

/* ── "Show X more" accordion ───────────────────────────────── */

.stratum-mywork-more {
    margin-top: 0.25em;
}

.stratum-mywork-more > summary {
    cursor: pointer;
    font-size: 0.8em;
    color: var(--link, #2563eb);
    padding: 0.25em 0.5em;
    list-style: none;
    user-select: none;
}

.stratum-mywork-more > summary::-webkit-details-marker {
    display: none;
}

.stratum-mywork-more > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
}

.stratum-mywork-more[open] > summary::before {
    transform: rotate(90deg);
}

.stratum-mywork-more[open] .stratum-mywork-list {
    margin-top: 0.35em;
}

/* ── Responsive: collapse to single column on narrow screens ── */

@media (max-width: 1100px) {
    .stratum-mywork-columns {
        grid-template-columns: 1fr;
    }

    .stratum-mywork-filter-form {
        grid-template-columns: 1fr;
        min-width: auto;
        left: 1em;
        right: 1em;
    }
}

/*
 * Backend styling for the SOP checklist's `sop_items` MultiColumnWizard.
 *
 * The default MCW layout puts each column in its own <td>, which squeezes
 * the step title into a narrow cell next to a TinyMCE editor. For SOP
 * steps we want the title stacked on top of the description so both get
 * full row width — the title reads like a heading, the rich-text area
 * below holds the detail.
 *
 * Scoped to #ctrl_sop_items so no other MCW widget is affected.
 */

#ctrl_sop_items.multicolumnwizard {
    /* Container already has sensible defaults */
}

/* Hide the column-header row — placeholders / inline labels are clearer
   once the inputs are stacked. */
#ctrl_sop_items.multicolumnwizard thead {
    display: none;
}

/* Turn each row into a 2-column grid:
   column 1 = the field stack (title on top, description below)
   column 2 = the operations (move up/down, copy, delete) */
#ctrl_sop_items.multicolumnwizard > tbody > tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #dbdbdb);
}

#ctrl_sop_items.multicolumnwizard > tbody > tr:last-child {
    border-bottom: 0;
}

/* All non-operations cells stack in column 1. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td {
    display: block;
    grid-column: 1;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Inputs fill the cell. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td input[type="text"],
#ctrl_sop_items.multicolumnwizard > tbody > tr > td textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Make the title look like a heading for the step. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td input[name$="[title]"] {
    font-size: 1.05em;
    font-weight: 600;
    padding: 6px 8px;
}

/* TinyMCE wrapper needs width: 100% on its host container too. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td .mce-tinymce,
#ctrl_sop_items.multicolumnwizard > tbody > tr > td .tox-tinymce {
    width: 100% !important;
    max-width: 100% !important;
}

/* Operations column: anchor to the right, stay visible as the user scrolls
   through a tall TinyMCE description. The sticky ancestor is the grid <tr>,
   so the buttons stick to the top of the current row and release when the
   next row scrolls into view. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td.operations {
    grid-column: 2;
    grid-row: 1 / span 10;
    align-self: start;
    padding-top: 4px;
    white-space: nowrap;
    position: sticky;
    top: 16px;
    z-index: 1;
}

/*
 * SOP Library backend module styling.
 *
 * Card grid below a horizontal filter bar. Scoped to .stratum-sop-library
 * so nothing here bleeds into the rest of the Contao backend.
 */

.stratum-sop-library {
    padding: 0 0 24px;
}

.stratum-sop-library-count {
    color: var(--text-muted, #6a6a6a);
    font-weight: normal;
    font-size: 0.85em;
}

/* Filter bar */
.stratum-sop-library-filters {
    margin: 12px 0 20px;
    padding: 12px;
    background: var(--panel, #f6f6f6);
    border: 1px solid var(--border, #dbdbdb);
    border-radius: 4px;
}

.stratum-sop-library-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.stratum-sop-library-search {
    flex: 1 1 240px;
    min-width: 200px;
}

.stratum-sop-library-filters .tl_select {
    min-width: 160px;
}

.stratum-sop-library-add {
    margin-left: auto;
}

/* Card grid */
.stratum-sop-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.stratum-sop-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--body, #fff);
    border: 1px solid var(--border, #dbdbdb);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease;
}

.stratum-sop-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.stratum-sop-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* "Review overdue" badge — drawn in the warning red used elsewhere
   in Stratum so the signal feels consistent. The card itself gains
   a left rule so the row is scannable at a glance. */
.stratum-sop-card-review-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-color: #e53e3e;
    border-radius: 3px;
}

.stratum-sop-card.is-review-overdue {
    border-left: 3px solid #e53e3e;
}

.stratum-sop-overdue-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    font-size: 0.85em;
    cursor: pointer;
    user-select: none;
}

.stratum-sop-card-category {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--text-muted, #6a6a6a);
    border-radius: 3px;
}

.stratum-sop-card-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.3;
}

.stratum-sop-card-title a {
    color: inherit;
    text-decoration: none;
}

.stratum-sop-card-title a:hover {
    text-decoration: underline;
}

.stratum-sop-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8em;
}

.stratum-sop-card-tags li {
    padding: 1px 6px;
    color: var(--text-muted, #6a6a6a);
    background: var(--panel, #f0f0f0);
    border-radius: 3px;
}

.stratum-sop-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border, #ebebeb);
    font-size: 0.8em;
    color: var(--text-muted, #6a6a6a);
}

.stratum-sop-card-actions {
    display: flex;
    gap: 8px;
}

.stratum-sop-card-actions a {
    color: var(--link, #065a8f);
    text-decoration: none;
}

.stratum-sop-card-actions a:hover {
    text-decoration: underline;
}

.stratum-sop-card-run {
    background: #3a8fd1;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
}

.stratum-sop-card-run:hover {
    background: #2e74ad;
    text-decoration: none !important;
}

/*
 * SOP Run — interactive execution view. Scoped to `.stratum-sop-run`
 * so it can never leak into other backend modules. Registered via
 * $GLOBALS['TL_CSS'] in sop-bundle/contao/config/config.php.
 */

.stratum-sop-run {
    max-width: 960px;
    margin: 0 auto;
}

.stratum-sop-run-messages {
    margin-bottom: 12px;
}

.stratum-sop-run-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-bottom: 16px;
}

.stratum-sop-run-title h2 {
    margin: 0 0 4px;
}

.stratum-sop-run-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stratum-sop-run-tags li {
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
}

.stratum-sop-run-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
    color: #555;
}

.stratum-sop-run-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    background: #777;
}

.stratum-sop-run-status--active { background: #3a8fd1; }
.stratum-sop-run-status--completed { background: #4caf50; }
.stratum-sop-run-status--abandoned { background: #9e9e9e; }

.stratum-sop-run-progress {
    font-variant-numeric: tabular-nums;
}

.stratum-sop-run-form {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 16px;
}

.stratum-sop-run-block {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.stratum-sop-run-block:last-child {
    border-bottom: 0;
}

/* Inline tweaks to content-element rendering inside a run */
.stratum-sop-run .sop-checklist__items {
    list-style: none;
    padding-left: 0;
}

.stratum-sop-run .sop-checklist__item {
    padding: 6px 0;
}

.stratum-sop-run .sop-checklist__item.is-checked .sop-checklist__title {
    text-decoration: line-through;
    color: #777;
}

.stratum-sop-run .sop-checklist__description {
    margin-left: 24px;
    color: #555;
}

.stratum-sop-run .sop-capture {
    padding: 4px 0;
}

.stratum-sop-run .sop-capture__input {
    width: 100%;
    max-width: 560px;
}

.stratum-sop-run-notes {
    margin-top: 24px;
}

.stratum-sop-run-notes textarea {
    width: 100%;
}

.stratum-sop-run-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e4e4e4;
}

.stratum-sop-run-complete {
    background: #4caf50 !important;
    color: #fff !important;
    margin-left: auto;
}

.stratum-sop-run.is-closed .stratum-sop-run-form {
    background: #fafafa;
}

#header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

#container {
    padding-top: 40px;
}

/*
 * Stratum Client Portal — Frontend Styles
 *
 * Dark theme with sidebar layout, hero banner, card-based content.
 * Inspired by modern SaaS portal designs.
 *
 * All classes prefixed with "sp-" to avoid collisions with the
 * site's theme or Contao core classes.
 */

/* ── Custom properties ──────────────────────────────────────── */

.stratum-portal,
.stratum-portal-message {
    --sp-bg: #0d0f14;
    --sp-surface: #151821;
    --sp-surface-2: #1c2030;
    --sp-border: #2a2e3d;
    --sp-text: #eef0f6;
    --sp-text-muted: #8b92a5;
    --sp-accent: #6366f1;
    --sp-accent-hover: #818cf8;
    --sp-accent-glow: rgba(99, 102, 241, 0.15);
    --sp-radius: 10px;
    --sp-radius-sm: 6px;
    --sp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --sp-sidebar-width: 280px;

    font-family: var(--sp-font);
    color: var(--sp-text);
    line-height: 1.55;
    background: var(--sp-bg);
}

/* ── Light theme overrides ────────────────────────────────────── */

.stratum-portal.sp-light,
.stratum-portal-message.sp-light {
    --sp-bg: #f4f5f7;
    --sp-surface: #ffffff;
    --sp-surface-2: #eef0f4;
    --sp-border: #d8dce6;
    --sp-text: #1a1d26;
    --sp-text-muted: #6b7189;
    --sp-accent: #6366f1;
    --sp-accent-hover: #4f46e5;
    --sp-accent-glow: rgba(99, 102, 241, 0.10);
}

.sp-light .sp-hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.45) 0%,
        rgba(139, 92, 246, 0.25) 40%,
        rgba(255, 255, 255, 0.65) 100%
    );
}

.sp-light .sp-task {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.sp-light .sp-modal-overlay {
    background: rgba(0, 0, 0, 0.35);
}

.sp-light .sp-modal {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Theme toggle button */
.sp-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sp-text-muted);
    background: none;
    border: none;
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
    transition: color 0.15s, background 0.15s;
}

.sp-theme-toggle:hover {
    color: var(--sp-text);
    background: var(--sp-surface-2);
}

.sp-theme-toggle svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.sp-theme-toggle:hover svg {
    opacity: 1;
}

/* ── Layout: sidebar + main ─────────────────────────────────── */

.stratum-portal {
    display: grid;
    grid-template-columns: var(--sp-sidebar-width) 1fr;
    min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════
   LOGGED-OUT / LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */

/* Full-page dark background when not logged in */
body:has(.content-login) #wrapper {
    --sp-bg: #0d0f14;
    --sp-surface: #151821;
    --sp-surface-2: #1c2030;
    --sp-border: #2a2e3d;
    --sp-text: #eef0f6;
    --sp-text-muted: #8b92a5;
    --sp-accent: #6366f1;
    --sp-accent-hover: #818cf8;
    --sp-radius: 10px;
    --sp-radius-sm: 6px;
    --sp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    background: var(--sp-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sp-font);
}

body:has(.content-login) #container,
body:has(.content-login) #main,
body:has(.content-login) #main > .inside,
body:has(.content-login) .mod_article {
    display: contents;
}

/* Hide the "please log in" messages from our modules */
body:has(.content-login) .stratum-portal-message,
body:has(.content-login) .stratum-message {
    display: none;
}

/* Login card */
.content-login {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 40px 36px 36px;
    width: 400px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.content-login .formbody {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-login .widget {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.content-login label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text);
    font-family: var(--sp-font);
}

.content-login input.text {
    padding: 11px 14px;
    font-size: 0.9rem;
    font-family: var(--sp-font);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-surface-2);
    color: var(--sp-text);
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.content-login input.text:focus {
    border-color: var(--sp-accent);
    outline: none;
}

.content-login input.text::placeholder {
    color: var(--sp-text-muted);
}

/* Checkbox */
.content-login .widget-checkbox fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.content-login .widget-checkbox label {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.content-login .widget-checkbox input[type="checkbox"] {
    accent-color: var(--sp-accent);
    margin-right: 4px;
}

/* Submit button */
.content-login .widget-submit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.content-login button.submit {
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--sp-font);
    background: var(--sp-accent);
    color: #fff;
    border: none;
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    width: 100%;
}

.content-login button.submit:hover {
    background: var(--sp-accent-hover);
}

.content-login button.submit:active {
    transform: scale(0.98);
}

/* Passkey button */
.content-login .passkey-login {
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--sp-font);
    background: var(--sp-surface-2);
    color: var(--sp-text-muted);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    width: 100%;
}

.content-login .passkey-login:hover {
    color: var(--sp-text);
    border-color: var(--sp-text-muted);
}

/* Error messages */
.content-login .error {
    font-size: 0.82rem;
    color: #f87171;
    margin: 0;
}

/* ── Message / error state (logged in, no client) ─────────── */

.stratum-portal-message {
    max-width: 600px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}

.stratum-portal-message .sp-greeting {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.stratum-portal-message p {
    font-size: 0.95rem;
    color: var(--sp-text-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */

.sp-sidebar {
    background: var(--sp-surface);
    border-right: 1px solid var(--sp-border);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Logo */
.sp-sidebar-logo {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-sidebar-logo img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sp-sidebar-logo--text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sp-text);
}

/* Navigation */
.sp-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.sp-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sp-text-muted);
    text-decoration: none;
    border: none;
    border-radius: var(--sp-radius-sm);
    background: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.sp-nav-link:hover {
    color: var(--sp-text);
    background: var(--sp-surface-2);
}

.sp-nav-link svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.sp-nav-link:hover svg {
    opacity: 1;
}

.sp-nav-link--cta {
    color: var(--sp-accent);
    font-weight: 600;
}

.sp-nav-link--cta:hover {
    color: var(--sp-accent-hover);
    background: var(--sp-accent-glow);
}

.sp-nav-link--cta svg {
    opacity: 1;
    color: var(--sp-accent);
}

.sp-nav-link--logout {
    color: var(--sp-text-muted);
    opacity: 0.7;
}

.sp-nav-link--logout:hover {
    opacity: 1;
    color: #f87171;
}

/* Sidebar sections */
.sp-sidebar-section {
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid var(--sp-border);
}

.sp-sidebar-heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-text-muted);
    margin: 0 0 12px;
}

/* Contacts */
.sp-contact {
    margin-bottom: 14px;
}

.sp-contact-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text);
    margin-bottom: 2px;
}

.sp-contact-link {
    display: block;
    font-size: 0.78rem;
    color: var(--sp-text-muted);
    text-decoration: none;
    line-height: 1.6;
}

.sp-contact-link:hover {
    color: var(--sp-accent);
}

/* Booking link */
.sp-booking-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--sp-text-muted);
    text-decoration: none;
    border-radius: var(--sp-radius-sm);
    transition: color 0.15s, background 0.15s;
}

.sp-booking-link:hover {
    color: var(--sp-text);
    background: var(--sp-surface-2);
}

/* Sidebar footer */
.sp-sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sp-border);
}

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════════════ */

.sp-main {
    padding: 0;
    overflow-y: auto;
}

/* ── Hero banner ──────────────────────────────────────────── */

.sp-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    padding: 40px 48px;
    background-color: #1a1040;
    background-size: cover;
    background-position: center;
}

.sp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.55) 0%,
        rgba(139, 92, 246, 0.35) 40%,
        rgba(15, 15, 25, 0.85) 100%
    );
}

.sp-hero-content {
    position: relative;
    z-index: 1;
}

.sp-hero-content h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.sp-hero-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 500px;
}

/* ── Section layout ───────────────────────────────────────── */

.sp-section {
    padding: 32px 48px;
}

.sp-section + .sp-section {
    border-top: 1px solid var(--sp-border);
}

.sp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.sp-section-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: var(--sp-text);
    letter-spacing: -0.01em;
}

/* ── Button ───────────────────────────────────────────────── */

.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}

.sp-btn:active {
    transform: scale(0.97);
}

.sp-btn--accent {
    background: var(--sp-accent);
    color: #fff;
}

.sp-btn--accent:hover {
    background: var(--sp-accent-hover);
}

/* ── Cards ────────────────────────────────────────────────── */

.sp-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
}

.sp-card--flat {
    padding: 16px 20px;
}

.sp-card-summary {
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

.sp-card-summary::-webkit-details-marker {
    display: none;
}

.sp-card-summary::marker {
    content: '';
}

.sp-card[open] > .sp-card-summary {
    border-bottom: 1px solid var(--sp-border);
}

.sp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.sp-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--sp-text-muted);
}

.sp-card-body {
    padding: 16px 20px;
}

/* ── Badge ────────────────────────────────────────────────── */

.sp-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 99px;
    color: #fff;
    white-space: nowrap;
    line-height: 1.3;
}

.sp-badge--sm {
    font-size: 0.62rem;
    padding: 2px 8px;
}

/* Request status colors */
.sp-badge--open { background: #3b82f6; }
.sp-badge--new { background: #8b5cf6; }
.sp-badge--assigned { background: #f59e0b; }
.sp-badge--in_progress { background: #6366f1; }
.sp-badge--done { background: #22c55e; }
.sp-badge--closed { background: #6b7280; }

/* ── Milestones ───────────────────────────────────────────── */

.sp-milestone {
    border-bottom: 1px solid var(--sp-border);
}

.sp-milestone:last-child {
    border-bottom: none;
}

.sp-milestone-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
}

.sp-milestone-summary::-webkit-details-marker { display: none; }
.sp-milestone-summary::marker { content: ''; }

.sp-milestone-name {
    font-weight: 600;
    color: var(--sp-text);
}

.sp-milestone-pct {
    font-size: 0.78rem;
    color: var(--sp-text-muted);
    margin-left: auto;
}

/* ── Tasks ────────────────────────────────────────────────── */

.sp-tasks {
    padding: 0 0 8px 20px;
}

.sp-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.83rem;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.06);
}

.sp-task:last-child {
    border-bottom: none;
}

.sp-task-name {
    flex: 1;
    color: var(--sp-text);
}

.sp-task-due {
    font-size: 0.75rem;
    color: var(--sp-text-muted);
}

/* ── Empty states ─────────────────────────────────────────── */

.sp-empty {
    font-size: 0.9rem;
    color: var(--sp-text-muted);
    text-align: center;
    padding: 24px 0;
}

.sp-empty-sm {
    font-size: 0.82rem;
    color: var(--sp-text-muted);
    padding: 8px 0;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════════ */

.sp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.sp-modal-overlay.is-open {
    display: flex;
}

.sp-modal {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sp-text);
}

.sp-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--sp-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.sp-modal-close:hover {
    color: var(--sp-text);
}

.sp-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Style the Contao form inside the modal */
.sp-modal-body .formbody {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-modal-body .widget {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-modal-body label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-modal-body input[type="text"],
.sp-modal-body textarea {
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-surface-2);
    color: var(--sp-text);
    transition: border-color 0.15s;
}

.sp-modal-body input[type="text"]:focus,
.sp-modal-body textarea:focus {
    border-color: var(--sp-accent);
    outline: none;
}

.sp-modal-body textarea {
    min-height: 100px;
    resize: vertical;
}

.sp-modal-body .submit_container {
    display: flex;
    justify-content: flex-end;
}

.sp-modal-body button[type="submit"],
.sp-modal-body input[type="submit"] {
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    background: var(--sp-accent);
    color: #fff;
    border: none;
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.sp-modal-body button[type="submit"]:hover,
.sp-modal-body input[type="submit"]:hover {
    background: var(--sp-accent-hover);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .stratum-portal {
        grid-template-columns: 1fr;
    }

    .sp-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
    }

    .sp-sidebar-logo {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        margin-right: auto;
    }

    .sp-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 0;
    }

    .sp-nav-link {
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    .sp-sidebar-section,
    .sp-sidebar-footer {
        display: none;
    }

    .sp-hero {
        min-height: 200px;
        padding: 28px 24px;
    }

    .sp-hero-content h1 {
        font-size: 1.6rem;
    }

    .sp-section {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .sp-hero {
        min-height: 160px;
        padding: 20px 16px;
    }

    .sp-hero-content h1 {
        font-size: 1.3rem;
    }

    .sp-section {
        padding: 16px;
    }

    .sp-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sp-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}