/* ============================================================
   AI4GTech Partner Coordination Portal — design tokens
   Palette sampled from the AI4GTech Anatolia logo and aligned to the
   METU DTX brand tokens (ink #011F26, blue #0E7CC0, cyan #1FD3D9).
   Legacy variable names are kept as aliases so existing rules keep working.
   ============================================================ */
:root {
  /* brand */
  --ink: #011F26;
  --ink-deep: #001824;
  --navy: #062430;
  --navy-2: #0A3A48;
  --blue: #0E7CC0;
  --blue-deep: #00637F;
  --cyan: #1FD3D9;
  --green: #24B478;
  --red: #D81E27;
  --amber: #B26A00;

  /* neutrals */
  --muted: #37535C;
  --muted-2: #6A828C;
  --line: #D7E6EE;
  --line-strong: #9CC7D8;
  --soft: #EEF7FA;
  --card: #F7FBFD;
  --surface: #FFFFFF;
  --canvas: #F4F8FB;

  /* aliases kept for existing rules */
  --brand: #0E7CC0;
  --brand-dark: #062430;

  /* type */
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .9375rem;
  --fs-lg: 1.0625rem;

  /* space + shape */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(1, 31, 38, .06);
  --shadow: 0 2px 8px rgba(1, 31, 38, .07), 0 1px 2px rgba(1, 31, 38, .05);
  --shadow-lg: 0 18px 44px rgba(1, 31, 38, .13);
  --focus: 0 0 0 3px rgba(14, 124, 192, .35);
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.09acac7457bd.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.2c63e05091c7.ttf") format("truetype");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.92934d92f57e.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}

body {
  background: var(--soft);
  color: var(--ink);
}

.portal-nav {
  background: linear-gradient(90deg, #123071 0%, #1759b2 100%);
}

.portal-nav .nav-link {
  border-radius: 6px;
}

.portal-nav .nav-link.active,
.portal-nav .nav-link:focus,
.portal-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--brand);
}

.login-shell {
  min-height: calc(100vh - 4rem);
  display: grid;
  place-items: center;
}

.login-panel {
  width: min(100%, 480px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.08);
}

.eyebrow {
  color: var(--brand);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.metric-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.metric-card,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric-card {
  padding: 1rem;
}

.metric-card span {
  color: var(--muted);
  display: block;
  font-size: .85rem;
}

.metric-card strong {
  display: block;
  font-size: 1.85rem;
  line-height: 1.2;
  margin-top: .35rem;
}

.panel {
  overflow: hidden;
}

.panel-header {
  padding: 1rem 1rem 0;
}

.panel .table {
  margin-bottom: 0;
}

.filter-panel .form-control,
.filter-panel .form-select,
.filter-panel .btn {
  min-height: 2.5rem;
}

.list-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: space-between;
}

.pagination-strip {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.pagination-strip .pagination {
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
}

.pagination-strip .page-link {
  border-radius: 6px;
}

.pagination-strip .page-position {
  background: #fff;
  color: var(--muted);
  font-weight: 700;
  min-width: 7.5rem;
  text-align: center;
}

.progress-thin {
  height: .55rem;
  background-color: #e8eef9;
}

.warning-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: 1rem;
}

.warning-stack div {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: .85rem;
}

.warning-stack strong,
.warning-stack span {
  display: block;
}

.warning-stack span {
  color: #7c2d12;
  font-size: .85rem;
}

.table td,
.table th {
  vertical-align: middle;
}

.badge-soft {
  background: #eef4ff;
  color: #1849a9;
}

.status-pill,
.allocation-pill,
.upload-count {
  border-radius: 999px;
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  padding: .35rem .55rem;
  white-space: nowrap;
}

.status-muted {
  background: #f2f4f7;
  color: #475467;
}

.status-progress {
  background: #eef4ff;
  color: #1849a9;
}

.status-completed {
  background: #ecfdf3;
  color: #027a48;
}

.status-warning {
  background: #fffaeb;
  color: #b54708;
}

.status-danger {
  background: #fef3f2;
  color: #b42318;
}

.allocation-ok {
  background: #ecfdf3;
  color: #027a48;
}

