/* Design tokens from docs/mockup/demo-platforma-brr-v11.html — the mockup is the
   visual reference; keep these in sync with it, not with Bootstrap defaults. */
:root {
  --green: #1F5C4D;
  --green-d: #144237;
  --green-l: #E8F1EE;
  --ink: #17262B;
  --grey: #5A6B72;
  --line: #DDE5E2;
  --paper: #F6F8F7;
  --white: #FFFFFF;
  --amber: #B97C1F;
  --amber-l: #FBF3E4;
  --blue: #2E5E8C;
  --blue-l: #E8EFF6;
  --red: #A63D2F;
  --red-l: #F8ECEA;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(23, 38, 43, .08), 0 4px 14px rgba(23, 38, 43, .06);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--green);
}

a:hover {
  color: var(--green-d);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 3px solid var(--green);
  padding: 12px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 2px rgba(23, 38, 43, .05);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.crest {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.brand-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.brand-sub {
  display: block;
  font-size: 12.5px;
  color: var(--grey);
}

/* Shell: sticky sidebar navigation on the left, content + footer on the right.
   The aside stretches to the full column height (white background reaches the
   footer); only .sidebar-inner is sticky under the 71px header. */
.shell {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--ink);
  border-right: 1px solid rgba(255, 255, 255, .06);
  transition: width .16s ease;
}

/* Sidebar header row holding the collapse (hamburger) toggle. */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.sidebar-inner {
  position: sticky;
  top: 71px;
  max-height: calc(100vh - 71px);
  overflow-y: auto;
  padding: 18px 12px 24px;
}

.shell-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shell-main .wrap {
  flex: 1 1 auto;
  width: 100%;
}

.sgroup + .sgroup {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.sgroup-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  padding: 0 10px;
  margin-bottom: 6px;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 14px;
  transition: background .12s, color .12s;
}

.sidebar a + a {
  margin-top: 2px;
}

.sidebar a .ico {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 15px;
}

.sidebar a:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.sidebar a.active {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}

/* Icons a touch brighter than the label so the rail reads at a glance. */
.sidebar a .ico {
  opacity: .9;
}

.sidebar a.active .ico,
.sidebar a:hover .ico {
  opacity: 1;
}

/* Menu label sits left; a count badge (if any) is pushed to the right edge. */
.sidebar a > span:not(.ico):not(.nav-badge) {
  flex: 1 1 auto;
}

/* Sidebar count badges (e.g. open calls, institutions awaiting verification). */
.nav-badge {
  flex-shrink: 0;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: var(--green);
  color: #fff;
}

.nav-badge.warn {
  background: var(--amber);
  color: #fff;
}

/* On the active (green) row the badge inverts so it stays readable. */
.sidebar a.active .nav-badge {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Collapsed (icon-only) rail — desktop only; the mobile bar keeps its own layout. */
@media (min-width: 901px) {
  html.sidebar-collapsed .sidebar {
    width: 74px;
  }

  html.sidebar-collapsed .sidebar-inner {
    /* Let the hover flyout labels escape the rail instead of being clipped. */
    overflow: visible;
  }

  html.sidebar-collapsed .sidebar-head {
    justify-content: center;
    padding-right: 6px;
  }

  html.sidebar-collapsed .sgroup-title {
    display: none;
  }

  html.sidebar-collapsed .sgroup + .sgroup {
    margin-top: 8px;
    padding-top: 8px;
  }

  html.sidebar-collapsed .sidebar a {
    justify-content: center;
    padding: 10px 8px;
    position: relative;
  }

  html.sidebar-collapsed .sidebar a .ico {
    font-size: 17px;
  }

  /* The label rides out as a dark flyout chip on hover instead of sitting inline. */
  html.sidebar-collapsed .sidebar a > span:not(.nav-badge) {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    transition: opacity .12s ease;
    z-index: 60;
  }

  html.sidebar-collapsed .sidebar a:hover > span:not(.nav-badge) {
    opacity: 1;
  }

  /* The count badge shrinks to a corner dot on the icon. */
  html.sidebar-collapsed .nav-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 15px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 15px;
    border-radius: 8px;
  }
}

/* Visitor navigation: the sidebar is only rendered for signed-in users, so the public
   links (home / calls / register) live in the header instead. */
.guest-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 24px;
}

