/* ==========================================================================
   Bug Reports, Feature Requests & Releases
   Brand-aligned styling using primary burgundy + semantic colors.
   No gold accent — primary actions and accents use #8b1a4a.
   ========================================================================== */

/* Page header
   ========================================================================== */
.br-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px 0;
    padding: 0;
}

.br-page-header__title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.br-page-header__title i {
    color: #8b1a4a;
    font-size: 22px;
}

.br-page-header__subtitle {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}

.br-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Cards
   ========================================================================== */
.br-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
}

.br-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.br-card-header__title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.br-card-header__title i {
    color: #8b1a4a;
    font-size: 14px;
}

.br-card-body {
    padding: 20px;
}

.br-card-body--flush {
    padding: 0;
}

/* Detail page grid
   ========================================================================== */
.br-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 991px) {
    .br-detail-grid { grid-template-columns: 1fr; }
}

/* Issue header (bug/feature detail)
   ========================================================================== */
.br-issue-header {
    margin-bottom: 16px;
}

.br-issue-header__title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.br-issue-header__title-id {
    color: #9ca3af;
    font-weight: 500;
    margin-left: 8px;
}

.br-issue-header__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Status banner (issue page)
   ========================================================================== */
.br-status-banner {
    padding: 14px 20px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #f0f0f5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.br-status-banner--open-bug {
    background: #fee2e2;
    border-bottom-color: rgba(153, 27, 27, 0.15);
}

.br-status-banner--open-feature {
    background: rgba(139, 26, 74, 0.08);
    border-bottom-color: rgba(139, 26, 74, 0.18);
}

.br-status-banner--in-progress {
    background: #fef3c7;
    border-bottom-color: rgba(146, 64, 14, 0.15);
}

.br-status-banner--done {
    background: #dcfce7;
    border-bottom-color: rgba(22, 101, 52, 0.15);
}