.allocation-under {
  background: #fef3f2;
  color: #b42318;
}

.allocation-over {
  background: #eef4ff;
  color: #1849a9;
}

.allocation-info,
.upload-count {
  background: #f2f4f7;
  color: #475467;
}

.favorite-cell {
  width: 2.25rem;
}

.favorite-button {
  background: transparent;
  border: 0;
  color: #98a2b3;
  font-size: 1.15rem;
  line-height: 1;
  padding: .15rem;
}

.favorite-button.is-favorite {
  color: #d97706;
}

.quick-actions,
.allocation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.allocation-summary {
  padding: 1rem;
}

.allocation-summary div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 160px;
  padding: .75rem;
}

.allocation-summary span {
  color: var(--muted);
  display: block;
  font-size: .8rem;
}

.allocation-summary strong {
  display: block;
  margin-top: .2rem;
}

.distribution-table input {
  min-width: 130px;
}

.distribution-table .allocation-input {
  max-width: 170px;
}

.favorite-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.favorite-row > div {
  min-width: 0;
}

.form-help {
  color: var(--muted);
  font-size: .875rem;
}

.form-page-header {
  gap: .75rem;
  flex-wrap: wrap;
}

.form-page-header h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkbox-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .9rem 1rem;
}

.checkbox-fieldset legend {
  float: none;
  width: auto;
  margin: 0 0 .5rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
}

.checkbox-list > div {
  display: grid;
  gap: .45rem .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  min-width: 0;
  line-height: 1.35;
}

.checkbox-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: .15rem;
}

.timeline-toolbar .form-label {
  margin-bottom: .35rem;
}

.timeline-metrics .metric-card strong {
  font-size: 1.55rem;
}

.timeline-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
}

.timeline-panel,
.deadline-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.timeline-scroll {
  overflow-x: auto;
}

.timeline-chart {
  --timeline-label-width: 300px;
  width: 100%;
}

.timeline-row {
  display: grid;
  grid-template-columns: var(--timeline-label-width) minmax(0, 1fr);
}

.timeline-label-column {
  background: #fff;
  border-right: 1px solid var(--line);
  min-width: 0;
  padding: .7rem .85rem;
  position: sticky;
  left: 0;
  z-index: 4;
}

.timeline-label-column > span,
.timeline-label-column > strong {
  display: block;
  min-width: 0;
}

.timeline-header {
  border-bottom: 1px solid var(--line);
  min-height: 58px;
}

.timeline-header .timeline-label-column {
  align-content: center;
  background: #f8fafc;
}

.timeline-header .timeline-label-column span {
  color: var(--muted);
  font-size: .75rem;
}

.timeline-track {
  background-color: #fff;
  min-width: 0;
  position: relative;
}

