/* Global styling */
body {
    background-color: #f8f9fa;
    color: #212529;
}

/* Typography enhancements */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 600;
    color: #212529;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Section headings get room above and a rule below. Card and modal headings are h2s for the
   outline but sized down with .h5, .card-title or .modal-title, and are left alone; so is an
   h2 with .mb-0, which sits in a toolbar row beside its buttons. */
h2:where(:not(.h4):not(.h5):not(.h6):not(.card-title):not(.modal-title):not(.mb-0)) {
    margin-top: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

/* Enhanced tables */
.table {
    background-color: white;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.375rem;
    overflow: hidden;
}

.table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: none;
}

.table tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

/* Card enhancements */
.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.5rem;
}

/* Form enhancements */
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
}

.form-control, .form-select {
    border: 1px solid #86888a;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Roomier default controls. :where() keeps the specificity at one class, and the exclusions
   leave the -sm and -lg variants to Bootstrap. The select keeps Bootstrap's right padding,
   which is where its arrow lives. */
.form-control:where(:not(.form-control-sm):not(.form-control-lg)) {
    padding: 0.75rem 1rem;
}

.form-select:where(:not(.form-select-sm):not(.form-select-lg)) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
}

/* Checkbox and radio inputs — WCAG 1.4.11 requires 3:1 non-text contrast */
.form-check-input {
    border: 2px solid #86888a;
}

.form-control:focus, .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Required field styling */
.form-control:required,
.form-select:required {
    border-left: 3px solid #dc3545;
}

/* Add asterisk to labels of required fields using :has() selector */
label:has(+ .form-control:required)::after,
label:has(+ .form-select:required)::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* Focus indicators (WCAG 1.4.11, 2.4.7). Bootstrap marks focus with a translucent blue shadow
   hugging the control, which is below 3:1 against white and indistinguishable from an outlined
   button's own border. Replace it with a solid outline set off from the control, so it sits on
   the page background: black in the body, white on the dark header. */
main a:focus-visible,
main button:focus-visible,
main .btn:focus-visible,
main .form-select:focus-visible,
main .form-control:focus-visible,
main .form-check-input:focus-visible,
body > a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
    box-shadow: none;
}

header a:focus-visible,
header button:focus-visible,
header .btn:focus-visible,
header .nav-link:focus-visible,
header .form-select:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: none;
}

