/* EULiST Issue Tracker — brand layer on top of Bootstrap 5 (see design.md). */

:root {
  /* Official brand colours — do not alter */
  --eulist-blue: #003DA5;
  --eulist-warm-white: #F5EFEB;
  --eulist-dark-blue: #151F6D;
  --eulist-light-blue: #69A3E8;
  --eulist-pink: #DEA8E8;
  --eulist-green: #008540;
  --eulist-orange: #FF7439;
  --eulist-ink: #30261E;
  --eulist-white: #FFFFFF;

  /* Web-only neutrals */
  --color-border: #D8D3D0;
  --color-muted: #5E554E;

  /* Bootstrap theme mapping */
  --bs-primary: var(--eulist-blue);
  --bs-primary-rgb: 0, 61, 165;
  --bs-link-color: var(--eulist-blue);
  --bs-link-color-rgb: 0, 61, 165;
  --bs-link-hover-color: var(--eulist-dark-blue);
  --bs-link-hover-color-rgb: 21, 31, 109;
  --bs-body-color: var(--eulist-ink);
  --bs-body-color-rgb: 48, 38, 30;
  --bs-body-bg: var(--eulist-warm-white);
  --bs-secondary-color: var(--color-muted);
  --bs-border-color: var(--color-border);
  --bs-body-font-family: 'Outfit', Arial, sans-serif;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;
  --bs-border-radius: 0.375rem;
  --bs-card-border-radius: 0.5rem;
  --bs-focus-ring-color: rgba(21, 31, 109, 0.35);
}

html, body { min-height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--eulist-warm-white);
  color: var(--eulist-ink);
}
body > main { flex: 1 0 auto; }

/* Typography */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 500; color: var(--eulist-blue); }
strong, b, .fw-medium { font-weight: 500; }
.page-title { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 200; line-height: 1.15; color: var(--eulist-blue); text-transform: uppercase; letter-spacing: -0.01em; }
.section-eyebrow {
  font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--eulist-dark-blue);
}
.text-body-secondary { color: var(--color-muted) !important; }

a { text-underline-offset: 2px; }
:where(a, button, input, select, textarea, summary, .btn):focus-visible {
  outline: 3px solid var(--eulist-dark-blue);
  outline-offset: 2px;
  box-shadow: none;
}

.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .375rem; }