.guest-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .12s, color .12s;
}

.guest-nav a:hover {
  background: var(--green-l);
  color: var(--green-d);
}

.guest-nav a.active {
  background: var(--green);
  color: #fff;
}

.site-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Language dropdown: current culture as a trigger, the others drop down on
   hover/focus (same pattern as .userwrap/.usertip — no JavaScript). */
.langwrap {
  position: relative;
  display: inline-flex;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--green-d);
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}

.lang-current .caret {
  font-size: 9px;
  color: var(--grey);
  transition: transform .12s;
}

.langwrap:hover .lang-current,
.langwrap:focus-within .lang-current {
  background: var(--green-l);
  border-color: var(--green);
}

.langwrap:hover .caret,
.langwrap:focus-within .caret {
  transform: translateY(1px);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: visible;
  display: none;
  z-index: 40;
}

/* Invisible bridge so the pointer can cross the gap without closing the menu. */
.lang-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.langwrap:hover .lang-menu,
.langwrap:focus-within .lang-menu {
  display: block;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.lang-menu a:first-child {
  border-radius: 9px 9px 0 0;
}

.lang-menu a:last-child {
  border-radius: 0 0 9px 9px;
}

.lang-menu a:only-child {
  border-radius: 9px;
}

.lang-menu a + a {
  border-top: 1px solid var(--line);
}

.lang-menu a:hover {
  background: var(--green-l);
  color: var(--green-d);
}

.lang-menu .code {
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--green-d);
}

.bell {
  position: relative;
  text-decoration: none;
  font-size: 17px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .12s, background .12s;
}

.bell:hover {
  border-color: var(--green);
  background: var(--green-l);
}

.bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.iconbtn {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
  cursor: pointer;
}

.iconbtn:hover {
  border-color: var(--green);
  background: var(--green-l);
}

.userwrap {
  position: relative;
  display: inline-flex;
}

.usertip {
  position: absolute;
  top: 50px;
  right: 0;
  background: var(--ink);
  color: #fff;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  display: none;
  z-index: 40;
}

.usertip b {
  display: block;
  font-size: 13px;
}

.usertip span {
  color: rgba(255, 255, 255, .75);
}

.userwrap:hover .usertip,
.userwrap:focus-within .usertip {
  display: block;
}

/* Content — widened by ~two grid columns so split layouts (table + entry card)
   both breathe; the cards keep their 8/4 and 7/5 proportions. */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 26px 22px 60px;
}

/* Hero (public portal) */
.hero {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 38px 36px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.hero .eyebrow {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 27px;
  line-height: 1.25;
  max-width: 660px;
  margin-bottom: 12px;
}

.hero p {
  max-width: 620px;
  opacity: .9;
  font-size: 14.5px;
  margin-bottom: 22px;
}

.hero .cta {
  display: inline-block;
  background: #fff;
  color: var(--green-d);
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 8px;
  border: 0;
  font-size: 14.5px;
  text-decoration: none;
}

.hero .cta:hover {
  background: var(--green-l);
  color: var(--green-d);
}

.hero .cta.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  margin-left: 10px;
}

.hero .cta.ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* Info rule bar (mockup .rulebar) */
.rulebar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.rule {
  flex: 1;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 13px;
}

.rule b {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}

/* Section heading with a "see all" link on the right (landing page teasers) */
.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.sechead .vs {
  margin-bottom: 12px;
}

.seclink {
  margin-bottom: 14px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  color: var(--green);
  text-decoration: none;
}