/* Button enhancements */
.btn {
    margin-top: 2px;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

/* Roomier default buttons, set through Bootstrap's variables so that .btn-sm and .btn-lg,
   which set the same variables, keep their sizes; :where() keeps this at one class. */
.btn:where(:not(.btn-sm):not(.btn-lg)) {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.25rem;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Bootstrap's yellow outline text is 1.6:1 on white. This darker gold reads at 4.6:1,
   and the hover state (black on yellow) is Bootstrap's own and stays as it is. */
.btn-outline-warning {
    --bs-btn-color: #957000;
    --bs-btn-border-color: #957000;
}

/* Alert enhancements */
.alert {
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger {
    background-color: #f8d7da;
    color: #842029;
}

.alert-info {
    background-color: #cff4fc;
    color: #055160;
}

/* Status badges */
.badge {
    padding: 0.375em 0.75em;
    font-weight: 600;
    border-radius: 0.375rem;
}

/* A badge inherits the font size of its heading, which at h1 and h2 size makes a count read as
   loudly as the heading itself. Keep it at body size and centered on the text. */
h1 .badge,
h2 .badge {
    font-size: 1rem;
    vertical-align: middle;
}

/* Bootstrap's warning and info backgrounds are too light for white text (1.6:1 and 2:1).
   In Progress, Audit Done, External Client and the two lowest severities all use them, so
   the fix lives here rather than in the status maps of each template. */
.badge.bg-warning,
.badge.bg-info {
    --bs-badge-color: #212529;
}

/* Visual indicators for user-edited fields */
.user-edited {
    border-left: 4px solid #0d6efd !important;
    background-color: #e7f1ff !important;
    padding-left: 1rem !important;
}

.user-edited-label {
    color: #0d6efd !important;
    font-weight: 600 !important;
}

/* Language notice on issue forms */
.language-notice {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    border: 1px solid #b6effb;
    margin-bottom: 0;
    background-color: #cff4fc;
    color: #055160;
}

/* Read-only reference translation shown beside a template-derived field */
.reference-panel {
    margin-top: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.reference-panel__summary {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

/* Keep the underline on focus and add an outline: the underline is the only
   non-color affordance, so removing it on focus would erase it for keyboard users. */
.reference-panel__summary:hover,
.reference-panel__summary:focus-visible {
    text-decoration: underline;
}

.reference-panel__summary:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.reference-panel__body {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #dee2e6;
    white-space: pre-wrap;
    background-color: #f8f9fa;
}

/* Disabled button styling */
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(60%);
    border-style: dashed;
}

/* Screen reader only class */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Navigation enhancements */
.navbar {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: white;
    transition: all 0.15s ease-in-out;
}

/* The primary blue is only 3.4:1 on the dark navbar; this lighter blue is 8.8:1
   and still reads as a highlight next to the white inactive links. */
.navbar-nav .nav-link:hover {
    color: #9ec5fe;
}

/* Enhanced active navigation item styling */
.navbar-nav .nav-link.active {
    position: relative;
    font-weight: 600;
    color: #9ec5fe;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #9ec5fe;
}

/* Enhanced dropdown */
.dropdown-menu {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0a58ca;
}

.dropdown-item.active {
    background-color: #0d6efd;
    color: white;
    font-weight: 600;
}

.dropdown-item.active:hover {
    background-color: #0b5ed7;
}

/* Breadcrumb styling */
.breadcrumb {
    background-color: white;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Bootstrap positions the divider with physical left/right properties, which puts it after
   the item on a right-to-left page; logical properties follow the text direction. */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-inline-start: var(--bs-breadcrumb-item-padding-x);
}

.breadcrumb-item + .breadcrumb-item::before {
    float: inline-start;
    padding-right: 0;
    padding-inline-end: var(--bs-breadcrumb-item-padding-x);
    font-weight: bold;
    color: #6c757d;
}

.breadcrumb-item a {
    text-decoration: none;
    color: #0d6efd;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Footer enhancements. The template gives it bg-light, and the text colors here are chosen
   for that; the dark background this rule once declared never applied and is gone. */
.footer {
    color: #052341dc;
    padding: 2rem 0;
    margin-top: 3rem;
}

.footer .text-muted {
    color: #04213d !important;
}

/* Browsers give a dd a 40px start margin, and Bootstrap's reboot zeroes it with a physical
   margin-left. On a right-to-left page the start side is the right, so the margin survives,
   the dd in a .row grid no longer fits beside its dt, and every value wraps under its label.
   The logical property zeroes the margin that actually exists. */
dd {
    margin-inline-start: 0;
}

/* List styling */
ul[aria-label="Issue Metadata"] {
    list-style: none;
    padding: 0;
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 2rem;
}

ul[aria-label="Issue Metadata"] li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

ul[aria-label="Issue Metadata"] li:last-child {
    border-bottom: none;
}

/* Article sections */
article {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 2rem;
}

/* Screenshot container */
.screenshots-container {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Links keep Bootstrap's underline: on a page where links sit in running text and table
   cells, the underline is the affordance (WCAG 1.4.1). The blue is one step darker than
   Bootstrap's, because the page background is gray and the primary blue reads at 4.3:1 on it. */
a {
    color: #0b5ed7;
    font-weight: 500;
}

/* Back link styling */
a[href*="Back to"] {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

a[href*="Back to"]:hover {
    background-color: #e9ecef;
    text-decoration: none;
    transform: translateX(-2px);
}

/* Main container spacing */
main.container {
    min-height: calc(100vh - 200px);
}

/* Welcome page styling */
.text-center h1 {
    color: #212529;
    margin-bottom: 2rem;
}

.lead {
    font-size: 1.25rem;
    font-weight: 400;
    color: #495057;
}

/* Action links */
p a[href*="Add new"] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #0d6efd;
    color: white !important;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    margin-bottom: 1.5rem;
}

p a[href*="Add new"]:hover {
    background-color: #0b5ed7;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
 .help-text{
    margin-left: 5px;
    padding: 5px;
    border: #198754 solid 1px;
    background-color: #e9fce7dc;
 }