/* ---------------------------------------------------------------------------
   NSD signed-in portal (1 Oct 2026). Loaded by Site.Master on every page and
   scoped to body.nsd-app, so the public pages and the staff/admin consoles
   are not affected. Layout and colour only: no markup or text changes.
   PASTIC green leads; orange, teal, purple, pink and sky are accents, the
   same palette as the home page charts.
   --------------------------------------------------------------------------- */
body.nsd-app {
    --pt-green: #028742; --pt-green-dark: #025f30; --pt-lime: #22c55e;
    --pt-orange: #fb8c3a; --pt-teal: #14b8a6; --pt-purple: #8b5cf6;
    --pt-pink: #ec4899; --pt-sky: #0ea5e9; --pt-amber: #f59e0b;
    --pt-track: repeating-linear-gradient(135deg, #eef2f0 0 6px, #f8faf9 6px 12px);
    --pt-rainbow: linear-gradient(90deg, #028742 0 33%, #fb8c3a 33% 66%, #14b8a6 66% 100%);
}

/* 1. Sidebar ---------------------------------------------------------------- */
.nsd-app .side-nav {
    background: linear-gradient(180deg, #025f30 0%, #028742 48%, #0b8a5a 100%);
    padding-top: 22px; }

.nsd-app .sidebar-user-card { border-bottom-color: rgba(255,255,255,.18); }
.nsd-app .sidebar-user-card .user-avatar { background: #fff; color: var(--pt-green-dark); border-color: rgba(255,255,255,.6); }
.nsd-app .suc-bar { background: rgba(255,255,255,.18); height: 8px; border-radius: 999px; }
.nsd-app .suc-bar-fill { background: linear-gradient(90deg, #fb8c3a, #fbbf24 55%, #a3e635); border-radius: 999px; }

.nsd-app .side-nav a,
.nsd-app .side-nav .nav-link {
    --ic: var(--pt-green);
    align-items: center; border-left: 0; border-radius: 12px; display: flex; gap: 10px;
    margin: 0 0 4px; padding: 7px 10px; }
.nsd-app .side-nav a[data-step] { padding-right: 36px; }

/* Each item gets its own colour: a white tile with a coloured icon. */
.nsd-app .side-nav a i {
    align-items: center; background: #fff; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,40,20,.18);
    color: var(--ic); display: inline-flex; flex: 0 0 30px; font-size: .85rem; height: 30px;
    justify-content: center; margin: 0; width: 30px; }
.nsd-app .side-nav a:hover i { color: var(--ic); }
.nsd-app .side-nav a[href*="scientist-dashboard"]          { --ic: #16a34a; }
.nsd-app .side-nav a[href*="scientist-my-profile"]         { --ic: #0d9488; }
.nsd-app .side-nav a[href*="scientists-analytics"]         { --ic: #7c3aed; }
.nsd-app .side-nav a[href*="scientist-basic-profile"]      { --ic: #0284c7; }
.nsd-app .side-nav a[href*="scientist-contact-information"]{ --ic: #ea580c; }
.nsd-app .side-nav a[href*="scientist-profile-ids"]        { --ic: #db2777; }
.nsd-app .side-nav a[href*="scientist-publications"]       { --ic: #16a34a; }
.nsd-app .side-nav a[href*="scientist-patents"]            { --ic: #d97706; }
.nsd-app .side-nav a[href*="scientist-books-chapters"]     { --ic: #7c3aed; }
.nsd-app .side-nav a[href*="scientist-projects"]           { --ic: #0d9488; }
.nsd-app .side-nav a[href*="declaration"]                  { --ic: #0284c7; }
.nsd-app .side-nav a[href*="scientist-profile-pic"]        { --ic: #db2777; }
.nsd-app .side-nav a[href*="scientist-cv-upload"]          { --ic: #ea580c; }
.nsd-app .side-nav a[href*="scientist-certificate"]        { --ic: #d97706; }
.nsd-app .side-nav a[href*="scientist-profile-help"]       { --ic: #475569; }

.nsd-app .side-nav a:hover,
.nsd-app .side-nav a:focus { background: rgba(255,255,255,.12); }

/* Current page: white pill, the tile takes the item colour. */
.nsd-app .side-nav a.active,
.nsd-app .side-nav a[aria-current="page"] {
    background: #fff; box-shadow: 0 8px 18px rgba(0,40,20,.22); color: var(--pt-green-dark); }
.nsd-app .side-nav a.active i,
.nsd-app .side-nav a[aria-current="page"] i { background: var(--ic); box-shadow: none; color: #fff; }
.nsd-app .side-nav a.active[data-step].is-done::after { background: var(--pt-lime); border-color: var(--pt-lime); color: #fff; }
.nsd-app .side-nav a.active[data-step].is-todo::after { border-color: var(--pt-green); color: var(--pt-green-dark); }
.nsd-app .side-nav a[data-step].is-done::after { background: #bbf7d0; border-color: #bbf7d0; color: var(--pt-green-dark); }

/* 2. Page headings and breadcrumb ------------------------------------------- */
.nsd-app .breadcrumb { border-bottom-style: dashed; }

/* The page sheet loses its frame: no boxes, just the content on white. */
.nsd-app .form-layout { border: 0; box-shadow: none; padding: 6px 0 10px; }
.nsd-app .form-layout > h3:first-child,
.nsd-app .form-layout > h2:first-child {
    border-bottom: 0; font-size: 1.55rem; padding-bottom: 0; position: relative; }
.nsd-app .form-layout > h3:first-child::after,
.nsd-app .form-layout > h2:first-child::after {
    background: var(--pt-rainbow); border-radius: 3px; content: ""; display: block; height: 4px; margin-top: 10px; width: 64px; }

/* Section titles: a coloured marker that changes from section to section. */
.nsd-app .nsd-section { --sc: var(--pt-green); }
.nsd-app .nsd-section:nth-of-type(4n+2) { --sc: var(--pt-orange); }
.nsd-app .nsd-section:nth-of-type(4n+3) { --sc: var(--pt-teal); }
.nsd-app .nsd-section:nth-of-type(4n)   { --sc: var(--pt-purple); }
.nsd-app .nsd-section + .nsd-section { border-top: 1px dashed #dfe8e3; }
.nsd-app .nsd-section > legend,
.nsd-app .nsd-section-title { align-items: center; color: #1f2d27; display: flex; gap: 10px; }
.nsd-app .nsd-section > legend::before,
.nsd-app .nsd-section-title::before {
    background: var(--sc); border-radius: 4px; content: ""; flex: 0 0 6px; height: 22px; width: 6px; }

.nsd-app h4.green-text { align-items: center; color: #1f2d27; display: flex; gap: 10px; }
.nsd-app h4.green-text::before { background: var(--pt-green); border-radius: 4px; content: ""; height: 20px; width: 6px; }
.nsd-app h4.green-text ~ h4.green-text::before { background: var(--pt-orange); }

/* 3. Fields and buttons ------------------------------------------------------ */
.nsd-app .form-control,
.nsd-app input[type="text"], .nsd-app input[type="email"], .nsd-app input[type="password"],
.nsd-app input[type="tel"], .nsd-app input[type="url"], .nsd-app input[type="number"],
.nsd-app input[type="date"], .nsd-app select, .nsd-app textarea,
.nsd-app .select2-container .select2-selection {
    background-color: #fbfdfc; border-color: #d6e2db; border-radius: 10px; }
.nsd-app .form-control:focus, .nsd-app input:focus, .nsd-app select:focus, .nsd-app textarea:focus,
.nsd-app .select2-container--focus .select2-selection,
.nsd-app .select2-container--open .select2-selection {
    background-color: #fff; border-color: var(--pt-green) !important; box-shadow: 0 0 0 4px rgba(2,135,66,.14) !important; outline: none; }
.nsd-app input[readonly], .nsd-app .form-control[readonly] { background: #f1f5f3; color: #44524b; }

.nsd-app .form-actions { border-top: 1px dashed #dfe8e3; }
.nsd-app .btn, .nsd-app .btn-primary, .nsd-app .btn-green, .nsd-app .btn-success,
.nsd-app input[type="submit"], .nsd-app .main-content button:not(.btn-secondary):not(.btn-link) {
    background: linear-gradient(90deg, #028742, #16a34a); border: 0; border-radius: 999px;
    box-shadow: 0 6px 14px rgba(2,135,66,.22); padding-left: 24px; padding-right: 24px; }
.nsd-app .btn:hover, .nsd-app .btn-primary:hover, .nsd-app .btn-green:hover, .nsd-app .btn-success:hover,
.nsd-app input[type="submit"]:hover, .nsd-app .main-content button:not(.btn-secondary):not(.btn-link):hover {
    background: linear-gradient(90deg, #025f30, #028742); }
.nsd-app .btn-secondary, .nsd-app a.btn-secondary, .nsd-app .btn-outline {
    background: #fff; border: 1.5px solid var(--pt-green); border-radius: 999px; box-shadow: none; color: var(--pt-green); }
.nsd-app .btn-link, .nsd-app a.btn-link { background: none; box-shadow: none; }
.nsd-app .btn-primary:disabled, .nsd-app .btn:disabled, .nsd-app input[type="submit"]:disabled {
    background: #cfd8d3; box-shadow: none; }

/* 4. Profile completeness bar (every page) ---------------------------------- */
.nsd-app #profileCompletenessContainer { background: none; border: 0; box-shadow: none; padding: 0; }
.nsd-app .progress-container {
    background: var(--pt-track); border: 0; border-radius: 999px; height: 14px; }
.nsd-app .progress-bar {
    background: linear-gradient(90deg, #028742, #22c55e 65%, #14b8a6); border-radius: 999px; }
.nsd-app .progress-text { color: #1f2d27; }

/* Notes and messages: a coloured side line, not a box. */
.nsd-app .form-notes, .nsd-app .section-note, .nsd-app .nsd-section-note {
    background: none; border: 0; border-left: 4px solid var(--pt-teal); border-radius: 0; padding: 4px 0 4px 14px; }

/* 5. Dashboard --------------------------------------------------------------- */
.nsd-app .profile-header .profile-picture { border: 4px solid #fff; box-shadow: 0 0 0 3px var(--pt-green), 0 10px 22px rgba(0,40,20,.15); }
.nsd-app .profile-position { color: var(--pt-green); }

/* Research output figures: each gets its own colour and icon. */
.nsd-app .output-summary > div { --oc: var(--pt-green); border-left: 0; padding-left: 0; position: relative; }
.nsd-app .output-summary > div:nth-child(2) { --oc: var(--pt-orange); }
.nsd-app .output-summary > div:nth-child(3) { --oc: var(--pt-teal); }
.nsd-app .output-summary > div:nth-child(4) { --oc: var(--pt-purple); }
.nsd-app .output-summary > div::before {
    align-items: center; background: color-mix(in srgb, var(--oc) 14%, #fff); border-radius: 12px; color: var(--oc);
    display: inline-flex; float: left; font: 900 1.05rem "Font Awesome 6 Free", "Font Awesome 5 Free";
    height: 44px; justify-content: center; margin: 2px 12px 0 0; width: 44px; }
.nsd-app .output-summary > div:nth-child(1)::before { content: "\f02d"; }
.nsd-app .output-summary > div:nth-child(2)::before { content: "\f0eb"; }
.nsd-app .output-summary > div:nth-child(3)::before { content: "\f518"; }
.nsd-app .output-summary > div:nth-child(4)::before { content: "\f542"; }
.nsd-app .output-summary strong { color: var(--oc); }

/* Share of output: a single coloured line built by the dashboard script. */
.nsd-app .pt-split { display: flex; gap: 4px; height: 10px; margin: 4px 0 22px; }
.nsd-app .pt-split span { border-radius: 999px; min-width: 6px; }

.nsd-app .output-block { --bc: var(--pt-green); }
.nsd-app .output-block:nth-of-type(2) { --bc: var(--pt-orange); }
.nsd-app .output-block:nth-of-type(3) { --bc: var(--pt-teal); }
.nsd-app .output-block:nth-of-type(4) { --bc: var(--pt-purple); }
.nsd-app .output-block h2 { border-bottom: 0; position: relative; }
.nsd-app .output-block h2::after {
    background: linear-gradient(90deg, var(--bc) 0 64px, #e6eee9 64px); border-radius: 3px; bottom: -2px; content: "";
    height: 3px; left: 0; position: absolute; right: 0; }
.nsd-app .output-table thead th { color: #5c6870; }

/* In-cell bars (added by the dashboard script). International and national
   keep the same colour in every table. */
.nsd-app .output-table td .pt-cell { align-items: center; display: inline-flex; gap: 10px; justify-content: flex-end; width: 100%; }
.nsd-app .output-table td .pt-track { background: var(--pt-track); border-radius: 999px; flex: 0 1 90px; height: 10px; overflow: hidden; }
.nsd-app .output-table td .pt-track i { background: var(--pc); border-radius: 999px; display: block; height: 100%; width: var(--w);
    transition: width .9s cubic-bezier(.2,.7,.2,1); }
.nsd-app .output-table.will-grow td .pt-track i { width: 0; }
.nsd-app .output-table.will-grow.is-in td .pt-track i { width: var(--w); }
.nsd-app .output-table td .pt-num { min-width: 22px; text-align: right; }
.nsd-app .output-table th.pt-intl::before,
.nsd-app .output-table th.pt-natl::before {
    border-radius: 50%; content: ""; display: inline-block; height: 8px; margin-right: 6px; vertical-align: 1px; width: 8px; }
.nsd-app .output-table th.pt-intl::before { background: var(--pt-sky); }
.nsd-app .output-table th.pt-natl::before { background: var(--pt-green); }

/* Finish your profile: coloured ticks and a ten-part line. */
.nsd-app .rail-group h3 { align-items: center; display: flex; gap: 8px; }
.nsd-app .rail-group h3::before { background: var(--pt-green); border-radius: 50%; content: ""; height: 8px; width: 8px; }
.nsd-app .rail-group:nth-of-type(2) h3::before { background: var(--pt-orange); }
.nsd-app .rail-group:nth-of-type(3) h3::before { background: var(--pt-teal); }
.nsd-app .rail-group:nth-of-type(4) h3::before { background: var(--pt-purple); }
.nsd-app .rail-group:nth-of-type(5) h3::before { background: var(--pt-pink); }
.nsd-app .pt-steps { display: grid; gap: 3px; grid-template-columns: repeat(10, 1fr); margin: 2px 0 10px; }
.nsd-app .pt-steps span { background: #e6eee9; border-radius: 999px; height: 8px; }
.nsd-app .pt-steps span.on { background: var(--pt-green); }
.nsd-app .pt-steps span.on:nth-child(3n+2) { background: var(--pt-teal); }
.nsd-app .pt-steps span.on:nth-child(3n) { background: var(--pt-lime); }
.nsd-app .dashboard-step-list .is-complete .dashboard-step-marker { background: var(--pt-lime); border-color: var(--pt-lime); }
.nsd-app .dashboard-step-list .is-pending .dashboard-step-marker { border: 1.5px dashed var(--pt-orange); color: #c2560f; }
.nsd-app .dashboard-ready { background: none; border-left: 4px solid var(--pt-lime); }

/* 6. Certificate steps -------------------------------------------------------- */
.nsd-app .cert-progress { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.nsd-app .cert-steps { border: 0; box-shadow: none; }
.nsd-app .cert-step { border-bottom: 1px dashed #dfe8e3; }
.nsd-app .cert-step.is-current { background: none; }
.nsd-app .cert-step.is-done .cert-step-num { background: var(--pt-lime); border-color: var(--pt-lime); color: #fff; }
.nsd-app .cert-step.is-current .cert-step-state { color: #c2560f; }
.nsd-app .cert-step.is-current .cert-step-num { background: var(--pt-orange); border-color: var(--pt-orange); color: #fff; box-shadow: 0 0 0 5px rgba(251,140,58,.18); }

/* 7. Tables ------------------------------------------------------------------- */
.nsd-app .pub-table.pub-header { background: none; border-bottom: 2px solid #e6eee9; color: #5c6870; }
.nsd-app .pub-num {
    align-items: center; background: color-mix(in srgb, var(--pt-green) 12%, #fff); border-radius: 50%; color: var(--pt-green-dark);
    display: inline-flex; font-weight: 800; height: 28px; justify-content: center; padding: 0; width: 28px; }
.nsd-app .pub-row:nth-of-type(5n+3) .pub-num { background: #fff1e6; color: #c2560f; }
.nsd-app .pub-row:nth-of-type(5n+4) .pub-num { background: #e0f7f4; color: #0f766e; }
.nsd-app .pub-row:nth-of-type(5n+5) .pub-num { background: #f1ebff; color: #6d28d9; }
.nsd-app .pub-row:nth-of-type(5n+1) .pub-num { background: #fde7f3; color: #be185d; }

@media (max-width: 760px) {
    .nsd-app .output-summary > div::before { height: 36px; width: 36px; }
    .nsd-app .output-table td .pt-track { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nsd-app .output-table td .pt-track i { transition: none; }
}

/* 8. Directory statistics -------------------------------------------------- */
.nsd-app .chart-frame { background: none; border: 0; box-shadow: none; padding: 6px 0 0; }
.nsd-app .chart-frame .chart { max-width: 860px; }
.nsd-app .chart-pair { grid-template-columns: 1fr; }
.nsd-app .chart-block h2 { border-bottom: 0; position: relative; }
.nsd-app .chart-block h2::after {
    background: linear-gradient(90deg, var(--pt-green) 0 64px, #e6eee9 64px); border-radius: 3px; content: "";
    display: block; height: 3px; margin-top: 8px; }
.nsd-app .chart-block:nth-of-type(3n+2) h2::after { background: linear-gradient(90deg, var(--pt-orange) 0 64px, #e6eee9 64px); }
.nsd-app .chart-block:nth-of-type(3n) h2::after { background: linear-gradient(90deg, var(--pt-teal) 0 64px, #e6eee9 64px); }
.nsd-app .stat-note { background: none; border: 0; border-left: 4px solid var(--pt-orange); border-radius: 0; padding: 4px 0 4px 14px; }
.nsd-app a.btn-secondary, .nsd-app a.btn-primary {
    align-items: center; display: inline-flex; justify-content: center; min-height: 40px; padding: 8px 22px; text-decoration: none; }