.seclink:hover {
  color: var(--green-d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Call cards (mockup .grid2 + .callcard) */
.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}

.callcard {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.callcard .type {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.callcard h4 {
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.35;
}

.callcard h4 a {
  text-decoration: none;
  color: var(--ink);
}

.callcard h4 a:hover {
  color: var(--green-d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.callcard .desc {
  font-size: 13.5px;
  color: var(--grey);
  line-height: 1.5;
  margin-bottom: 6px;
}

.callcard .meta {
  font-size: 13px;
  color: var(--grey);
  margin: 4px 0 14px;
  display: grid;
  gap: 4px;
}

.callcard .meta b {
  color: var(--ink);
}

.callcard .apply {
  margin-top: auto;
  display: block;
  text-align: center;
  width: 100%;
  padding: 9px;
  border-radius: 7px;
  border: 1px solid var(--green);
  background: var(--white);
  color: var(--green);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, color .12s;
}

.callcard .apply:hover {
  background: var(--green);
  color: #fff;
}

/* KPI cards (mockup .kpis) */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kpi {
  padding: 16px 18px;
}

.kpi .kl {
  font-size: 12px;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.kpi .kv {
  font-size: 27px;
  font-weight: 800;
  margin: 4px 0 2px;
}

.kpi.green .kv {
  color: var(--green-d);
}

.kpi .kd {
  font-size: 12.5px;
  color: var(--grey);
}

/* Fact strip (mockup .cgrid/.cfact) */
.factgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.fact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
}

.fact .fl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grey);
}

.fact .fv {
  font-size: 14.5px;
  font-weight: 700;
  margin-top: 2px;
}

/* Bootstrap component alignment with the tokens */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--white);
}

/*
  Stacked cards need air between them — without this they sit flush and read as one block
  (most visible on the dashboard pages, which stack three or four in a row).
  Adjacent-sibling only, so a page never gets a trailing gap at the bottom. KPI cards are
  excluded: they live in the .kpis grid, which spaces them with its own gap. Cards that
  already carry .mb-3 are unaffected — adjacent margins collapse in normal flow.
*/
.card:not(.kpi) + .card:not(.kpi) {
  margin-top: 16px;
}

.btn {
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.btn-sm {
  border-radius: 7px;
  font-size: 12.5px;
}

.btn-primary {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: var(--green-d);
  --bs-btn-hover-border-color: var(--green-d);
  --bs-btn-active-bg: var(--green-d);
  --bs-btn-active-border-color: var(--green-d);
}

.btn-outline-primary {
  --bs-btn-color: var(--green-d);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-bg: var(--green-l);
  --bs-btn-hover-color: var(--green-d);
  --bs-btn-hover-border-color: var(--green);
  --bs-btn-active-bg: var(--green);
  --bs-btn-active-border-color: var(--green);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-bg: var(--paper);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--grey);
  --bs-btn-active-bg: var(--paper);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-border-color: var(--grey);
}

.btn-outline-danger {
  --bs-btn-color: var(--red);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-bg: var(--red-l);
  --bs-btn-hover-color: var(--red);
  --bs-btn-hover-border-color: var(--red);
  --bs-btn-active-bg: var(--red);
  --bs-btn-active-border-color: var(--red);
}

.btn-link {
  color: var(--green-d);
  font-weight: 600;
}

.form-control,
.form-select {
  border-color: var(--line);
  border-radius: 7px;
  font-size: 14px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 .2rem rgba(31, 92, 77, .25);
}

.form-check-input:checked {
  background-color: var(--green);
  border-color: var(--green);
}

.text-danger {
  color: var(--red) !important;
  font-size: 13px;
}

label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Alerts in mockup palette */
.alert {
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
}

.alert-danger {
  background: var(--red-l);
  border-color: #E5C4BE;
  color: var(--red);
}

.alert-success {
  background: var(--green-l);
  border-color: #CBDED7;
  color: var(--green-d);
}

.alert-warning {
  background: var(--amber-l);
  border-color: #E8D5AE;
  color: #7A5512;
}

/* Page titles (mockup .vt/.vs) */
.vt {
  font-size: 24px;
  margin-bottom: 4px;
  font-weight: 700;
}

.vs {
  color: var(--grey);
  margin-bottom: 22px;
  max-width: 820px;
}

/* Page head: title left, actions right */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.page-head .vt,
.page-head .vs {
  margin-bottom: 0;
}

/* Card header: page/section title lives inside the card */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.card-head .ct {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

.card-head .ct .pill {
  vertical-align: 2px;
  margin-left: 4px;
}

.card-head .cs {
  font-size: 12.5px;
  color: var(--grey);
  margin: 3px 0 0;
  max-width: 720px;
}

.card-head .ca {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Form section separators (mockup .subsec) */
.subsec {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-d);
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.subsec:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 6px;
}

.hint {
  font-size: 12px;
  color: var(--grey);
  margin-top: 2px;
}

/* Status pills (mockup .pill) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.pill-ok {
  background: var(--green-l);
  color: var(--green-d);
}

.pill-pending {
  background: var(--amber-l);
  color: var(--amber);
}

.pill-warn {
  background: var(--red-l);
  color: var(--red);
}

.pill-info {
  background: var(--blue-l);
  color: var(--blue);
}

.pill-muted {
  background: #EEF1F0;
  color: var(--grey);
}

/* Status filter links */
.filterbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filterbar a {
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--white);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  transition: border-color .12s, background .12s;
}

.filterbar a:hover {
  border-color: var(--green);
  color: var(--green-d);
}

.filterbar a.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}

