/*
 * ACE²-EU Experts Database & Network — application styles on top of AdminLTE 4.
 * Vendor files are never edited; all customisation lives here.
 *
 * Brand colours sampled from logo.jpeg:
 *   navy #14375d (text-safe: 12.1:1 on white)
 *   teal #01a5ae (decorative only: 3.0:1 on white — never used for text)
 *   teal-dark #00747b (text-safe variant: 5.5:1 on white)
 */
:root {
    --ace-navy: #14375d;
    --ace-navy-rgb: 20, 55, 93;
    --ace-navy-dark: #0b2f57;
    --ace-teal: #01a5ae;
    --ace-teal-dark: #00747b;

    --bs-primary: var(--ace-navy);
    --bs-primary-rgb: var(--ace-navy-rgb);
    --bs-link-color: var(--ace-navy);
    --bs-link-color-rgb: var(--ace-navy-rgb);
    --bs-link-hover-color: var(--ace-teal-dark);
    --bs-focus-ring-color: rgba(var(--ace-navy-rgb), .35);
}

.btn-primary {
    --bs-btn-bg: var(--ace-navy);
    --bs-btn-border-color: var(--ace-navy);
    --bs-btn-hover-bg: var(--ace-navy-dark);
    --bs-btn-hover-border-color: var(--ace-navy-dark);
    --bs-btn-active-bg: var(--ace-navy-dark);
    --bs-btn-active-border-color: var(--ace-navy-dark);
    --bs-btn-disabled-bg: var(--ace-navy);
    --bs-btn-disabled-border-color: var(--ace-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--ace-navy);
    --bs-btn-border-color: var(--ace-navy);
    --bs-btn-hover-bg: var(--ace-navy);
    --bs-btn-hover-border-color: var(--ace-navy);
    --bs-btn-active-bg: var(--ace-navy-dark);
    --bs-btn-active-border-color: var(--ace-navy-dark);
}

.card-primary.card-outline { border-top-color: var(--ace-teal); }

.pagination {
    --bs-pagination-color: var(--ace-navy);
    --bs-pagination-active-bg: var(--ace-navy);
    --bs-pagination-active-border-color: var(--ace-navy);
}

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--ace-teal-dark);
    outline-offset: 2px;
    box-shadow: none;
}

/* Skip links are injected by AdminLTE's accessibility module (targets #main and #navigation);
   layouts add a <noscript> fallback. AdminLTE's own .skip-link styles are kept. */