.br-status-banner__state {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.br-status-banner--open-bug .br-status-banner__state { color: #991b1b; }
.br-status-banner--open-feature .br-status-banner__state { color: #8b1a4a; }
.br-status-banner--in-progress .br-status-banner__state { color: #92400e; }
.br-status-banner--done .br-status-banner__state { color: #166534; }

.br-status-banner__meta {
    color: #6b7280;
    font-size: 12.5px;
    margin-left: auto;
}

.br-status-banner__meta strong {
    color: #1f2937;
    font-weight: 600;
}

/* Pills / badges
   ========================================================================== */
.br-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 18px;
    white-space: nowrap;
}

.br-pill--primary    { background: rgba(139, 26, 74, 0.1); color: #8b1a4a; }
.br-pill--neutral    { background: #f3f4f6; color: #374151; }
.br-pill--success    { background: #dcfce7; color: #166534; }
.br-pill--warning    { background: #fef3c7; color: #92400e; }
.br-pill--info       { background: #dbeafe; color: #1e40af; }
.br-pill--error      { background: #fee2e2; color: #991b1b; }
.br-pill--ghost      { background: #ffffff; color: #6b7280; border: 1px solid #e5e7eb; }

.br-pill--lg {
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 20px;
    line-height: 20px;
}

/* Sidebar metadata list
   ========================================================================== */
.br-meta-list { padding: 0; }

.br-meta-row {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f5;
}

.br-meta-row:last-child { border-bottom: none; }

.br-meta-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.br-meta-value {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
    word-break: break-word;
}

.br-meta-value--empty { color: #9ca3af; font-style: italic; }

.br-meta-value a {
    color: #8b1a4a;
    font-weight: 500;
}

.br-meta-value a:hover {
    color: #a8325f;
    text-decoration: underline;
}

.br-meta-avatar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.br-meta-avatar img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

/* Section blocks (steps to reproduce, etc.)
   ========================================================================== */
.br-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.br-section-title i { color: #8b1a4a; }

.br-code-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: #1f2937;
    white-space: pre-wrap;
    margin: 0;
    overflow-x: auto;
}

/* Comment timeline
   ========================================================================== */
.br-comment {
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid #f0f0f5;
}

.br-comment__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.br-comment__body {
    flex: 1;
    min-width: 0;
}

.br-comment__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.br-comment__author {
    font-weight: 600;
    color: #1f2937;
    font-size: 13.5px;
}

.br-comment__author a {
    color: #1f2937;
}

.br-comment__author a:hover {
    color: #8b1a4a;
    text-decoration: none;
}

.br-comment__time {
    font-size: 12px;
    color: #9ca3af;
}

.br-comment__text {
    font-size: 13.5px;
    color: #374151;
    line-height: 1.55;
}

.br-comment__text p:last-child { margin-bottom: 0; }

.br-comment__attachments {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
}

.br-comment__attachments a {
    color: #8b1a4a;
    font-weight: 500;
}

/* Comment composer
   ========================================================================== */
.br-composer {
    padding: 20px;
    border-top: 1px solid #f0f0f5;
    background: #fafbfc;
    border-radius: 0 0 12px 12px;
}

.br-composer__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.br-composer__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.br-composer__input { flex: 1; min-width: 0; }

.br-composer__textarea.form-control {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    color: #1f2937;
    resize: vertical;
    transition: border-color 200ms, box-shadow 200ms;
    background: #fff;
}

.br-composer__textarea.form-control:focus {
    outline: none;
    border-color: #8b1a4a;
    box-shadow: 0 0 0 3px rgba(139, 26, 74, 0.12);
}

.br-composer__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.br-composer__footer .pull-left,
.br-composer__footer .pull-right { float: none !important; }

.br-composer__footer .br-spacer { flex: 1; }

/* Buttons (brand) — prefer over Bootstrap btn for the new components
   ========================================================================== */
.br-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 200ms, border-color 200ms, color 200ms, transform 150ms, box-shadow 200ms;
    white-space: nowrap;
}

.br-btn:hover { transform: translateY(-1px); text-decoration: none; }
.br-btn:active { transform: translateY(0); }
.br-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.br-btn--primary {
    background: #8b1a4a;
    color: #ffffff;
}
.br-btn--primary:hover { background: #a8325f; color: #ffffff; }

.br-btn--ghost {
    background: #ffffff;
    color: #374151;
    border-color: #e5e7eb;
}
.br-btn--ghost:hover { background: #f9fafb; color: #1f2937; border-color: #d1d5db; }

.br-btn--success {
    background: #dcfce7;
    color: #166534;
}
.br-btn--success:hover { background: #bbf7d0; color: #166534; }

.br-btn--sm { padding: 6px 12px; font-size: 12px; }

/* Release hero header (detail page)
   ========================================================================== */
.br-release-hero {
    padding: 28px 32px;
    background: linear-gradient(135deg, #8b1a4a 0%, #5e0f32 100%);
    border-radius: 14px;
    color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(139, 26, 74, 0.18);
}

.br-release-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
    margin-bottom: 6px;
}

.br-release-hero__title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.br-release-hero__title i { font-size: 22px; opacity: 0.9; }

.br-release-hero__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.br-release-hero__chip {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.br-release-hero__chip i { margin-right: 4px; opacity: 0.85; }

.br-release-hero__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
}

.br-release-hero__actions .br-btn--ghost {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.br-release-hero__actions .br-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

.br-release-hero__actions .br-btn--primary {
    background: #ffffff;
    color: #8b1a4a;
    border-color: #ffffff;
}

.br-release-hero__actions .br-btn--primary:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #5e0f32;
}

/* Changelog
   ========================================================================== */
.br-changelog-group { margin-bottom: 24px; }
.br-changelog-group:last-child { margin-bottom: 0; }

.br-changelog-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--br-group-color, #8b1a4a);
    font-size: 12px;
    font-weight: 700;
    color: var(--br-group-color, #1f2937);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.br-changelog-group--added       { --br-group-color: #166534; }
.br-changelog-group--changed     { --br-group-color: #1e40af; }
.br-changelog-group--fixed       { --br-group-color: #92400e; }
.br-changelog-group--deprecated  { --br-group-color: #6b7280; }
.br-changelog-group--removed     { --br-group-color: #991b1b; }
.br-changelog-group--security    { --br-group-color: #8b1a4a; }

.br-changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.br-changelog-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f5f5fa;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.br-changelog-item:last-child { border-bottom: none; }
.br-changelog-item:hover { background: #fafbfc; }

.br-changelog-item__body { flex: 1; min-width: 0; }

.br-changelog-item__text {
    font-size: 13.5px;
    color: #1f2937;
    line-height: 1.5;
}

.br-changelog-item__meta {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.br-changelog-item__meta a { color: #8b1a4a; font-weight: 500; }
.br-changelog-item__meta a:hover { color: #a8325f; }

.br-changelog-item__actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 200ms;
}

.br-changelog-item:hover .br-changelog-item__actions { opacity: 1; }

/* Empty states
   ========================================================================== */
.br-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 13.5px;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px dashed #e5e7eb;
}

/* Linked items table on release page
   ========================================================================== */
.br-table {
    width: 100%;
    border-collapse: collapse;
}

.br-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    padding: 10px 12px;
    border-bottom: 2px solid #e5e7eb;
    text-align: left;
    background: transparent;
}

.br-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f5f5fa;
    font-size: 13px;
    color: #374151;
    vertical-align: middle;
}

.br-table tbody tr:last-child td { border-bottom: none; }
.br-table tbody tr:hover td { background: #fafbfc; }

.br-table a { color: #8b1a4a; font-weight: 500; }
.br-table a:hover { color: #a8325f; }

/* Form field overrides used inside modal forms
   ========================================================================== */
.br-form-group { margin-bottom: 16px; }
.br-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

/* DataTables responsive — make the row-expansion details look like a mini-card.
   The DataTables responsive plugin hides lower-priority columns on narrow widths
   and shows a "+" toggle to reveal them in a child row. We restyle that child row.
   ========================================================================== */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control:before {
    background-color: #8b1a4a !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(139, 26, 74, 0.25) !important;
    color: #fff !important;
    line-height: 14px !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    background-color: #5e0f32 !important;
}

table.dataTable > tbody > tr.child {
    background: #fafbfc;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    padding: 4px 0;
}

@media (max-width: 575px) {
    table.dataTable > tbody > tr.child ul.dtr-details {
        grid-template-columns: 1fr;
    }
}

table.dataTable > tbody > tr.child ul.dtr-details li {
    padding: 8px 12px;
    border-bottom: none !important;
    background: #ffffff;
    border: 1px solid #f0f0f5;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

table.dataTable > tbody > tr.child ul.dtr-details li:first-child {
    padding-top: 8px !important;
}

table.dataTable > tbody > tr.child span.dtr-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    min-width: 0;
    margin: 0 0 2px 0;
}

table.dataTable > tbody > tr.child span.dtr-data {
    display: block;
    font-size: 13px;
    color: #1f2937;
    word-break: break-word;
}

/* Page header and filter bar responsiveness
   ========================================================================== */
@media (max-width: 767px) {
    .br-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .br-page-header__actions {
        justify-content: flex-start;
        gap: 6px;
    }

    .br-page-header__actions .br-btn {
        flex: 1 1 auto;
        justify-content: center;
        font-size: 12px;
        padding: 8px 10px;
    }

    .br-page-header__title { font-size: 19px; }
    .br-page-header__subtitle { font-size: 12px; }

    /* Filter bar — let dropdowns wrap onto rows naturally */
    .dataTable_filter_area,
    #bug-report-table_wrapper > .row,
    #release-table_wrapper > .row {
        flex-wrap: wrap;
    }

    .dataTable_filter_area .filter-button-area,
    .dataTable_filter_area .filter-area {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dataTable_filter_area select.form-control,
    .dataTable_filter_area input.form-control {
        min-width: 120px !important;
        flex: 1 1 calc(50% - 6px);
    }

    /* Issue header on detail page */
    .br-issue-header__title { font-size: 18px; }
    .br-issue-header__row { gap: 6px; }
    .br-issue-header__row .ml-auto {
        margin-left: 0 !important;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 8px;
    }

    /* Sidebar drops below main content (already handled by detail-grid breakpoint at 991px) */
    .br-card-body { padding: 14px; }
    .br-card-header { padding: 12px 14px; }
    .br-meta-row { padding: 12px 14px; }
    .br-comment { padding: 12px 14px; }
    .br-composer { padding: 14px; }

    /* Release hero scales down on mobile */
    .br-release-hero { padding: 20px; }
    .br-release-hero__title { font-size: 20px; }
    .br-release-hero__title i { font-size: 18px; }
    .br-release-hero__actions { gap: 6px; }
    .br-release-hero__actions .br-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Linked items table — keep horizontal scroll if it overflows */
    .br-table { font-size: 12.5px; }
    .br-table th, .br-table td { padding: 8px 10px; }
}

/* Padding adjustments for the page wrapper at narrow widths */
@media (max-width: 575px) {
    #page-content.p20 {
        padding: 12px !important;
    }
}