* (display: table-row) requires every direct child box to be a table-cell; a ::before with
* ordinary generated content doesn't qualify, so browsers silently wrap it in its own
* anonymous table-cell to satisfy that rule - which consumes a real column slot and pushes
* every actual | in the row one column to the right. That's what caused the Module
* column's header and the whole Read/Write matrix to visibly misalign. A | is already a
* valid table-cell, so a ::before inside one never triggers this. The negative left/top/
* bottom offsets below just cancel that cell's own padding so the bar still reaches the
* table's true left edge and the row's full height, matching how it looked before this fix.
*/
table.data tbody tr td:first-child {
position: relative;
}
table.data tbody tr td:first-child::before {
content: '';
position: absolute;
left: -14px;
top: -10px;
bottom: -10px;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transition: transform 0.18s ease;
}
table.data tbody tr:hover {
background: rgba(15, 35, 60, 0.035);
}
table.data tbody tr:hover td:first-child::before {
transform: scaleY(1);
}
/* /issues row-level warning: the whole row (not just a Due Date cell) tints light red once a
ticket's due date is today, tomorrow, or already past - see IssueListRow#isDueUrgent's own
Javadoc for exactly what counts. Layered on top of (not instead of) the plain hover tint above
so a hover is still visible on an already-highlighted row. */
table.data tbody tr.row-due-urgent {
background: var(--danger-soft);
}
table.data tbody tr.row-due-urgent:hover {
/* --danger-soft-strong (0.30 opacity) is tuned as a border/outline tone elsewhere, not a
full-row fill - at that opacity here it would obscure the row's own text, so this row's
hover state gets its own, gentler step up from --danger-soft's 0.10 instead. */
background: rgba(220, 38, 38, 0.16);
}
/* Delete confirmation (issues.html): fades/collapses a row out instead of yanking it
from the table instantly - see removeRowAnimated() there. */
table.data tbody tr.row-removing {
transition: opacity 0.25s ease, transform 0.25s ease;
opacity: 0;
transform: scale(0.98);
pointer-events: none;
}
td.key-col {
font-family: "SFMono-Regular", Consolas, monospace;
color: var(--accent);
font-weight: 600;
}
td.key-col a {
color: inherit;
text-decoration: none;
}
td.key-col a:hover {
text-decoration: underline;
}
.empty-state {
padding: 40px;
text-align: center;
color: var(--text-muted);
}
/* --- Status/priority pill badges (issues table) --- */
.pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
}
.pill-danger { background: var(--danger-soft); color: var(--danger-text); }
.pill-warn { background: var(--warn-soft); color: var(--warn-text); }
.pill-ok { background: var(--ok-soft); color: var(--ok-text); }
.pill-neutral { background: var(--neutral-soft); color: var(--neutral-text); }
/* --- Organization / Time Range quick-filter chips - originally the Dashboard's own top-of-page
controls, now shared with the /issues page too (see issues.html's own org-filter-row/
period-filter-row markup, alongside its existing Organization/Created-date-range/Severity
controls in the Filters dropdown rather than replacing them). Moved here from dashboard.css
(which used to own these rules outright) so both pages read one definition. --- */
.org-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.org-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.org-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 14px; border-radius: var(--radius-pill);
border: 1px solid var(--border); background: var(--surface);
font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--text-muted);
cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.org-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.org-chip:hover { border-color: var(--accent); color: var(--text); }
.org-chip.active { background: var(--sidebar-bg); border-color: var(--sidebar-bg); color: #fff; }
.filter-scope { margin-left: auto; font-size: .8rem; color: var(--text-muted); }
.filter-scope b { color: var(--text); }
.period-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.period-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.period-filter { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-pill); }
.period-chip {
border: none; background: transparent; padding: 6px 14px; border-radius: var(--radius-pill);
font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.period-chip:hover { color: var(--text); }
.period-chip.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 35, 60, .18); }
/* /issues page only: Organization and Time Range share one row instead of the Dashboard's own
two stacked rows - org chips left-aligned, Time Range pushed to the right edge via
margin-left: auto on its wrapper. */
.quick-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; }
.period-filter-inline { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
/* --- Summary count chips (/issues page, above the table) - live counts over whatever the
search box + Filters panel currently narrow the table to (see issues.html's
renderSummaryChips()), the lightest-weight of the count-card designs reviewed for this page
("Option C" of that design pass) so the table itself stays the visual focus. */
.count-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.count-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px 5px 10px;
border-radius: var(--radius-pill);
background: var(--surface-2);
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
}
.count-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.count-chip b { font-family: var(--font-heading); font-weight: 700; margin-left: 2px; }
.count-chip.danger { background: var(--danger-soft); color: var(--danger-text); }
.count-chip.warn { background: var(--warn-soft); color: var(--warn-text); }
.count-chip.ok { background: var(--ok-soft); color: var(--ok-text); }
/* The Due Date chip is the only one with a rule worth spelling out (which exact dates count as
"urgent") - a native title tooltip on the whole chip covers "hover to see the rule" without a
whole custom tooltip component; the small ⓘ just signals that hovering does something. */
#chipDueDate { cursor: help; }
#chipDueDate .info-icon { opacity: 0.7; font-size: 0.82rem; line-height: 1; }
/* --- Active Filters row (/issues page, above the count chips) - a live summary of every
filter mechanism currently narrowing the table (Organization/Time Range quick chips, Status
checkboxes, Severity, Created Date Range, search box - see issues.html's
renderActiveFilters()), each rendered as its own "Label: value" pill with a small × to clear
just that one filter. Hidden entirely (via the [hidden] attribute toggled in JS) when nothing
is active, so it never adds visual weight on the unfiltered default view. */
.active-filters-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.active-filters-row .active-filters-label { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.active-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 12px;
border-radius: var(--radius-pill);
background: var(--accent-soft);
color: var(--text);
font-size: 0.78rem;
font-weight: 500;
}
.active-filter-chip b { font-family: var(--font-heading); font-weight: 700; margin-left: 3px; }
.active-filter-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text-muted);
font-size: 0.82rem;
line-height: 1;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.active-filter-x:hover { background: rgba(15, 35, 60, .12); color: var(--danger-text); }
/* --- Analyse column + button --- */
th.col-action {
cursor: default;
width: 1%;
white-space: nowrap;
}
td.action-col {
width: 1%;
white-space: nowrap;
}
.action-buttons {
display: flex;
gap: 6px;
}
button.analyze-btn {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent-soft-strong);
border-radius: 7px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-heading);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button.analyze-btn:hover {
background: var(--accent);
color: white;
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 167, 225, 0.3);
}
/* Also doubles as the "Delete" confirm button inside #deleteConfirmOverlay - same
visual language as analyze-btn, danger palette instead of accent. */
button.delete-btn {
background: var(--danger-soft);
color: var(--danger-text);
border: 1px solid var(--danger-soft-strong);
border-radius: 7px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-heading);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button.delete-btn:hover {
background: var(--danger);
color: white;
border-color: var(--danger);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
button.delete-btn:disabled {
opacity: 0.6;
cursor: default;
transform: none;
}
/* --- History page: "View" errors button (same visual language as Analyse) --- */
button.view-errors-btn {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent-soft-strong);
border-radius: 7px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-heading);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button.view-errors-btn:hover {
background: var(--accent);
color: white;
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 167, 225, 0.3);
}
button.view-calls-btn {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent-soft-strong);
border-radius: 7px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-heading);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button.view-calls-btn:hover {
background: var(--accent);
color: white;
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 167, 225, 0.3);
}
/* --- History page: "API calls" popup contents --- */
/* Two classes (not just source order) so this reliably wins over the plain .modal
rule below regardless of which one happens to come later in the stylesheet. */
.modal.modal-wide {
max-width: 860px;
}
/* The "Delete issue" confirm dialog - a short message and two buttons don't need
.modal's full 640px default width. */
.modal.modal-narrow {
max-width: 420px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 18px;
}
.api-call-card {
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 14px;
}
.api-call-card:last-child {
margin-bottom: 0;
}
.api-call-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.api-call-seq {
font-weight: 700;
font-size: 0.85rem;
}
.api-call-time {
color: var(--text-muted);
font-size: 0.8rem;
}
.api-call-jql {
font-size: 0.85rem;
color: var(--text);
margin-bottom: 10px;
word-break: break-word;
}
.api-call-response {
margin: 0;
max-height: 320px;
overflow: auto;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.78rem;
color: var(--text);
white-space: pre;
}
/* --- Analysis popup --- */
body.modal-open {
overflow: hidden;
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(10, 14, 20, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 1000;
}
/* The [hidden] attribute is how the JS shows/hides this overlay (overlay.hidden
= true/false). Without this rule, ".modal-overlay { display: flex }" above
would win over the browser's default "[hidden] { display: none }" (same
specificity, same author stylesheet), leaving the popup visible at all
times instead of only after a click. This bumps the hidden-state rule's
specificity so it wins instead. */
.modal-overlay[hidden] {
display: none;
}
.modal {
background: var(--surface);
border-radius: var(--radius-card);
width: 100%;
max-width: 640px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(15, 35, 60, 0.22);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--border);
}
.modal-header h2 {
margin: 0;
font-size: 1.15rem;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
}
.modal-close:hover {
color: var(--text);
}
.modal-body {
padding: 20px 22px 26px;
overflow-y: auto;
}
.modal-loading {
color: var(--text-muted);
font-size: 0.92rem;
padding: 20px 0;
text-align: center;
}
.modal-error {
background: var(--danger-soft);
color: var(--danger-text);
border: 1px solid var(--danger-soft-strong);
border-radius: 10px;
padding: 12px 14px;
font-size: 0.9rem;
}
.a-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.a-chip {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 5px 12px;
font-size: 0.8rem;
color: var(--text);
}
.a-chip-label {
color: var(--text-muted);
margin-right: 5px;
}
.a-summary {
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 16px;
}
.a-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.a-stat {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 8px;
text-align: center;
}
.a-stat-n {
font-size: 1.25rem;
font-weight: 700;
font-family: var(--font-heading);
}
.a-stat-l {
font-size: 0.72rem;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.a-flag {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 12px;
font-size: 0.85rem;
margin-bottom: 14px;
}
.a-flag-danger {
background: var(--danger-soft);
color: var(--danger-text);
border-color: var(--danger-soft-strong);
font-weight: 600;
}
.modal-body h3 {
font-size: 0.85rem;
letter-spacing: 0.03em;
color: var(--text-muted);
margin: 18px 0 8px;
}
.a-verdict {
font-size: 0.92rem;
margin: 0;
line-height: 1.55;
}
.a-gaps, .a-timeline {
list-style: none;
margin: 0;
padding: 0;
}
.a-gaps li {
font-size: 0.88rem;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.a-gaps li:last-child {
border-bottom: none;
}
.a-timeline li {
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.a-timeline li:last-child {
border-bottom: none;
}
.a-timeline-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 0.88rem;
margin-bottom: 3px;
}
.a-timeline-date {
color: var(--text-muted);
font-size: 0.78rem;
white-space: nowrap;
}
.a-timeline-excerpt {
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.4;
}
/* --- Animated toggle switch (e.g. "Enable WhatsApp priority alerts") --- */
.switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-btn);
margin-bottom: 4px;
}
.switch-row-label {
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
}
.switch-row .settings-field-hint {
margin-top: 2px;
}
.switch {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
flex: none;
}
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch .track {
position: absolute;
inset: 0;
border-radius: 999px;
background: var(--border-hover);
transition: background 0.25s ease;
cursor: pointer;
}
.switch .track::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 35, 60, 0.35);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch input:checked + .track {
background: var(--accent);
box-shadow: 0 0 12px rgba(30, 167, 225, 0.5);
}
.switch input:checked + .track::after {
transform: translateX(18px);
}
.switch input:focus-visible + .track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* --- Flash notifications: animated toasts (see static/js/toast.js) --- */
/* toast.js creates this on first use if it isn't already on the page, so no
template has to include it - fixed positioning means where it sits in the
DOM doesn't matter. */
.toast-viewport {
position: fixed;
top: 20px;
right: 20px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 10px;
width: 340px;
max-width: calc(100vw - 40px);
pointer-events: none;
}
.toast {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-btn);
padding: 13px 34px 15px 14px;
box-shadow: var(--shadow-pop);
font-size: 0.88rem;
color: var(--text);
overflow: hidden;
pointer-events: auto;
animation: toastIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.toast.toast-leaving {
animation: toastOut 0.22s ease forwards;
}
.toast-icon {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
}
.toast-icon svg {
width: 100%;
height: 100%;
display: block;
}
.toast-message {
flex: 1;
line-height: 1.4;
}
.toast-close {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.toast-close:hover {
color: var(--text);
background: var(--neutral-soft);
}
.toast-bar {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
background: currentColor;
opacity: 0.5;
animation-name: toastShrink;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.toast.success { color: var(--ok); }
.toast.error { color: var(--danger); }
.toast.warn { color: var(--warn-text); }
.toast.info { color: var(--text-muted); }
.toast.success { border-color: rgba(52, 211, 153, 0.35); }
.toast.error { border-color: rgba(248, 113, 113, 0.4); }
.toast.warn { border-color: rgba(251, 191, 36, 0.4); }
.toast.info { border-color: var(--border); }
.toast .toast-message { color: var(--text); }
@keyframes toastIn {
from { opacity: 0; transform: translateX(24px) scale(0.98); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(24px); }
}
@keyframes toastShrink {
from { width: 100%; }
to { width: 0%; }
}
/* The new topbar (hamburger + title + bell + user pill + sign out) packs in more fixed-width
pieces than the old plain breadcrumb did - past this width there isn't room for all of
them, so the least essential ones (the role badge, the visible user name) drop out and the
rest tighten up. The avatar initial and Sign out button stay - those are the two things
someone on a phone actually needs. */
@media (max-width: 720px) {
.topbar-bar { padding: 10px 14px; gap: 8px; }
.topbar-right { gap: 8px; }
.user-name { display: none; }
.user-role-badge { display: none; }
.topbar-user-pill { padding: 4px; }
button.signout-btn { padding: 7px 10px; }
}
|