/* Application shell (AdminLTE app-header + app-sidebar, as guitemplate/dist/index.html) */
.app-header { border-bottom: 3px solid var(--ace-teal); }
.app-main:focus { outline: none; }
.app-sidebar { background-color: var(--ace-navy-dark); }
.app-sidebar .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .12); }
.app-sidebar .nav-header { color: rgba(255, 255, 255, .72); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.sidebar-menu .nav-link.active { background-color: var(--ace-teal-dark) !important; color: #fff !important; }
.user-menu .user-header { background-color: var(--ace-navy); color: #fff; }
.user-menu .user-header small { color: rgba(255, 255, 255, .85); }
.user-menu .user-image { object-fit: cover; }
.user-menu .user-header img { object-fit: cover; }
/* The sidebar already shows the brand mark on large screens; keep the full logo for smaller ones and wide desktops. */
@media (max-width: 400px) { .app-header-logo img { width: 128px; height: auto; } }

/* Cards and states */
.institution-card { transition: box-shadow .15s ease-in-out; color: inherit; }
.institution-card:hover { box-shadow: 0 .25rem .75rem rgba(var(--ace-navy-rgb), .15); }
.empty-state .bi { color: var(--ace-teal-dark); }

@media (prefers-reduced-motion: reduce) {
    .institution-card { transition: none; }
}

/* Keep Bootstrap's absolutely positioned .visually-hidden labels inside
   scrollable tables, otherwise they widen the page on phones. */
.table-responsive { position: relative; }

/* ---- Milestone 6: profiles, workspace ---------------------------------------------------------- */
.profile-photo { width: 128px; height: 128px; object-fit: cover; flex-shrink: 0; }
.profile-photo-empty { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.text-prewrap { white-space: pre-line; overflow-wrap: anywhere; }
fieldset.card > legend.card-header { float: none; font-size: 1rem; font-weight: 600; margin: 0; padding: .75rem 1rem; }

/* AdminLTE floats .card-title; result cards stack title, badges and details vertically. */
.card-body .card-title { float: none; }
/* Fullscreen toggle: AdminLTE's script switches the icons with inline styles (allowed for scripts under the CSP). */
[data-lte-icon="minimize"] { display: none; }
.result-photo { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
/* Long type labels wrap inside narrow result cards instead of overflowing. */
.card-body .badge { white-space: normal; text-align: left; }
/* AdminLTE adds a clearfix ::after to .card-header; in flex headers it would count as a third item. */
.card-header.d-flex::after { display: none; }
.request-steps .badge { font-weight: 600; }

/* ---- M8.1: profile editor (photo and files, rich-text biography, expertise tags) ---------------- */
.profile-photo-preview, .profile-photo-placeholder { width: 128px; height: 128px; object-fit: cover; display: block; }
.profile-photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem;
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* Rich text as stored (sanitised HTML): Quill alignment and indentation classes. */
.rich-text { overflow-wrap: anywhere; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h2 { font-size: 1.25rem; } .rich-text h3 { font-size: 1.1rem; } .rich-text h4 { font-size: 1rem; }
.rich-text blockquote { border-left: 4px solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }
.rich-text table { border-collapse: collapse; margin-bottom: 1rem; width: 100%; }
.rich-text td, .rich-text th { border: 1px solid var(--bs-border-color); padding: .25rem .5rem; vertical-align: top; }
.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-align-justify { text-align: justify; }
.rich-text .ql-indent-1 { padding-left: 3em; } .rich-text .ql-indent-2 { padding-left: 6em; }
.rich-text .ql-indent-3 { padding-left: 9em; } .rich-text .ql-indent-4 { padding-left: 12em; }
.rich-text .ql-indent-5 { padding-left: 15em; } .rich-text .ql-indent-6 { padding-left: 18em; }
.rich-text .ql-indent-7 { padding-left: 21em; } .rich-text .ql-indent-8 { padding-left: 24em; }
.rich-editor .ql-toolbar.ql-snow { border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; background: var(--bs-tertiary-bg); }
.rich-editor .ql-container.ql-snow { border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); font-family: inherit; font-size: 1rem; }
.rich-editor .ql-editor { min-height: 14rem; }
.rich-editor .ql-editor table td { border: 1px solid var(--bs-border-color); }
.rich-editor .rt-table-tools button { width: auto; padding: 3px 5px; color: #444; }
.rich-editor .rt-table-tools button:hover, .rich-editor .rt-table-tools button:focus { color: #06c; }

/* Areas of expertise tag field (blue: from the list, green: new term). */
.term-tags .card-body { position: relative; }
.term-tags-box { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; min-height: 2.75rem; cursor: text; }
.term-tags-box:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.15); }
.term-tags-chips { display: contents; }
.term-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .25rem .125rem .625rem; border-radius: 1rem;
    border: 1px solid #c4daf5; background: #eaf2fd; color: #1b4f8a; font-size: .875rem; }
.term-chip-new { border-color: #bfe6bf; background: #eafbea; color: #256b25; }
.term-chip label { cursor: default; }
.term-chip .term-chip-check:not(.visually-hidden) { margin: 0 .25rem 0 0; }
.term-chip-note { font-size: .75rem; opacity: .85; }
.term-chip-remove { border: 0; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; padding: 0 .25rem; border-radius: 50%; }
.term-chip-remove:hover, .term-chip-remove:focus-visible { background: rgba(0,0,0,.08); }
.term-tags-input { flex: 1 1 12rem; min-width: 8rem; border: 0; outline: 0; padding: .125rem 0; background: transparent; }
.term-tags-full .term-tags-input::placeholder { color: transparent; }
.term-tags-suggestions { position: absolute; z-index: 1050; left: 1rem; right: 1rem; max-height: 16rem; overflow-y: auto; margin: .25rem 0 0;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }
.term-suggestion { display: flex; align-items: center; gap: .5rem; padding: .375rem .75rem; cursor: pointer; }
.term-suggestion-label { flex: 1 1 auto; }
.term-suggestion.active, .term-suggestion:hover { background: #f0f6ff; }
.term-suggestion.disabled { cursor: default; color: var(--bs-secondary-color); background: transparent; }
.term-suggestion-create { color: #256b25; border-top: 1px solid var(--bs-border-color-translucent); }
.term-suggestion-type { font-size: .75rem; color: var(--bs-secondary-color); }
.term-badge { font-size: .7rem; padding: .05rem .5rem; border-radius: 1rem; border: 1px solid #c4daf5; background: #eaf2fd; color: #1b4f8a; white-space: nowrap; }
.term-badge-added { border-color: #bfe6bf; background: #eafbea; color: #256b25; }
.term-legend { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; vertical-align: -.05rem; border: 1px solid #c4daf5; background: #eaf2fd; }
.term-legend-new { border-color: #bfe6bf; background: #eafbea; }

/* ---- e-Campus dashboard (UX-DASH-01) ------------------------------------------------------------- */
.dashboard-progress { width: 100%; max-width: 28rem; height: .6rem; appearance: none; border: 0; border-radius: 1rem; background: var(--bs-secondary-bg); overflow: hidden; display: block; }
.dashboard-progress::-webkit-progress-bar { background: var(--bs-secondary-bg); border-radius: 1rem; }
.dashboard-progress::-webkit-progress-value { background: var(--ace-teal-dark, #0f766e); border-radius: 1rem; }
.dashboard-progress::-moz-progress-bar { background: var(--ace-teal-dark, #0f766e); border-radius: 1rem; }
.dashboard-tile-icon { font-size: 1.75rem; color: var(--ace-teal-dark, #0f766e); }
.dashboard-tile-external .dashboard-tile-icon { color: var(--ace-navy, #12305a); }
.dashboard-count { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border-radius: 50%;
    font-weight: 700; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.dashboard-count-active { background: var(--ace-teal-dark, #0f766e); color: #fff; }

/* ORCID activities on the expert page */
.orcid-id-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 50%;
    background: #a6ce39; color: #fff; font-size: .7em; font-weight: 700; vertical-align: .1em; }
.orcid-list { padding-left: 1.1rem; }
.orcid-list li { margin-bottom: .35rem; }

/* Collapsed sidebar on desktop (owner request of 22 Oct 2026): AdminLTE "sidebar-mini" keeps a dark-blue
   bar with the menu icons; hovering it shows the full menu again. Phones and tablets keep the slide-out menu. */
@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .app-sidebar { background-color: var(--ace-navy-dark); overflow-x: hidden; }
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-brand { justify-content: center; }
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .brand-link { padding-left: 0; padding-right: 0; justify-content: center; }
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .brand-image { margin: 0; }
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-item + .nav-header,
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-item:has(+ .nav-header) { margin-bottom: .5rem; }
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-link { display: flex; justify-content: center; margin-left: auto; margin-right: auto; }
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-icon { margin: 0; font-size: 1.15rem; }
    /* Labels stay available to screen readers while only the icons are shown. */
    .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-link p {
        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;
        visibility: visible !important; animation: none !important;
    }
}

/* Startup logos (uploaded image or the default ACE²-EU style logo) */
.startup-logo { flex: 0 0 auto; border-radius: .75rem; object-fit: contain; background: #fff; }
img.startup-logo { border: 1px solid var(--bs-border-color); padding: 2px; }

/* Items imported from ORCID */
.badge-orcid { background-color: #a6ce39; color: #1f2d0a; font-weight: 600; }

/* AI Team Composer: partner colours (TeamComposer::PARTNER_COLORS) */
.inst-UPS { --inst-color: #2f80ed; }
.inst-LIK { --inst-color: #f2994a; }
.inst-UFV { --inst-color: #eb5757; }
.inst-MUG { --inst-color: #27ae60; }
.inst-UCB { --inst-color: #9b51e0; }
.inst-THI { --inst-color: #0f9fa8; }
.inst-UGD { --inst-color: #d4a106; }
.inst-CUAS { --inst-color: #d6336c; }
.inst-LAC { --inst-color: #3fb6e8; }
.inst-OTHER { --inst-color: #94a3b8; }
.inst-chip { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .75rem; font-weight: 600; color: #fff; background: var(--inst-color, #94a3b8); }
.team-card { border-left: .4rem solid var(--inst-color, #94a3b8) !important; }
.team-dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; background: var(--inst-color, #94a3b8); }
.team-dot-empty { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px dashed var(--bs-border-color); }
.team-hero { background: linear-gradient(135deg, #0b2f57 0%, #14375d 55%, #01a5ae 100%); color: #fff; border-radius: .75rem; }
.team-hero .text-body-secondary, .team-hero a { color: rgba(255,255,255,.85) !important; }
.team-constellation { width: 100%; height: auto; max-height: 520px; }
.team-legend-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: .2rem; background: var(--swatch); vertical-align: -.05rem; }
.crit-relevance { --swatch: #01a5ae; } .crit-expertise { --swatch: #7b3fa0; } .crit-fitting { --swatch: #f39c12; }
.crit-projects { --swatch: #2f80ed; } .crit-record { --swatch: #27ae60; } .crit-recency { --swatch: #e74c3c; }
.team-heatmap th, .team-heatmap td { text-align: center; vertical-align: middle; }
.team-heatmap th:first-child, .team-heatmap td:first-child { text-align: left; }
.btn-team { color: #fff; background: linear-gradient(90deg, #14375d, #01a5ae); border: 0; }
.btn-team:hover, .btn-team:focus { color: #fff; background: linear-gradient(90deg, #0b2f57, #00747b); }

/* EU Calls: submission status (forthcoming amber, open green, closed grey) */
.call-card { border-left: 4px solid var(--call-color, #94a3b8); }
.call-forthcoming { --call-color: #d97706; }
.call-open { --call-color: #15803d; }
.call-closed { --call-color: #94a3b8; }
.call-status { font-weight: 600; white-space: nowrap; }
.call-status-forthcoming { background-color: #fef3c7; color: #92400e; }
.call-status-open { background-color: #dcfce7; color: #14532d; }
.call-status-closed { background-color: #e5e7eb; color: #374151; }
.call-icon-forthcoming { color: #d97706; }
.call-icon-open { color: #15803d; }
.call-icon-closed { color: #6b7280; }

/* Attached documents: file-type colours */
.doc-icon-pdf { color: #c62828; }
.doc-icon-word { color: #1e5bb8; }
.doc-icon-ppt { color: #c4501b; }

/* Institution homepages: resource availability, equipment status, cards */
.resource-available { background-color: #dcfce7; color: #14532d; }
.resource-reserved { background-color: #fef3c7; color: #92400e; }
.resource-maintenance { background-color: #e5e7eb; color: #374151; }
.equipment-operational { background-color: #dcfce7; color: #14532d; }
.equipment-maintenance { background-color: #fef3c7; color: #92400e; }
.equipment-out_of_service { background-color: #fee2e2; color: #991b1b; }
.institution-hero { border-top: 4px solid #01a5ae; }
.institution-facts dd { color: #14375d; }
.resource-item summary { cursor: pointer; list-style: none; }
.resource-item summary::-webkit-details-marker { display: none; }
.facility-card:hover { border-color: #01a5ae; }