/* =============================================================================
   SAP Issue Tracker (js/views/sap-issues.js)
   Sidebar link above the logo, summary tiles, filters, issue table, the issue
   modal with its comment thread, and the hidden print frame.
   Severity and status always show their name as text — colour is a cue only.
   ============================================================================= */

.sap-issues {
    --sap-critical: #D93025;
    --sap-high: #E8710A;
    --sap-medium: #B06000;
    --sap-low: #5F6B85;
    --sap-open: #1F3D7C;
    --sap-in-progress: #0F9FC4;
    --sap-solved: #1E8E3E;
}

/* ---- Sidebar link (bottom-left, above the logo) ---- */
.sidebar-tools {
    padding: 0.25rem 0 0.375rem;
    border-top: 1px solid var(--light-silver, #E3E4E9);
}

/* ---- Header buttons ---- */
.sap-issues__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sap-issues__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--light-silver, #E3E4E9);
    background: #ffffff;
    color: var(--secondary-blue, #1F3D7C);
    font-family: 'Red Hat Display', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
}

.sap-issues__btn:hover {
    background: var(--pale-cyan, #EAF7FA);
}

.sap-issues__btn:focus-visible {
    outline: 2px solid var(--primary-blue, #0F9FC4);
    outline-offset: 2px;
}

.sap-issues__btn--primary {
    background: var(--primary-blue, #0F9FC4);
    border-color: var(--primary-blue, #0F9FC4);
    color: #ffffff;
}

.sap-issues__btn--primary:hover {
    background: #0d8aa8;
}

.sap-issues__btn--danger {
    background: var(--trend-bad, #D93025);
    border-color: var(--trend-bad, #D93025);
    color: #ffffff;
}

.sap-issues__btn--danger:hover {
    background: #b3261e;
}

.sap-issues__btn--small {
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
}

.sap-issues__btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ---- Summary tiles ---- */
.sap-issues__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.sap-issues__tile-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sap-issues__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 6.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--light-silver, #E3E4E9);
    border-left: 4px solid var(--tile-accent, #808FAD);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    font-family: 'Red Hat Display', sans-serif;
}

.sap-issues__tile:hover {
    background: var(--pale-cyan, #EAF7FA);
}

.sap-issues__tile:focus-visible {
    outline: 2px solid var(--primary-blue, #0F9FC4);
    outline-offset: 2px;
}

.sap-issues__tile-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--secondary-blue, #1F3D7C);
}

.sap-issues__tile-label {
    font-size: 0.7rem;
    color: var(--slate, #808FAD);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sap-issues__tile--critical { --tile-accent: var(--sap-critical); }
.sap-issues__tile--high { --tile-accent: var(--sap-high); }
.sap-issues__tile--medium { --tile-accent: var(--sap-medium); }
.sap-issues__tile--low { --tile-accent: var(--sap-low); }
.sap-issues__tile--open { --tile-accent: var(--sap-open); }
.sap-issues__tile--in-progress { --tile-accent: var(--sap-in-progress); }
.sap-issues__tile--solved { --tile-accent: var(--sap-solved); }

/* ---- Filters ---- */
.sap-issues__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sap-issues__filter {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate, #808FAD);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sap-issues__filter select {
    min-width: 9rem;
}

.sap-issues__filter--search {
    flex: 1 1 14rem;
}

/* ---- Issue table ---- */
.sap-issues__list {
    overflow-x: auto;
}

.sap-issues__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.sap-issues__table th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--slate, #808FAD);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    white-space: nowrap;
}

.sap-issues__table td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    vertical-align: top;
    color: var(--secondary-blue, #1F3D7C);
}

.sap-issues__row {
    cursor: pointer;
}

.sap-issues__row:hover,
.sap-issues__row:focus-visible {
    background: var(--pale-cyan, #EAF7FA);
    outline: none;
}

.sap-issues__ref,
.sap-issues__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sap-issues__ref {
    font-weight: 700;
}

.sap-issues__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sap-issues__title-cell {
    min-width: 16rem;
}

.sap-issues__title {
    display: block;
    font-weight: 600;
}

/* One-line preview of the description under the title. */
.sap-issues__snippet {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--slate, #808FAD);
    font-size: 0.76rem;
}

.sap-issues__empty {
    color: var(--slate, #808FAD);
    font-size: 0.85rem;
    margin: 0.75rem 0;
}

/* ---- Badges (severity + status) ---- */
.sap-issues__badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.sap-issues__badge--critical { color: var(--sap-critical, #D93025); background: #FCE8E6; }
.sap-issues__badge--high { color: var(--sap-high, #E8710A); background: #FEEFE3; }
.sap-issues__badge--medium { color: var(--sap-medium, #B06000); background: #FEF7E0; }
.sap-issues__badge--low { color: var(--sap-low, #5F6B85); background: #F1F3F6; }
.sap-issues__badge--open { color: var(--sap-open, #1F3D7C); background: #E8EEF9; }
.sap-issues__badge--in-progress { color: #0B7A97; background: var(--pale-cyan, #EAF7FA); }
.sap-issues__badge--solved { color: var(--sap-solved, #1E8E3E); background: #E6F4EA; }

/* ---- Issue modal (overlay: shared .modal-overlay) ---- */
.sap-issue-modal {
    --sap-critical: #D93025;
    --sap-high: #E8710A;
    --sap-medium: #B06000;
    --sap-low: #5F6B85;
    --sap-open: #1F3D7C;
    --sap-solved: #1E8E3E;
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

.sap-issue-modal .modal-header {
    padding: 1.1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #1F3D7C 0%, #2a4d8f 100%);
}

.sap-issue-modal .modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.sap-issue-modal__body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    color: var(--secondary-blue, #1F3D7C);
}

.sap-issue-modal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    font-size: 0.78rem;
    color: var(--slate, #808FAD);
    margin-bottom: 0.9rem;
}

.sap-issue-modal__description {
    white-space: pre-wrap;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1b2a4a;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--off-white, #F7F7F8);
    border-radius: 8px;
}

/* Section headings inside a description (lines written in CAPITALS). */
.sap-issue-text__heading {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: var(--primary-blue, #0F9FC4);
}

.sap-issue-modal__subhead {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--secondary-blue, #1F3D7C);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    margin-bottom: 0.75rem;
}

/* ---- Comment thread ---- */
.sap-issue-comment {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--soft-cyan, #C3E7F0);
    background: var(--off-white, #F7F7F8);
    border-radius: 0 8px 8px 0;
    margin-bottom: 0.6rem;
}

.sap-issue-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

.sap-issue-comment__author {
    font-weight: 700;
}

.sap-issue-comment__time {
    color: var(--slate, #808FAD);
}

.sap-issue-comment__tools {
    margin-left: auto;
    display: inline-flex;
    gap: 0.5rem;
}

.sap-issue-comment__link {
    border: none;
    background: none;
    padding: 0;
    color: var(--primary-blue, #0F9FC4);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.sap-issue-comment__link:hover {
    text-decoration: underline;
}

.sap-issue-comment__body {
    white-space: pre-wrap;
    font-size: 0.84rem;
    color: #1b2a4a;
    margin: 0.3rem 0 0;
}

.sap-issue-comment__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.sap-issue-comments__new {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.sap-issue-comments__new textarea {
    font-size: 0.85rem;
}

/* ---- Create / edit form ---- */
.sap-issue-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.sap-issue-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary-blue, #1F3D7C);
}

.sap-issue-form__field small {
    font-weight: 400;
    color: var(--slate, #808FAD);
}

.sap-issue-form__field--wide {
    grid-column: 1 / -1;
}

.sap-issue-form__buttons {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Hidden iframe that holds the print document. */
.sap-issues__print-frame {
    position: fixed;
    width: 0;
    height: 0;
    border: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
}

@media (max-width: 575px) {
    .sap-issue-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sap-issue-modal .modal-header {
        padding: 0.9rem 1rem;
    }

    .sap-issue-modal__body {
        padding: 1rem;
    }
}