/* Header */
.app-navbar { background: var(--eulist-blue); padding-block: .6rem; }
.app-navbar .nav-link { color: rgba(255, 255, 255, .9); font-weight: 500; border-radius: .375rem; padding-inline: .75rem !important; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); }
.app-navbar .nav-link.active { color: #fff; background: var(--eulist-dark-blue); }
.app-navbar :where(a, button):focus-visible { outline-color: #fff; }
.brand-logo { height: 48px; width: auto; }
.brand-divider { width: 1px; height: 36px; background: rgba(255, 255, 255, .45); }
.brand-title { color: #fff; font-size: .8rem; line-height: 1.15; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.brand-title span { font-weight: 900; font-size: .95rem; }

/* Decorative brand geometry: slanted facets, blue always present (design.md §6) */
.brand-band { position: relative; height: 10px; background: var(--eulist-dark-blue); overflow: hidden; }
.brand-band .facet { position: absolute; top: 0; bottom: 0; }
/* Starts with EULiST orange at the left edge of the screen, then light blue, and pink at the right edge,
   over the dark blue base. The default EULiST blue is deliberately not used here (it would merge with the navbar). */
.brand-band .facet-1 { left: 0; width: 16%; background: var(--eulist-orange); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
.brand-band .facet-2 { left: 40%; width: 24%; background: var(--eulist-light-blue); clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.brand-band .facet-3 { right: 0; width: 14%; background: var(--eulist-pink); clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }

/* Footer */
.app-footer { background: #fff; border-top: 1px solid var(--color-border); color: var(--color-muted); }

/* Buttons */
.btn { font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn-sm { min-height: 32px; }
.btn-link { min-height: 0; }
.btn-primary {
  --bs-btn-bg: var(--eulist-blue); --bs-btn-border-color: var(--eulist-blue);
  --bs-btn-hover-bg: var(--eulist-dark-blue); --bs-btn-hover-border-color: var(--eulist-dark-blue);
  --bs-btn-active-bg: var(--eulist-dark-blue); --bs-btn-active-border-color: var(--eulist-dark-blue);
  --bs-btn-disabled-bg: var(--eulist-blue); --bs-btn-disabled-border-color: var(--eulist-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--eulist-blue); --bs-btn-border-color: var(--eulist-blue);
  --bs-btn-hover-bg: var(--eulist-blue); --bs-btn-hover-border-color: var(--eulist-blue);
  --bs-btn-active-bg: var(--eulist-dark-blue); --bs-btn-active-border-color: var(--eulist-dark-blue);
  --bs-btn-disabled-color: var(--eulist-blue); --bs-btn-disabled-border-color: var(--eulist-blue);
  background: #fff;
}
.btn-outline-primary:hover { background: var(--eulist-blue); }

/* Cards */
.card { --bs-card-bg: #fff; border-color: var(--color-border); box-shadow: 0 1px 2px rgba(48, 38, 30, .04); }
.card-header { background: #fff; border-bottom-color: var(--color-border); padding-block: .85rem; }
.card-footer { background: #FBF8F6; border-top-color: var(--color-border); }

/* Stat cards */
.stat-card { border-top: 4px solid var(--eulist-blue); transition: transform .12s ease, box-shadow .12s ease; color: var(--eulist-ink); }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 61, 165, .12); }
.stat-card .stat-label { font-size: .85rem; font-weight: 500; color: var(--color-muted); }
.stat-card .stat-value { font-size: 2.25rem; font-weight: 300; line-height: 1.1; color: var(--eulist-blue); }
.stat-open { border-top-color: var(--eulist-blue); }
.stat-in_progress { border-top-color: var(--eulist-light-blue); }
.stat-resolved { border-top-color: var(--eulist-green); }
.stat-closed { border-top-color: var(--color-muted); }
.stat-total { border-top-color: var(--eulist-dark-blue); }

/* Tables */
.issue-table th { font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); background: #FBF8F6; white-space: nowrap; }
.issue-table .col-id { width: 4.5rem; }
.issue-link { font-weight: 500; text-decoration: none; }
.issue-link:hover { text-decoration: underline; }
.table { --bs-table-bg: #fff; --bs-table-hover-bg: #F8F4F1; margin-bottom: 0; }

/* Badges: icon + text, never colour alone. Contrast verified ≥ 4.5:1. */
.badge { font-weight: 500; font-size: .78rem; padding: .35em .6em; border: 1px solid transparent; white-space: nowrap; }
.badge-type-bug { background: #FBE4E1; color: #8B1A1A; border-color: #F0C2BC; }
.badge-type-feature { background: #F6E6FA; color: #5B2466; border-color: var(--eulist-pink); }
.badge-type-task { background: #E4EEFB; color: #0B3D80; border-color: #B9D2F3; }

.badge-status-open { background: var(--eulist-blue); color: #fff; }
.badge-status-in_progress { background: var(--eulist-light-blue); color: var(--eulist-dark-blue); }
.badge-status-resolved { background: var(--eulist-green); color: #fff; }
.badge-status-closed { background: #5C534C; color: #fff; }

.badge-priority-low { background: #EDE8E4; color: var(--eulist-ink); border-color: var(--color-border); }
.badge-priority-normal { background: #fff; color: var(--eulist-blue); border-color: var(--eulist-blue); }
.badge-priority-high { background: var(--eulist-orange); color: var(--eulist-ink); }
.badge-priority-critical { background: #B42318; color: #fff; }

.badge-role-admin { background: var(--eulist-dark-blue); color: #fff; }
.badge-role-agent { background: var(--eulist-light-blue); color: var(--eulist-dark-blue); }
.badge-role-viewer { background: #E4EEFB; color: #0B3D80; }
.role-hint { min-width: 16rem; max-width: 20rem; white-space: normal; }

/* Filters */
.quick-filters .nav-link { color: var(--eulist-blue); background: #fff; border: 1px solid var(--color-border); font-weight: 500; }
.quick-filters .nav-link.active { background: var(--eulist-blue); border-color: var(--eulist-blue); color: #fff; }
.filter-summary { cursor: pointer; color: var(--eulist-blue); font-weight: 500; width: fit-content; }
.form-label { font-weight: 500; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #BDB5AF; }
/* Inputs, selects, input-group addons and buttons share one height so filter rows line up */
.filter-card .form-control, .filter-card .form-select, .filter-card .input-group-text, .filter-card .btn { min-height: 40px; }
.form-control:focus, .form-select:focus { border-color: var(--eulist-blue); box-shadow: 0 0 0 .2rem rgba(0, 61, 165, .2); }

/* Pagination */
.pagination { --bs-pagination-color: var(--eulist-blue); --bs-pagination-active-bg: var(--eulist-blue); --bs-pagination-active-border-color: var(--eulist-blue); gap: .15rem; }

/* Issue page */
.issue-title { word-break: break-word; }
.issue-number { color: var(--color-muted); font-weight: 300; }
.issue-text, .comment-body, .activity-text { white-space: normal; overflow-wrap: anywhere; }
.issue-sidebar dt { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.issue-sidebar dd { margin-bottom: .9rem; }
.issue-sidebar dd:last-child { margin-bottom: 0; }
@media (min-width: 992px) { .issue-sidebar { position: sticky; top: 1rem; } }
.min-w-0 { min-width: 0; }

.comment { padding: .9rem 0; border-bottom: 1px solid #EEE8E4; }
.comment:first-child { padding-top: 0; }
.comment:last-child { border-bottom: 0; padding-bottom: 0; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.comment-avatar {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--eulist-blue); color: #fff; font-weight: 500; font-size: .85rem;
}
.comment-body { padding-left: 2.3rem; }
.comment.is-new { animation: highlight 2s ease-out; }
@keyframes highlight { from { background: #E4EEFB; } to { background: transparent; } }

.activity-list { position: relative; }
.activity-item { display: flex; gap: .75rem; padding-bottom: .9rem; position: relative; }
.activity-item:last-child { padding-bottom: 0; }
.activity-item:not(:last-child)::before { content: ""; position: absolute; left: .62rem; top: 1.6rem; bottom: .2rem; width: 1px; background: var(--color-border); }
.activity-icon { flex: none; width: 1.3rem; height: 1.3rem; font-size: .8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E4EEFB; color: var(--eulist-blue); margin-top: .15rem; }
.activity-value { font-weight: 500; background: #F3EEEA; padding: 0 .3rem; border-radius: .25rem; overflow-wrap: anywhere; }
.activity-details summary { cursor: pointer; color: var(--eulist-blue); font-size: .875rem; }
.activity-text { background: #FBF8F6; border: 1px solid #EEE8E4; border-radius: .25rem; padding: .4rem .6rem; font-size: .875rem; max-height: 16rem; overflow: auto; }

/* Rich text: rendered descriptions and comments (kept close to what the editor shows) */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0; }
.rich-text p:empty { min-height: 1.55em; }
.rich-text h2, .rich-text h3 { margin: .9rem 0 .35rem; color: var(--eulist-dark-blue); }
.rich-text h2 { font-size: 1.3rem; }
.rich-text h3 { font-size: 1.1rem; }
.rich-text ul, .rich-text ol { margin: .3rem 0; padding-left: 1.6rem; }
.rich-text blockquote { margin: .5rem 0; padding: .2rem 0 .2rem .9rem; border-left: 4px solid var(--eulist-light-blue); color: var(--color-muted); }
.rich-text pre, .rich-editor .ql-editor .ql-code-block-container {
  margin: .5rem 0; padding: .6rem .8rem; background: #F3EEEA; color: var(--eulist-ink); border-radius: .25rem;
  font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.rich-text code { color: var(--eulist-dark-blue); }
.rich-text img { display: inline-block; max-width: 100%; height: auto; margin: .35rem 0; border: 1px solid var(--color-border); border-radius: .25rem; cursor: zoom-in; }

/* Rich-text editor (Quill, snow theme) */
.rich-only { display: none; }
.has-rich-editor .rich-only { display: inline; }
.has-rich-editor .rich-fallback { display: none; }
.rich-editor { background: #fff; border: 1px solid #BDB5AF; border-radius: var(--bs-border-radius); transition: border-color .15s, box-shadow .15s; }
.rich-editor:focus-within { border-color: var(--eulist-blue); box-shadow: 0 0 0 .2rem rgba(0, 61, 165, .2); }
.rich-editor.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.rich-editor.is-invalid:focus-within { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .25); }
.rich-editor.is-uploading .ql-editor { cursor: progress; }
.rich-editor .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--color-border); padding: .3rem .4rem; font-family: inherit; display: flex; flex-wrap: wrap; row-gap: .15rem; }
.rich-editor .ql-toolbar.ql-snow .ql-formats { margin-right: .6rem; }
.rich-editor .ql-snow.ql-toolbar button { width: 32px; height: 30px; padding: 4px 6px; border-radius: .25rem; }
.rich-editor .ql-snow.ql-toolbar button:hover, .rich-editor .ql-snow.ql-toolbar button.ql-active { background: #E4EEFB; }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.rich-editor .ql-snow .ql-picker-label:hover .ql-stroke, .rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--eulist-blue); }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-fill, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--eulist-blue); }
.rich-editor .ql-snow.ql-toolbar button:hover, .rich-editor .ql-snow .ql-picker-label:hover, .rich-editor .ql-snow .ql-picker-item:hover,
.rich-editor .ql-snow .ql-picker-label.ql-active, .rich-editor .ql-snow .ql-picker-item.ql-selected { color: var(--eulist-blue); }
.rich-editor .ql-snow .ql-picker { height: 30px; }
.rich-editor .ql-container.ql-snow { border: 0; font-family: inherit; font-size: 1rem; }
.rich-editor .ql-editor { min-height: 7rem; max-height: 60vh; overflow-y: auto; padding: .6rem .75rem; line-height: 1.55; color: var(--eulist-ink); }
.rich-editor-lg .ql-editor { min-height: 14rem; }
.rich-editor .ql-editor.ql-blank::before { left: .75rem; right: .75rem; color: var(--color-muted); font-style: normal; }
.rich-editor .ql-editor h2 { font-size: 1.3rem; color: var(--eulist-dark-blue); }
.rich-editor .ql-editor h3 { font-size: 1.1rem; color: var(--eulist-dark-blue); }
.rich-editor .ql-editor blockquote { border-left-color: var(--eulist-light-blue); color: var(--color-muted); }
.rich-editor .ql-editor img { max-width: 100%; height: auto; }
.rich-editor .ql-snow .ql-tooltip { z-index: 5; border-color: var(--color-border); border-radius: .375rem; box-shadow: 0 .25rem .75rem rgba(48, 38, 30, .15); }
.rich-editor .ql-snow .ql-tooltip input[type=text] { border-color: #BDB5AF; border-radius: .25rem; }
.rich-editor .ql-snow a, .rich-editor .ql-snow .ql-tooltip a.ql-action, .rich-editor .ql-snow .ql-tooltip a.ql-remove { color: var(--eulist-blue); }
.rich-editor-status:empty { display: none; }

/* Toasts */
.toast-container { z-index: 1100; }
.app-toast { border: 0; border-left: 5px solid var(--eulist-blue); background: #fff; color: var(--eulist-ink); }
.app-toast-success { border-left-color: var(--eulist-green); }
.app-toast-success .toast-body i { color: var(--eulist-green); }
.app-toast-danger { border-left-color: #B42318; }
.app-toast-danger .toast-body i { color: #B42318; }
.app-toast-warning { border-left-color: var(--eulist-orange); }
.app-toast-info .toast-body i { color: var(--eulist-blue); }

/* Error / sign-in cards */
.error-icon { font-size: 3rem; color: var(--eulist-blue); line-height: 1; }
.signin-card, .error-card { border-top: 5px solid var(--eulist-blue); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--color-muted); font-size: .9rem; }
.nav-tabs .nav-link { color: var(--eulist-blue); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--eulist-ink); background: var(--eulist-warm-white); border-bottom-color: var(--eulist-warm-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Sign-in page */
.signin-card { overflow: hidden; border-top: 0; }
.signin-facets { position: relative; height: 14px; background: var(--eulist-dark-blue); }
.signin-facets .facet { position: absolute; top: 0; bottom: 0; }
.signin-facets .facet-1 { left: 0; width: 46%; background: var(--eulist-blue); clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.signin-facets .facet-2 { left: 56%; width: 24%; background: var(--eulist-light-blue); clip-path: polygon(8% 0, 100% 0, 88% 100%, 0 100%); }
.signin-facets .facet-3 { right: 0; width: 14%; background: var(--eulist-pink); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.signin-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 300; text-transform: uppercase; letter-spacing: -0.01em; }
.signin-lead { max-width: 30rem; margin-inline: auto; }
.signin-button { min-height: 52px; }

/* Projects */
.badge-project-default { background: #FFF1E9; color: #8A3300; border: 1px solid #F5C3A6; font-weight: 500; vertical-align: middle; }
.project-switcher .form-select { min-width: 14rem; }