/* A chip that has nothing to show (e.g. "unread 0") — same shape, not clickable. */
.filterbar .off {
  border: 1px dashed var(--line);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--grey);
  opacity: .7;
}

/* Divider between the category chips and the unread toggle. */
.filterbar .fsep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 2px 4px;
}

/* Data tables (mockup .apptable) */
.data-table {
  font-size: 13.5px;
}

.data-table thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grey);
  background: var(--paper);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.data-table td {
  vertical-align: middle;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background .1s;
}

.data-table tbody tr:hover {
  background: var(--paper);
}

.data-table thead th:first-child,
.data-table td:first-child {
  padding-left: 18px;
}

.data-table thead th:last-child,
.data-table td:last-child {
  padding-right: 18px;
}

/* DataTables (browse tables with data-datatable) — themed to match the card layout
   and the green palette. The controls render inside .card-body p-0, so we add our own
   padding and keep the search/length/info/paging chrome quiet and on-brand. */
.dt-container {
  padding: 14px 18px 4px;
}

.dt-container .dt-layout-row {
  align-items: center;
  margin-bottom: 12px;
}

.dt-container .dt-layout-table {
  margin: 0 -18px; /* let the table itself span the full card width */
}

.dt-container .dt-search input,
.dt-container .dt-length select {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-l);
  outline: none;
}

.dt-container .dt-search label,
.dt-container .dt-length label,
.dt-container .dt-info {
  font-size: 12.5px;
  color: var(--grey);
}

/* Sortable header affordance */
.data-table thead th.dt-orderable-asc,
.data-table thead th.dt-orderable-desc {
  cursor: pointer;
}

.data-table thead th.dt-orderable-asc:hover,
.data-table thead th.dt-orderable-desc:hover {
  color: var(--green-d);
}

.data-table thead th .dt-column-order::before,
.data-table thead th .dt-column-order::after {
  opacity: .35;
}

.data-table thead th.dt-ordering-asc .dt-column-order::before,
.data-table thead th.dt-ordering-desc .dt-column-order::after {
  opacity: 1;
  color: var(--green);
}

/* Pagination in the green palette */
.dt-container .dt-paging .pagination {
  margin: 0;
}

.dt-container .dt-paging .page-link {
  color: var(--green-d);
  border-radius: 8px;
  margin: 0 2px;
  border: 1px solid var(--line);
  font-size: 13px;
}

.dt-container .dt-paging .page-link:hover {
  background: var(--green-l);
  border-color: var(--green);
  color: var(--green-d);
}