.timeline-month-grid {
  border-right: 1px solid var(--line);
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.timeline-months {
  background: #f8fafc;
  display: flex;
}

.timeline-month {
  align-content: center;
  border-right: 1px solid var(--line);
  display: grid;
  flex: 0 0 auto;
  padding: .65rem .75rem;
}

.timeline-month:last-of-type {
  border-right: 0;
}

.timeline-month strong,
.timeline-month span {
  display: block;
}

.timeline-month span {
  color: var(--muted);
  font-size: .72rem;
}

.timeline-group {
  border-bottom: 1px solid var(--line);
  min-height: 48px;
}

.timeline-group .timeline-label-column,
.timeline-group .timeline-track {
  background-color: #f1f5f9;
}

.timeline-group .timeline-label-column {
  align-content: center;
}

.timeline-group .timeline-label-column span,
.timeline-group-description {
  color: var(--muted);
  font-size: .72rem;
}

.timeline-group .timeline-track {
  align-content: center;
  padding: .65rem .8rem;
}

.timeline-group-description {
  position: relative;
  z-index: 1;
}

.timeline-item-row {
  border-bottom: 1px solid #eef0f3;
  min-height: 70px;
}

.timeline-item-label {
  color: var(--ink);
  display: grid;
  align-content: center;
  text-decoration: none;
}

.timeline-item-label:hover {
  background: #f8fafc;
  color: var(--ink);
}

.timeline-item-label strong {
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-item-label > span:last-child {
  color: var(--muted);
  font-size: .72rem;
  margin-top: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-code {
  color: var(--brand);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .035em;
  margin-bottom: .12rem;
  text-transform: uppercase;
}

.timeline-bar {
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .08);
  height: 28px;
  min-width: 8px;
  overflow: hidden;
  position: absolute;
  top: 21px;
  z-index: 2;
}

.timeline-bar:hover {
  filter: brightness(.97);
}

.timeline-bar-progress {
  background: currentColor;
  bottom: 0;
  left: 0;
  opacity: .16;
  position: absolute;
  top: 0;
}

.timeline-bar-label {
  color: currentColor;
  display: block;
  font-size: .68rem;
  font-weight: 800;
  line-height: 28px;
  overflow: hidden;
  padding: 0 .55rem;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-milestone {
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .18), 0 2px 5px rgba(23, 32, 51, .16);
  height: 20px;
  margin-left: -10px;
  position: absolute;
  top: 25px;
  transform: rotate(45deg);
  transition: transform .15s ease;
  width: 20px;
  z-index: 3;
}

.timeline-milestone:hover {
  transform: rotate(45deg) scale(1.15);
}

.timeline-milestone.status-completed {
  background: #16a34a;
}

.timeline-milestone.status-warning {
  background: #d97706;
}

.timeline-milestone.status-danger {
  background: #dc2626;
}

.timeline-milestone.status-muted {
  background: #98a2b3;
}

.timeline-today {
  background: #e11d48;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 3;
}

.timeline-header .timeline-today span {
  background: #e11d48;
  border-radius: 999px;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  left: 50%;
  padding: .15rem .4rem;
  position: absolute;
  top: .25rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.timeline-navigation {
  align-items: center;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  padding: .7rem .85rem;
}

.timeline-navigation > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.timeline-empty {
  background: #fff;
}

.deadline-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.deadline-panel-header > span {
  background: #eef4ff;
  border-radius: 999px;
  color: #1849a9;
  font-size: .72rem;
  font-weight: 800;
  padding: .3rem .55rem;
}

.deadline-section {
  padding: 1rem;
}

.deadline-section + .deadline-section {
  border-top: 1px solid var(--line);
}

.deadline-section h3 {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: .65rem;
  text-transform: uppercase;
}

.deadline-item {
  align-items: center;
  border-radius: 7px;
  color: var(--ink);
  display: grid;
  gap: .7rem;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: .55rem;
  text-decoration: none;
}

.deadline-item + .deadline-item {
  margin-top: .25rem;
}

.deadline-item:hover {
  background: #f8fafc;
  color: var(--ink);
}

.deadline-item time {
  align-content: center;
  background: #eef4ff;
  border-radius: 7px;
  color: #1849a9;
  display: grid;
  height: 42px;
  text-align: center;
}

.deadline-item time strong,
.deadline-item time span {
  display: block;
  line-height: 1;
}

.deadline-item time span {
  font-size: .62rem;
  font-weight: 800;
  margin-top: .16rem;
  text-transform: uppercase;
}

.deadline-item.is-overdue time {
  background: #fef3f2;
  color: #b42318;
}

.deadline-copy,
.deadline-copy > span,
.deadline-copy > strong,
.deadline-copy > small {
  display: block;
  min-width: 0;
}

.deadline-copy > strong {
  font-size: .78rem;
}

.deadline-copy > span {
  font-size: .76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deadline-copy > small {
  color: var(--muted);
  font-size: .68rem;
  margin-top: .12rem;
}

@media (max-width: 700px) {
  .form-page-header {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .list-toolbar,
  .pagination-strip {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .favorite-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1100px) {
  .timeline-layout {
    grid-template-columns: 1fr;
  }

  .deadline-panel {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) 1fr 1fr;
  }

  .deadline-panel-header,
  .deadline-section + .deadline-section {
    border-left: 1px solid var(--line);
    border-top: 0;
  }
}

@media (max-width: 700px) {
  .timeline-chart {
    --timeline-label-width: 230px;
  }

  .timeline-label-column {
    padding-left: .65rem;
    padding-right: .65rem;
  }

  .deadline-panel {
    display: block;
  }

  .deadline-panel-header,
  .deadline-section + .deadline-section {
    border-left: 0;
  }

  .deadline-section + .deadline-section {
    border-top: 1px solid var(--line);
  }
}

/* ============================================================
   Brand layer — loaded last so it refines the rules above.
   Organised by UX concern: chrome, hierarchy, data density,
   status legibility, forms, feedback, motion, responsiveness.
   ============================================================ */

/* --- Foundations ------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
.h3 { font-size: 1.1875rem; }
.h5 { font-size: 1rem; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }

.text-muted { color: var(--muted) !important; }
.small, small { font-size: var(--fs-sm); }

/* Visible focus for every interactive element — keyboard users must never
   lose their place. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus, .form-select:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus);
  border-color: var(--blue);
}

/* Skip link: first tab stop on every page. */
.skip-link {
  position: absolute; left: var(--sp-3); top: -3rem;
  z-index: 1080;
  background: var(--surface); color: var(--ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-3); }

/* --- App chrome ------------------------------------------------------- */
.portal-nav {
  background: linear-gradient(100deg, var(--ink-deep) 0%, var(--navy) 55%, var(--navy-2) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow);
  padding-top: .5rem; padding-bottom: .5rem;
}

.brand-lockup { display: flex; align-items: center; gap: var(--sp-3); padding: 0; }
.brand-lockup img {
  display: block;
  height: 30px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}
.brand-lockup .brand-divider,
.brand-divider--lockup {
  width: 1px; height: 26px; background: rgba(255,255,255,.22);
  flex: 0 0 auto;
}
.brand-divider--lockup { margin: 0 var(--sp-3); }
/* The brand text is no longer inside the home link, so it needs its own styling. */
.portal-nav > .container-fluid > .brand-text {
  display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto;
}
.portal-nav > .container-fluid > .brand-text strong {
  color: #fff; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
}
.portal-nav > .container-fluid > .brand-text span {
  color: rgba(255,255,255,.62); font-size: var(--fs-xs);
}
.brand-lockup .brand-text {
  display: flex; flex-direction: column; line-height: 1.15;
}
.brand-lockup .brand-text strong {
  color: #fff; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
}
.brand-lockup .brand-text span {
  color: rgba(255,255,255,.62); font-size: var(--fs-xs);
}
.brand-lockup:hover .brand-text strong { color: var(--cyan); }

.portal-nav .nav-link {
  color: rgba(255,255,255,.82);
  border-radius: var(--radius-sm);
  padding: .4rem .7rem;
  font-size: var(--fs-md);
  transition: background .12s ease, color .12s ease;
}
.portal-nav .nav-link.active,
.portal-nav .nav-link:focus,
.portal-nav .nav-link:hover { background: rgba(255,255,255,.13); color: #fff; }
/* The active tab gets a second, non-colour cue. */
.portal-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--cyan); font-weight: 600; }

.nav-user { display: flex; align-items: center; gap: var(--sp-2); }
.nav-user .nav-identity { text-align: right; line-height: 1.2; }
.nav-user .nav-identity strong { display: block; color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.nav-user .nav-identity span { color: rgba(255,255,255,.6); font-size: var(--fs-xs); }

/* --- Partner logo strip ---------------------------------------------- */
.partner-strip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0; margin: 0; list-style: none;
  text-decoration: none;
}
.partner-chip {
  display: grid; place-items: center;
  height: 28px; min-width: 34px; padding: 0 6px;
  background: #fff; border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
  overflow: hidden;
}
.partner-chip img {
  max-height: 20px; max-width: 54px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.partner-chip .chip-mono {
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  color: var(--navy); white-space: nowrap;
}
.partner-chip--more {
  background: rgba(255,255,255,.14); box-shadow: none;
}
.partner-chip--more .chip-mono { color: #fff; }
.partner-strip-link { text-decoration: none; display: flex; align-items: center; gap: var(--sp-2); }
.partner-strip-link:hover .partner-chip { transform: translateY(-1px); }
.partner-chip { transition: transform .12s ease; }

.eu-emblem {
  display: block;
  height: 26px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

/* --- Page structure --------------------------------------------------- */
.page-head { margin-bottom: var(--sp-5); }
.page-head h1 { margin-bottom: .2rem; }
.page-head .lead-sub { color: var(--muted); font-size: var(--fs-md); margin: 0; }

.eyebrow {
  color: var(--blue-deep); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--surface), var(--card));
}
.panel-header h2, .panel-header h1 { margin: 0; }

/* --- Metric cards ----------------------------------------------------- */
.metric-grid { gap: var(--sp-4); }
.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  transition: box-shadow .15s ease, transform .15s ease;
}
.metric-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.metric-card span {
  color: var(--muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.metric-card strong {
  color: var(--ink); font-size: 1.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.metric-card--good { border-left-color: var(--green); }
.metric-card--warn { border-left-color: var(--amber); }
.metric-card--risk { border-left-color: var(--red); }

/* --- Tables: density, scannability, sticky headers -------------------- */
.panel .table { margin: 0; font-size: var(--fs-md); }
.table > :not(caption) > * > * { padding: .625rem var(--sp-4); }
.table th {
  background: var(--soft);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
/* Header stays visible while scanning long lists. */
.table-responsive { max-height: none; }
.panel .table thead th { position: sticky; top: 0; z-index: 2; }
.table tbody tr { border-color: var(--line); }
.table tbody tr:hover { background: var(--soft); }
.table td { vertical-align: middle; }
/* Numbers align on the decimal for comparison. */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Status: never colour alone -------------------------------------- */
.badge { font-weight: 600; font-size: var(--fs-xs); letter-spacing: .02em; padding: .34em .6em; border-radius: 5px; }
.badge-soft { background: var(--soft); color: var(--blue-deep); border: 1px solid var(--line-strong); }
.status-muted     { background: #EEF1F3; color: #4A5A61; }
.status-progress  { background: #E4F2FB; color: #0A5E8F; }
.status-completed { background: #E3F7EC; color: #10714A; }
.status-warning   { background: #FDF2E2; color: #8A5200; }
.status-danger    { background: #FDE9EA; color: #A5151C; }
.text-bg-success  { background: var(--green) !important; }
.text-bg-danger   { background: var(--red) !important; }
.text-bg-primary  { background: var(--blue) !important; }

/* --- Buttons ---------------------------------------------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-md); }
.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-primary:hover, .btn-primary:focus { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-outline-primary { color: var(--blue); border-color: var(--line-strong); }
.btn-outline-primary:hover { background: var(--blue); border-color: var(--blue); }
.btn-outline-secondary { color: var(--muted); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background: var(--soft); color: var(--ink); border-color: var(--line-strong); }
/* Comfortable hit targets on touch screens. */
@media (hover: none) { .btn, .nav-link, .dropdown-item { min-height: 42px; display: inline-flex; align-items: center; } }

/* --- Forms ------------------------------------------------------------ */
.form-label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); margin-bottom: .3rem; }
.form-control, .form-select {
  border-color: var(--line-strong); border-radius: var(--radius-sm);
  font-size: var(--fs-md); padding: .45rem .7rem;
}
.form-text, .form-help { color: var(--muted); font-size: var(--fs-sm); }
.filter-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.invalid-feedback, .errorlist { color: var(--red); font-size: var(--fs-sm); }

/* --- Feedback --------------------------------------------------------- */
.alert { border-radius: var(--radius); border-width: 0; border-left-width: 3px; font-size: var(--fs-md); }
.alert-success { background: #E9F8F0; border-left-color: var(--green); color: #0E5C3D; }
.alert-info    { background: var(--soft); border-left-color: var(--blue); color: var(--blue-deep); }
.alert-warning { background: #FDF5E7; border-left-color: var(--amber); color: #7A4A00; }
.alert-danger  { background: #FDEBEC; border-left-color: var(--red); color: #96131A; }

/* Empty states: say what to do next, not just "nothing here". */
.empty-state { padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--muted); }
.empty-state .empty-icon {
  width: 42px; height: 42px; margin: 0 auto var(--sp-3);
  border-radius: 50%; background: var(--soft);
  display: grid; place-items: center; color: var(--blue); font-size: 1.2rem;
}
.empty-state strong { display: block; color: var(--ink); margin-bottom: .25rem; }

/* --- Required-proof checklist ---------------------------------------- */
.proof-progress {
  height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden;
}
.proof-progress > span { display: block; height: 100%; background: var(--green); }

/* --- Footer ----------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: var(--sp-6);
  padding: var(--sp-5) 0 var(--sp-6);
}
.footer-partners {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: center;
  padding: 0; margin: 0 0 var(--sp-5); list-style: none;
}
.footer-partners li {
  display: grid; place-items: center;
  height: 62px; min-width: 104px; padding: var(--sp-2) var(--sp-3);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  /* Muted enough to sit behind the content, legible enough to identify. */
  filter: grayscale(.15); opacity: .95;
  transition: filter .15s ease, opacity .15s ease;
}
.footer-partners li:hover { filter: none; opacity: 1; }
.footer-partners img {
  display: block;
  height: auto;
  max-height: 30px;
  max-width: 96px;
  object-fit: contain;
  width: auto;
}
.footer-partners .chip-mono { font-size: var(--fs-xs); font-weight: 700; color: var(--navy); }
.footer-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--fs-sm); text-align: center;
}
/* Grow into whatever width the row has instead of holding a narrow measure:
   at 62ch the disclaimer stacked into six cramped lines on a desktop screen.
   Capped at 120ch so it still reads as a paragraph on an ultra-wide display. */
.footer-funding { flex: 1 1 46ch; max-width: 160ch; }
.site-footer .eu-emblem { height: 34px; }

/* --- Login ------------------------------------------------------------ */
.login-shell {
  min-height: 100vh; display: grid;
  grid-template-columns: 1.05fr .95fr;
  place-items: stretch;
}
.login-aside {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--ink-deep) 0%, var(--navy) 60%, var(--navy-2) 100%);
  color: #fff;
  padding: var(--sp-6) clamp(2rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5);
}
.login-aside .motif {
  position: absolute; inset: auto -12% -22% auto; width: 78%; opacity: .18;
  pointer-events: none;
}
.login-aside img.login-logo {
  /* A column flex item with an automatic cross-size stretches by default.
     Opt out so the fixed height is resolved from the artwork's own ratio. */
  align-self: flex-start;
  display: block;
  flex: 0 0 auto;
  height: 58px;
  max-width: 100%;
  object-fit: contain;
  position: relative;
  width: auto;
}
.login-panel .eu-emblem { height: 30px; }
.login-aside h1 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); position: relative; }
.login-aside p { color: rgba(255,255,255,.78); max-width: 46ch; position: relative; }
.login-aside .login-facts { display: flex; flex-wrap: wrap; gap: var(--sp-5); position: relative; }
.login-aside .login-facts div strong { display: block; font-size: 1.35rem; color: var(--cyan); }
.login-aside .login-facts div span { font-size: var(--fs-xs); color: rgba(255,255,255,.68); text-transform: uppercase; letter-spacing: .08em; }
.login-main {
  display: grid; place-items: center; padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
}
.login-panel {
  width: min(100%, 420px);
  background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; min-height: auto; }
  .login-aside { padding: var(--sp-6) var(--sp-5); }
  .login-aside .login-facts { display: none; }
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 991px) {
  .nav-user { width: 100%; justify-content: space-between; padding-top: var(--sp-3); }
  .brand-lockup .brand-text { display: none; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Print: drop the chrome, keep the data. */
@media print {
  .portal-nav, .site-footer, .filter-panel, .btn, .pagination-strip { display: none !important; }
  .panel { border: 1px solid #999; box-shadow: none; }
  body { background: #fff; }
}

/* --- App bar fit: many nav items + partner strip + identity ------------
   The bar must never wrap or clip. Links stay on one line, the identity
   truncates rather than pushing the logout button off-screen, and the
   partner strip drops out before anything functional does. */
.portal-nav .container-fluid { flex-wrap: nowrap; gap: var(--sp-3); }
.portal-nav .navbar-collapse { min-width: 0; }
.portal-nav .navbar-nav { flex-wrap: nowrap; }
.portal-nav .nav-link { white-space: nowrap; padding: .35rem .55rem; font-size: var(--fs-sm); }
.brand-lockup { flex: 0 0 auto; }
.brand-lockup img { height: 26px; }

.nav-user { flex: 0 0 auto; min-width: 0; }
.nav-user .nav-identity { min-width: 0; max-width: 12ch; }
.nav-user .nav-identity strong,
.nav-user .nav-identity span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-user .btn { white-space: nowrap; }

.partner-chip { height: 24px; min-width: 30px; }
.partner-chip img { max-height: 17px; max-width: 46px; }
.partner-chip .chip-mono { font-size: 9.5px; letter-spacing: 0; }

/* Partner logos are decoration: they yield space before navigation does.
   The strip hides as a whole so the "+N" counter never lies. */
@media (max-width: 1499px) { .partner-strip-link { display: none; } }

/* --- Zero states are not warnings ------------------------------------- */
.warning-stack div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.warning-stack div strong { color: var(--muted-2); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.warning-stack div span { color: var(--muted); font-size: var(--fs-sm); }
.warning-stack div.is-warning {
  background: #FDF5E7; border-color: #F0D9A8;
}
.warning-stack div.is-warning strong { color: #8A5200; }
.warning-stack div.is-warning span { color: #7A4A00; }

/* --- Numeric columns compare only when they line up ------------------- */
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.nowrap, .data-table th.nowrap { white-space: nowrap; }

/* --- Workspace preview ("View as") ----------------------------------- */
.view-as-picker .dropdown-toggle { white-space: nowrap; }
.view-as-menu {
  min-width: 16rem; max-height: 60vh; overflow-y: auto;
  padding: var(--sp-2); border-color: var(--line); box-shadow: var(--shadow-lg);
}
.view-as-menu .dropdown-header {
  font-size: var(--fs-xs); color: var(--muted); white-space: normal;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.view-as-menu form { margin: 0; }
.view-as-menu .dropdown-item {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center;
  gap: var(--sp-2); border-radius: var(--radius-sm); padding: .4rem .5rem;
}
.view-as-menu .dropdown-item img {
  max-height: 22px; max-width: 46px; object-fit: contain;
}
.view-as-mono {
  display: grid; place-items: center; height: 22px;
  background: var(--soft); border-radius: 4px;
  font-size: 9px; font-weight: 700; color: var(--navy);
}
.view-as-name { font-weight: 600; }
.view-as-role { font-size: var(--fs-xs); color: var(--muted); }
.view-as-exit .btn { white-space: nowrap; font-weight: 600; }

/* The banner must be impossible to miss: acting on the wrong scope by mistake
   is the whole risk of this feature. */
.preview-banner {
  background: repeating-linear-gradient(
    135deg, #FFE9A8 0 14px, #FFE18A 14px 28px);
  border-bottom: 2px solid #B26A00;
  color: #5C3800; font-size: var(--fs-md);
  padding: var(--sp-3) 0;
}
.preview-badge {
  background: #5C3800; color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 4px;
}

/* --- Role reference --------------------------------------------------- */
.role-reference { display: grid; gap: var(--sp-2); }
.role-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
}
.role-card > summary {
  cursor: pointer; padding: var(--sp-3);
  display: grid; gap: .15rem;
}
.role-card > summary strong { color: var(--ink); }
.role-card > summary span { color: var(--muted); font-size: var(--fs-sm); }
.role-card[open] > summary { border-bottom: 1px solid var(--line); }
.role-card-body { padding: var(--sp-3); }
.role-card-body ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); }
.role-card-body ul + ul { margin-top: var(--sp-2); }
.role-can li { color: var(--ink); }
.role-can li::marker { color: var(--green); content: "✓  "; }
.role-cannot li { color: var(--muted); }
.role-cannot li::marker { color: var(--red); content: "✕  "; }

/* --- Header: brand, EU emblem, institution lockup --------------------- */
/* The project mark is the primary identity, so it carries more weight than
   anything else in the bar. */
.brand-lockup img { height: 38px; }
@media (max-width: 991px) { .brand-lockup img { height: 30px; } }

/* The funder mark sits beside the project mark in the brand zone. Flat, no
   shadow, no hover — it reads as part of the masthead rather than a chip. The
   light panel is required for legibility, not decoration: the emblem's wordmark
   is dark navy on transparent. */
.nav-eu {
  display: grid; place-items: center;
  height: 30px; padding: 3px 9px;
  background: #fff; border-radius: 4px;
  flex: 0 0 auto;
  margin-left: var(--sp-1);
}
.nav-eu img { height: 22px; width: auto; display: block; }

.nav-workspace {
  display: grid; place-items: center;
  height: 30px; min-width: 38px; padding: 0 5px;
  background: #fff; border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
  flex: 0 0 auto; overflow: hidden;
}
.nav-workspace img { max-height: 21px; max-width: 62px; object-fit: contain; display: block; }
.nav-workspace-mono {
  font-size: 10px; font-weight: 700; color: var(--navy); white-space: nowrap;
}

/* Below wide screens the bar cannot hold everything. The institution chip goes
   first, at a wider breakpoint than the emblem, so the emblem is never the one
   that disappears while a beneficiary logo remains — Article 17.2. Both are
   always present in the footer regardless. */
@media (max-width: 1500px) { .nav-workspace { display: none; } }
@media (max-width: 1199px) { .nav-eu { display: none; } }

/* Between the Bootstrap collapse point and wide screens the bar still has to
   hold eight nav items. Shed the least useful pixels first: the role line under
   the user's name, then some link padding. Navigation itself never yields. */
@media (max-width: 1400px) {
  .portal-nav .nav-link { padding: .35rem .45rem; }
  .nav-user .nav-identity span { display: none; }
  .nav-user .nav-identity { max-width: 10ch; }
}
@media (max-width: 1300px) {
  .portal-nav > .container-fluid > .brand-text,
  .brand-divider--lockup { display: none; }
}

/* --- Sortable column headers ------------------------------------------ */
.sort-link {
  display: inline-flex; align-items: center; gap: .3rem;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.sort-link:hover { color: var(--blue-deep); }
.sort-arrow { font-size: .75em; opacity: .35; }
.sort-link:hover .sort-arrow { opacity: .7; }
.table th.is-sorted { background: var(--soft); color: var(--blue-deep); }
.table th.is-sorted .sort-arrow { opacity: 1; color: var(--blue); }

/* --- Overdue is the thing this portal exists to surface ---------------- */
/* Colour alone is never the signal: the row carries a left rule, the date
   turns red and bold, and a badge states how late in words. */
.data-table tbody tr.is-overdue,
.table tbody tr.is-overdue { background: #FDF3F3; }
.table tbody tr.is-overdue:hover { background: #FBE9E9; }
.table tbody tr.is-overdue > td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}
.due-overdue { color: #A5151C; font-weight: 700; display: block; }
.overdue-badge {
  display: inline-block; margin-top: .15rem;
  background: #FDE9EA; color: #A5151C;
  border: 1px solid #F4C7CA; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 700; padding: .05rem .3rem;
  white-space: nowrap;
}
/* Agenda rows and metric cards use the same red so overdue reads the same
   everywhere. */
.metric-card--overdue { border-left-color: var(--red); }
.metric-card--overdue strong { color: #A5151C; }

/* --- Consortium footer: all sixteen partners on one row --------------- */
/* At 1920 the sixteenth chip wrapped. Above 1600px the row stops wrapping and
   the chips share the width instead, so the consortium reads as one line. */
@media (min-width: 1600px) {
  .footer-partners {
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }
  .footer-partners li {
    flex: 1 1 0; min-width: 0; padding: var(--sp-2) var(--sp-1);
  }
  .footer-partners img { max-width: 100%; max-height: 38px; }
}

/* An overdue panel is an alarm, so it is allowed to look like one. */
.panel--overdue { border-top: 3px solid var(--red); }
.panel--overdue .panel-header h2 { color: #A5151C; }

.overdue-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #F3C9CB;
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  background: #FDF3F3;
  color: #7A1015;
}