.dt-container .dt-paging .page-item.active .page-link {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.dt-container .dt-paging .page-item.disabled .page-link {
  color: var(--grey);
  opacity: .5;
}

/* Empty state inside cards/tables */
.empty-state {
  text-align: center;
  color: var(--grey);
  padding: 34px 20px;
  font-size: 14px;
}

.empty-state .ei {
  font-size: 26px;
  display: block;
  margin-bottom: 8px;
  opacity: .6;
}

/* Success confirmation (mockup .success) */
.success-box {
  text-align: center;
  padding: 50px 30px;
}

.success-box .ok {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-l);
  color: var(--green);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.success-box h1 {
  font-size: 21px;
  margin-bottom: 8px;
  font-weight: 700;
}

/* Notification list (mockup .nitem) */
.nlist .nitem {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  transition: background .12s;
}

.nlist .nitem:hover {
  background: var(--paper);
}

/* Unread items carry a green edge and a slightly warmer background. */
.nlist .nitem.unread {
  background: var(--green-l);
  box-shadow: inset 3px 0 0 var(--green);
}

.nlist .nbody {
  min-width: 0;
}

.nlist .nhead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Filter bar strip between the card head and the list */
.nfilter {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.filterbar .fc {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--line);
  color: var(--grey);
  font-size: 11.5px;
  font-weight: 600;
}

.filterbar a.on .fc {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Day separator (Today / Yesterday / Earlier) */
.ngroup {
  padding: 8px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 600;
}

.nlist .nitem .ni.ok {
  background: var(--green-l);
  color: var(--green-d);
}

.nlist .nitem .ni.warn {
  background: var(--amber-l);
  color: var(--amber);
}

.nlist .nitem:last-child {
  border-bottom: 0;
}

.nlist .nitem .ni {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--green-l);
  color: var(--green-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.nlist .nitem .nt {
  color: var(--grey);
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Answer to a request for additional information (Module IV), quoted under the question. */
.nlist .nitem .nresp {
  margin-top: 6px;
  padding: 8px 11px;
  border-left: 3px solid var(--green);
  background: var(--paper);
  border-radius: 0 8px 8px 0;
  white-space: pre-line;
}

/* Form footer nav (mockup .fnav) */
.fnav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* "Back" sits on the left, save/next on the right (mockup layout). */
.fnav [data-wizard-prev] {
  margin-right: auto;
}

/* Return-note / info callout (mockup .note) */
.note {
  background: var(--blue-l);
  border: 1px solid #CBD9E8;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 13px;
  color: #1E4568;
  margin: 12px 0;
}

/* Application wizard (mockup .steps pattern): section-grouped fields become steps,
   the rail on the left is clickable; .cur = current, .done = visited, .err = the
   server-side validation found errors on that step. */
.steps {
  padding: 10px 0;
  margin: 0;
  position: sticky;
  top: 85px;
  align-self: start;
}

.steps li {
  list-style: none;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--grey);
  cursor: pointer;
}

.steps li .n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  flex-shrink: 0;
  background: #fff;
}

.steps li.cur {
  color: var(--ink);
  font-weight: 600;
}

.steps li.cur .n {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.steps li.done .n {
  background: var(--green-l);
  border-color: var(--green);
  color: var(--green);
}

.steps li.err .n {
  border-color: var(--red);
  color: var(--red);
}

/*
  How many fields failed on that step, written by the wizard into data-errors. Without it the
  rail says "something is wrong somewhere" — with it the applicant sees exactly where the
  remaining work is and can click straight there.
*/
.steps li.err::after {
  content: attr(data-errors);
  margin-left: auto;
  align-self: center;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Per-step header inside a wizard step (mockup .official tag + step title). */
.fstep-head {
  margin-bottom: 14px;
}

.fstep-head .ct {
  margin: 6px 0 0;
  font-size: 18px;
}

.official {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--green-d);
  background: var(--green-l);
  border-radius: 6px;
  padding: 3px 9px;
}

/* Field prefilled (read-only) from the institution registry, e.g. the submitter municipality. */
.form-control.prefilled {
  background: var(--paper, #f4f6f5);
  cursor: not-allowed;
}

/* Region map (RegionMap view component): a plain inline SVG of the eight planning
   regions — no tile layer, no map library. Gray, subtly raised tiles that turn dark
   grey and reveal their name (caption band below the map) on hover / focus / select. */
.region-map {
  margin: 0 auto 10px;
}

.region-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.region-map .region {
  cursor: pointer;
  outline: none;
}

.region-map .region path {
  fill: #dbe0e4;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(22, 34, 45, 0.28));
  transition: fill 0.12s ease, filter 0.12s ease;
}

.region-map .region:hover path,
.region-map .region:focus path,
.region-map .region.selected path {
  fill: #4b535a;
  filter: drop-shadow(0 3px 5px rgba(22, 34, 45, 0.34));
}

/* Region name lives in the empty band below the map, so any length fits. Each region
   carries its own caption; only the hovered/selected one is shown (pure CSS). */
.region-map .region-name {
  fill: #2b3138;
  font-size: 34px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* Only one region name is ever shown in the band, so captions never overlap: at rest
   the selected region's name; hovering (or keyboard-focusing) a region replaces it with
   that region's name. */
.region-map:not(:hover) .region.selected .region-name {
  opacity: 1;
}

.region-map:hover .region.selected .region-name {
  opacity: 0;
}

.region-map:hover .region:hover .region-name {
  opacity: 1;
}

.region-map .region:focus-visible .region-name {
  opacity: 1;
}

.region-map:has(.region:focus-visible):not(:hover) .region.selected .region-name {
  opacity: 0;
}

/* Value mode (Module VII dashboard): the same shapes carry a green shade by size plus an
   in-tile name and number, so the map reads as a small choropleth instead of a picker. */
.region-map-values .region {
  cursor: default;
}

.region-map-values .region path {
  fill: #cfdcd8;
}

.region-map-values .region.shade-1 path { fill: #9dbdb3; }
.region-map-values .region.shade-2 path { fill: #52887a; }
.region-map-values .region.shade-3 path { fill: var(--green); }

.region-map-values .region:hover path,
.region-map-values .region:focus path {
  fill: var(--green-d);
}

.region-map-values .region-label,
.region-map-values .region-value {
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(23, 38, 43, .35);
  stroke-width: 3px;
}

.region-map-values .region-label {
  font-size: 26px;
  font-weight: 700;
}

.region-map-values .region-value {
  font-size: 30px;
  font-weight: 800;
}

/* Module VII control panel */
.tabbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tabbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s, background .12s, color .12s;
}

.tabbar a:hover {
  border-color: var(--green);
  color: var(--green-d);
}

.tabbar a.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.chartcard .mapwrap {
  padding: 6px 18px 18px;
}

.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--grey);
}

/* Inline share bar inside a table cell */
.minibar {
  display: block;
  height: 8px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
  min-width: 80px;
}

.minibar i {
  display: block;
  height: 100%;
  background: var(--green);
}

/* Pipeline (applications per stage) */
.pipeline {
  padding: 6px 18px 18px;
  display: grid;
  gap: 10px;
}

.pstage {
  display: grid;
  grid-template-columns: 190px 1fr 60px;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.pstage .pbar {
  height: 14px;
  border-radius: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}

.pstage .pbar i {
  display: block;
  height: 100%;
  background: var(--green);
}

.pstage .pv {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Report generator */
.repform {
  padding: 0 18px 18px;
}

.critgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.repactions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 700px) {
  .pstage {
    grid-template-columns: 120px 1fr 46px;
  }
}

/* Repeater field (Repeater form field type): dynamic rows of a child-field group
   (e.g. project partners), styled as bordered cards with an add/remove control. */
.repeater .rep-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.repeater .rep-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 2px;
  background: var(--bg, #fafbfc);
}

.repeater .rep-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.repeater .rep-row-title {
  font-weight: 600;
  color: var(--ink, #1d2b27);
}

/* Repeater "add row" button (mockup .addbtn): full-width dashed green box. */
.addbtn {
  display: block;
  width: 100%;
  background: var(--white);
  border: 1.5px dashed var(--green);
  color: var(--green-d);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  transition: background .12s, border-color .12s;
}

.addbtn:hover {
  background: var(--green-l);
  border-color: var(--green-d);
}

.addbtn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Segmented single-select (mockup .seg) — buttons that drive a hidden input. */
.seg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.seg button {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  color: var(--ink);
  transition: background .12s, border-color .12s, color .12s;
}

.seg button:hover:not(:disabled) {
  border-color: var(--green);
}

.seg button.sel {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}

/* Multi-select chips (mockup .chips.gr). */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chips button {
  padding: 6px 13px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  color: var(--ink);
  transition: background .12s, border-color .12s, color .12s;
}

.chips button:hover:not(:disabled) {
  border-color: var(--green);
}

.chips.gr button.sel {
  background: var(--green-l);
  border-color: var(--green);
  color: var(--green-d);
  font-weight: 600;
}

.seg button:disabled,
.chips button:disabled {
  opacity: .8;
  cursor: default;
}

/* Table-layout repeater (mockup .itable / .budtable): rows are <tr> in the .rep-rows tbody,
   so the stacked flex-card styling must be neutralised here. */
.repeater-table .rep-rows {
  display: table-row-group;
  gap: 0;
  margin: 0;
}

.repeater-table .rep-row {
  display: table-row;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}

.itable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}

.itable th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grey);
  background: var(--paper);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.itable td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.itable td .form-control,
.itable td .form-select {
  padding: 6px 9px;
  font-size: 13px;
}

/* Horizontal scroll for wide table repeaters (e.g. the 12-month gantt). */
.itable-scroll {
  overflow-x: auto;
}

/* Yes/No cells in a table repeater are just a centered checkbox (e.g. gantt months). */
.itable td .form-check {
  margin: 0;
  min-height: auto;
  display: flex;
  justify-content: center;
  padding: 0;
}

.itable td .form-check .form-check-input {
  margin: 0;
  float: none;
}

/* Keep month columns tight so the gantt stays compact. */
.itable th {
  white-space: nowrap;
}

.itable .rep-pct {
  width: 74px;
  text-align: right;
  white-space: nowrap;
}

.itable .rep-amount {
  text-align: right;
  white-space: nowrap;
}

.itable .rep-rm {
  width: 44px;
  text-align: center;
}

/* Budget table total row (mockup .budtable .tot). */
.budtable tfoot .tot td {
  font-weight: 700;
  background: var(--green-l);
  color: var(--green-d);
  border-bottom: 0;
}

/* Footer (normal flow at the bottom of the content column — the flex body
   and .shell-main push it down on short pages). */
.site-footer {
  white-space: nowrap;
  line-height: 60px;
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--grey);
  font-size: 13px;
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .site-header {
    position: static;
  }

  /* Sidebar collapses into a horizontal link row above the content. */
  .shell {
    flex-direction: column;
  }

  .sidebar {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-inner {
    position: static;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 10px;
  }

  /* The collapse control is a desktop affordance; the mobile bar always shows labels. */
  .sidebar-head {
    display: none;
  }

  .sgroup {
    display: contents;
  }

  .sgroup-title {
    display: none;
  }

  .sidebar a + a {
    margin-top: 0;
  }

  .steps {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 8px;
  }

  .steps li {
    white-space: nowrap;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 26px 22px;
  }

  .hero .cta.ghost {
    margin-left: 0;
    margin-top: 8px;
  }

  .wrap {
    padding: 18px 14px 60px;
  }
}

/* Standard row actions: square icon button, label as title tooltip + visually-hidden
   text (screen readers and the e2e :has-text selectors). Variants: .danger (red),
   .primary (filled green). Group them with .actgroup. */
.actgroup {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.actbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--green-d);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}

.actbtn:hover {
  background: var(--green-l);
  border-color: var(--green);
  color: var(--green-d);
}

.actbtn:active {
  transform: translateY(1px);
}

.actbtn.primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.actbtn.primary:hover {
  background: var(--green-d);
  border-color: var(--green-d);
}

.actbtn.danger:hover {
  background: var(--red-l);
  border-color: var(--red);
  color: var(--red);
}

/* Drag & drop reordering (codebook entries): grab the handle, drop the row. */
.drag-handle {
  cursor: grab;
  color: var(--grey);
  font-size: 15px;
  user-select: none;
  padding: 0 4px;
}

tr.dragging {
  opacity: .45;
  background: var(--green-l);
}

/* ── Diagnostics (ADR 0023): logs, health, system info ───────────────────── */

/* Log rows are tinted by severity so an error is visible without reading. */
.data-table tr.lv-error > td {
  background: var(--red-l);
}

.data-table tr.lv-warn > td {
  background: var(--amber-l);
}

.data-table tr.lv-muted > td {
  color: var(--grey);
}

.logmsg {
  max-width: 640px;
  overflow-wrap: anywhere;
}

.exc-flag {
  margin-left: 6px;
  color: var(--red);
  cursor: help;
}

.nowrap {
  white-space: nowrap;
}

/* Message, stack trace and property blobs on the entry detail page. */
.logblock {
  background: #F6F8F7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 16px;
}

.logblock.error {
  background: var(--red-l);
  border-color: var(--red);
  color: var(--red);
}

/* Overall health banner. */
.hstate {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.hstate .hs-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey);
}

.hstate .hs-value {
  font-size: 20px;
  font-weight: 700;
}

.hstate .hs-time {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--grey);
}

.hstate.ok {
  background: var(--green-l);
  border-color: var(--green);
}

.hstate.ok .hs-value {
  color: var(--green-d);
}

.hstate.degraded {
  background: var(--amber-l);
  border-color: var(--amber);
}

.hstate.degraded .hs-value {
  color: var(--amber);
}

.hstate.bad {
  background: var(--red-l);
  border-color: var(--red);
}

.hstate.bad .hs-value {
  color: var(--red);
}