/* EPRA Metrics app: additions on top of index-data.css (the Index Data app's own styles). Keep this small. */

/* index-data.css fades each tab in from opacity 0; where the browser pauses animations (background or hidden
   window, the desktop app's preview pane) the page stayed invisible or half-faded, so the fade is switched off */
section[id^="view-"] { animation: none; }

.muted { color: var(--epra-muted); }
.hidden { display: none !important; }
.coming { color: var(--epra-muted); font-size: 14px; padding: 28px 8px; }
.check-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--epra-muted); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.panel-head h2 { margin: 0; }
.co-picker-field { min-width: 320px; flex: 1 1 320px; }
.gr-select-field { min-width: 260px; }
.smselect-group { padding: 6px 10px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
                  color: var(--epra-muted); background: var(--epra-grey); }
.sm-hint { font-size: 11px; color: var(--epra-muted); margin-left: 4px; }

/* summary band (Index Data hero) */
.dhero .d { display: flex; flex-direction: column; }
.db-hero-note { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 6px; }
.view-tools { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 -6px; }

/* metric charts: large cards, two per row */
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .mgrid { grid-template-columns: 1fr; } }
.mcard { background: white; border-radius: 10px; padding: 10px 14px 4px; box-shadow: 0 1px 3px rgba(10,77,140,0.06); min-width: 0; }
.mcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mcard-head h3 { font-size: 14px; font-weight: 700; color: var(--epra-navy); margin: 0; }
.mcard-sub { font-size: 11px; color: var(--epra-muted); }
.mcard-chart { height: var(--chart-h, 300px); margin-top: 4px; }

/* tables */
table.data-table td, table.data-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data-table td.num, table.data-table th.num { text-align: right; }
table.data-table th.sortable { cursor: pointer; user-select: none; }
table.data-table tr.clickable { cursor: pointer; }

/* Review */
.rv-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--epra-text); }
.rv-bar-wrap { width: 240px; height: 8px; background: var(--epra-grey); border-radius: 4px; overflow: hidden; }
.rv-bar { height: 100%; background: var(--epra-navy); width: 0; transition: width .3s; }
.rv-card { background: white; border-radius: 10px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(10,77,140,0.06);
           border-left: 4px solid var(--epra-gold); }
.rv-card.done { border-left-color: var(--epra-pos); opacity: 0.85; }
.rv-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--epra-navy); margin-bottom: 8px; }
.rv-table td { vertical-align: middle; }
.rv-table tr.look td { background: #FBE3B0; }
.rv-note { white-space: normal !important; font-size: 11px; color: var(--epra-muted); max-width: 420px; }
.rv-corr { width: 150px; }
.rv-foot { display: flex; gap: 10px; margin-top: 8px; }
.rv-foot .rv-comment { flex: 1; }
.rv-nd { margin-top: 6px; font-size: 12px; color: var(--epra-text); }
.rv-nd summary { cursor: pointer; padding: 4px 0; }
.rv-nd .rv-note { max-width: none; }
.rv-table { width: 100%; margin-top: 8px; }
.rv-table .rv-corr { width: 110px; }
.rv-table td.look { background: #FBE3B0; }
.rv-metric { white-space: nowrap; overflow: hidden; max-width: 380px; }
summary.rv-head { cursor: pointer; margin-bottom: 0; list-style: none; }
summary.rv-head::-webkit-details-marker { display: none; }
summary.rv-head > div:first-child::before { content: "▸ "; color: var(--epra-muted); }
details.rv-card[open] > summary.rv-head > div:first-child::before { content: "▾ "; }
.rv-flag { margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: #FBE3B0; color: #7a5200; font-size: 11px; }
.rv-ok { margin-left: 8px; color: var(--epra-pos); font-size: 11px; }
.rv-sub { font-size: 11px; color: var(--epra-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rv-rows { display: flex; flex-direction: column; gap: 12px; }
.cr-comment-field { flex: 1 1 260px; }
.cr-scroll { max-height: 420px; margin-top: 10px; }
.cr-st { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .4px; }
.cr-st.pending { color: var(--epra-gold); } .cr-st.approved { color: var(--epra-navy); }
.cr-st.rejected { color: var(--epra-neg); } .cr-st.applied { color: var(--epra-pos); }

/* Import */
/* output box: same height as the steps panel next to it (grid rows stretch; the box fills its panel) */
.im-grid { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.im-grid > .panel { margin-bottom: 0; min-width: 0; }
.im-grid > .im-out { display: flex; flex-direction: column; }
@media (max-width: 1000px) { .im-grid { grid-template-columns: 1fr; } }
.im-step { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--epra-grey-2); }
.im-step:last-child { border-bottom: 0; }
.im-step h3 { font-size: 13px; font-weight: 700; color: var(--epra-navy); margin: 0 0 3px; }
.im-step p { font-size: 12px; color: var(--epra-muted); margin: 0; line-height: 1.45; }
.im-step-btns { display: flex; gap: 6px; align-items: flex-start; white-space: nowrap; }
.im-pw { width: 140px; }
.im-log { background: #0B2440; color: #FFFFFF; font-size: 11.5px; line-height: 1.45; padding: 12px 14px; border-radius: 8px;
          flex: 1 1 0; min-height: 320px; overflow: auto; white-space: pre-wrap; margin: 0; }
.im-log .st { display: block; font-weight: 700; margin-bottom: 8px; }
.im-log .st.running { color: #F5C451; } .im-log .st.done { color: #5BE5A0; } .im-log .st.failed { color: #FF9A8C; }
.im-log .st.end { margin: 8px 0 0; }

.im-due { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.im-due-month h3 { font-size: 12px; font-weight: 700; color: var(--epra-navy); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; }
.im-due-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--epra-grey-2); }
.im-due-row.is-due span:first-child { font-weight: 700; color: var(--epra-navy); }
.im-due-row .tag { font-size: 10.5px; padding: 1px 6px; border-radius: 8px; background: var(--epra-grey); color: var(--epra-text); white-space: nowrap; }
.im-due-row .tag.announced, .im-due-row .tag.published { background: rgba(18,73,127,0.12); color: var(--epra-navy); font-weight: 700; }
.im-due-row .tag.last-year { background: rgba(235,166,28,0.18); }

/* Data notes */
#dn-issues td:last-child, #dn-issues td:nth-child(2) { white-space: normal; }
#dn-issues td:last-child { min-width: 340px; }
.dn-kpis { grid-template-columns: repeat(5, 1fr); }
.dn-kpis .db-kpi .fig { font-size: 18px; }
.dn-defs { display: grid; grid-template-columns: 200px 1fr; gap: 8px 18px; margin: 0; font-size: 13px; }
.dn-defs dt { color: var(--epra-navy); font-weight: 700; }
.dn-defs dd { margin: 0; color: var(--epra-text); line-height: 1.5; }

/* Companies: every company in a list on the left, charts on the right */
.db-wrap.co-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.co-side { position: sticky; top: 68px; display: flex; flex-direction: column; gap: 8px; padding: 10px; max-height: calc(100vh - 84px); }
.co-side-toggle { display: none; }
.co-list { overflow-y: auto; flex: 1 1 auto; outline: none; margin: 0 -4px; }
.co-item { padding: 5px 8px; border-radius: 6px; cursor: pointer; line-height: 1.2; }
.co-item .n { font-size: 13px; color: var(--epra-navy); display: block; }
.co-item .h { font-size: 10.5px; color: var(--epra-muted); }
.co-item:hover { background: var(--epra-grey); }
.co-item.active { background: var(--epra-navy); }
.co-item.active .n, .co-item.active .h { color: white; }
.co-hint { font-size: 12px; margin-left: 4px; }
@media (max-width: 1100px) {
  .db-wrap.co-layout { grid-template-columns: 1fr; }
  .co-side { position: static; max-height: none; }
  .co-side-toggle { display: block; }
  .co-side:not(.open) input, .co-side:not(.open) .co-list { display: none; }
  .co-side.open .co-list { max-height: 45vh; }
}
.mcard-chart.clickable canvas { cursor: pointer; }

/* report a wrong figure (from a Companies chart) */
.rp-overlay { position: fixed; inset: 0; background: rgba(10,30,60,0.35); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rp-box { background: white; border-radius: 10px; padding: 18px 20px; width: min(520px, 100%); box-shadow: 0 8px 30px rgba(10,30,60,0.25); }
.rp-box h2 { font-size: 16px; margin: 0 0 4px; }
.rp-box .field { margin-top: 10px; }
.rp-box label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--epra-muted); margin-bottom: 3px; }
.rp-box input, .rp-box select { width: 100%; }
.rp-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; align-items: center; }

/* Download tab */
.dl-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; margin-top: 6px; }
.dl-metrics label { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 13px; color: var(--epra-navy); display: flex; gap: 6px; align-items: center; }
.dl-metrics .muted { font-size: 11px; }

/* sign-in (top right) and short confirmations */
.toast-msg { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--epra-navy); color: white;
             padding: 8px 14px; border-radius: 8px; font-size: 13px; z-index: 1100; box-shadow: 0 4px 14px rgba(10,30,60,0.25); }
.dhero .ds .d.clickable, .im-act td { cursor: default; }
.dhero .ds .d.clickable { cursor: pointer; }
.dhero .ds .d.clickable:hover { outline: 1px dashed rgba(255,255,255,0.5); outline-offset: 2px; border-radius: 4px; }
.cr-kind { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--epra-grey); }
.cr-kind.flag { background: #FFF1D6; }
.im-act-scroll { max-height: 320px; }
table.data-table td.im-act-detail { white-space: normal; min-width: 320px; }

/* ---- branded header: full-width EPRA blue bar, logo, tabs as an underlined nav, data date + signed-in person on the right */
.topbar { display: flex; align-items: center; gap: 20px; background: #12497F; padding: 0 28px; min-height: 56px;
          box-shadow: 0 2px 10px rgba(10,30,60,0.18); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-logo { height: 30px; width: auto; display: block; }
.app-title { font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow", Arial, sans-serif; font-weight: 400;
             font-size: 18px; color: white; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.35); line-height: 1; }
.topbar .nav-tabs { gap: 2px; margin: 0; flex-wrap: nowrap; align-self: stretch; }
.topbar .nav-tabs .nav-link { background: transparent; box-shadow: none; border: none; border-radius: 0; color: rgba(255,255,255,0.72);
  font-size: 14px; font-weight: 600; padding: 0 12px; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  white-space: nowrap; transform: none; display: flex; align-items: center; height: 100%; }
.topbar .nav-tabs .nav-link:hover:not(.active) { color: white; box-shadow: none; transform: none; border-bottom-color: rgba(255,255,255,0.3); }
.topbar .nav-tabs .nav-link.active { color: white; border-top: 3px solid transparent; padding-top: 0; border-bottom-color: #EBA61C; box-shadow: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.data-date { font-size: 12px; color: rgba(255,255,255,0.75); white-space: nowrap; }
.auth-box { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.auth-who { font-size: 13px; font-weight: 700; color: white; }
.topbar .auth-box .btn-outline-primary { color: white; border-color: rgba(255,255,255,0.6); background: transparent; }
.topbar .auth-box .btn-outline-primary:hover { background: rgba(255,255,255,0.12); }
.topbar .auth-box .btn-primary { background: white; color: #12497F; border-color: white; }
#boot-error:empty { display: none; }
#boot-error { color: #FFD6CF; font-size: 12px; }
main { margin-top: 12px; }

/* ---- narrow screens: tabs stay one row and scroll sideways, 16px gutters, banner stacks */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 0 12px; padding: 8px 16px 0; }
  .topbar-right { margin-left: auto; }
  .data-date { display: none; }
  .topbar .nav-tabs { order: 3; flex: 1 1 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 4px -16px 0; padding: 0 10px; height: 42px; }
  .topbar .nav-tabs::-webkit-scrollbar { display: none; }
  .topbar .nav-tabs .nav-link { padding: 0 10px; }
  main { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 700px) {
  .dhero { grid-template-columns: 1fr; padding: 18px 16px; gap: 14px; }
  .dhero .ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .dhero .big { font-size: 28px; }
  .view-tools { flex-wrap: wrap; gap: 8px; }
  .brand-logo { height: 24px; }
}

/* ---- summary band: EPRA-blue gradient, change since the previous month (green = better, red = worse), 12-point sparkline */
.dhero { background: radial-gradient(120% 140% at 100% 0%, rgba(105,170,243,0.35) 0%, rgba(105,170,243,0) 55%),
                     linear-gradient(120deg, #0E3A66 0%, #12497F 45%, #2274BC 100%); }
.dhero .big .chg { font-size: 13px; font-weight: 600; vertical-align: middle; margin-left: 6px; letter-spacing: 0; }
.dhero .d .chg { display: block; font-size: 11px; font-weight: 600; margin-top: 1px; white-space: nowrap; }
.dhero .chg.up { color: #7CE8B0; }
.dhero .chg.down { color: #FFA899; }
.dhero .chg.flat { color: rgba(255,255,255,0.7); }
.dhero .spark { display: block; margin-top: 4px; overflow: visible; }
.dhero .spark polyline { fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* ---- compact summary band (more room for the charts) */
.dhero { padding: 14px 24px; gap: 18px; border-radius: 10px; }
.dhero .big { font-size: 28px; }
.dhero .ds { gap: 22px; }
.dhero .d .v { font-size: 19px; }
.dhero .spark { margin-top: 2px; }
.db-hero-note { margin-top: 3px; }
.co-isin { font-size: 11px; color: rgba(255,255,255,0.75); letter-spacing: 0.4px; margin-top: 2px; }
#view-co .dhero .big { font-size: 24px; margin-top: 2px; }
.db-wrap { gap: 12px; }
.view-tools { margin: 0; gap: 10px; }
.gr-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gr-pick .form-select { width: auto; min-width: 220px; }
.mcard-head h3 { font-size: 13.5px; }

/* ---- Download: three steps side by side (stacked on narrow screens) */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-step h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dl-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #12497F; color: white; font-size: 12px;
        align-items: center; justify-content: center; flex: none; }
.dl-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--epra-muted); margin: 12px 0 6px; }
.dl-sub a { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--epra-muted); }
.dl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-chip { border: 1px solid var(--epra-grey-2); background: white; color: #12497F; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; }
.dl-chip:hover { border-color: #2274BC; }
.dl-chip.on { background: #12497F; border-color: #12497F; color: white; }
.dl-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dl-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--epra-muted); margin: 10px 0 4px; }
.dl-m { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #12497F; padding: 2px 0; cursor: pointer; }
.dl-m .muted { font-size: 11px; }
.dl-file .dl-go { width: 100%; margin-top: 12px; padding: 8px; font-size: 15px; }
.dl-prev-head { font-size: 13px; color: #12497F; margin-bottom: 8px; }
.dl-prev { list-style: none; padding: 0; margin: 0; font-size: 12.5px; max-height: 360px; overflow-y: auto; }
.dl-prev li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--epra-grey-2); }
.dl-prev li.skip { color: var(--epra-muted); }
.dl-empty { color: var(--epra-muted); font-size: 13px; }
/* Download: company picker, optionally grouped by sector or country (tick a heading = the whole group) */
.dl-co-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.dl-co-tools input { flex: 1 1 200px; }
.dl-co-by { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.dl-co-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--epra-grey-2); border-radius: 8px; padding: 4px 8px; }
.dl-co-list details { border-bottom: 1px solid var(--epra-grey-2); }
.dl-co-list details:last-child { border-bottom: none; }
.dl-co-list summary { display: flex; align-items: center; gap: 7px; padding: 5px 0; cursor: pointer; font-size: 13px; font-weight: 700; color: #12497F; list-style: none; }
.dl-co-list summary::-webkit-details-marker { display: none; }
.dl-co-list summary::before { content: "▸"; color: var(--epra-muted); width: 10px; }
.dl-co-list details[open] > summary::before { content: "▾"; }
.dl-co-list summary .muted { font-weight: 400; font-size: 11.5px; }
.dl-co-list .dl-co { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #12497F; padding: 2px 0 2px 17px; cursor: pointer; }
.dl-co-list.flat .dl-co { padding-left: 0; }
.dl-co .muted { font-size: 11px; }

/* ---- Company sheet: an A4-like page on screen, the same layout as the PDF */
.cs-page { background: white; max-width: 820px; width: 100%; margin: 0 auto; box-shadow: 0 2px 12px rgba(10,30,60,0.12); border-radius: 4px; overflow: hidden; }
.cs-band { background: #12497F; border-bottom: 3px solid #EBA61C; color: white; display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; }
.cs-band img { height: 34px; }
.cs-band div { text-align: right; display: flex; flex-direction: column; font-size: 12px; }
.cs-band b { font-size: 14px; }
.cs-band span { color: rgba(255,255,255,0.8); }
.cs-body { padding: 26px 32px 22px; color: #515151; }
.cs-body h1 { color: #12497F; font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow", Arial, sans-serif; font-size: 30px; margin: 0; }
.cs-sub { font-size: 13px; margin: 4px 0 16px; }
.cs-ident { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.cs-ident span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #767676; }
.cs-ident b { color: #12497F; font-size: 14px; }
.cs-body h2 { color: #12497F; font-size: 15px; margin: 20px 0 4px; padding-bottom: 5px; border-bottom: 1.5px solid #2274BC; }
.cs-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-body td { padding: 7px 0; border-bottom: 1px solid #DFDFE0; }
.cs-body td.v { text-align: right; color: #12497F; font-weight: 700; font-size: 14px; padding-right: 24px; white-space: nowrap; }
.cs-body td.asof { text-align: right; color: #767676; font-size: 11px; width: 34%; }
.cs-notes { font-size: 10.5px; color: #767676; margin-top: 18px; line-height: 1.5; }
@media (max-width: 700px) {
  .cs-band { padding: 14px 16px; } .cs-band img { height: 26px; }
  .cs-body { padding: 18px 16px; } .cs-body h1 { font-size: 24px; }
  .cs-ident { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-body tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid #DFDFE0; padding: 6px 0; }
  .cs-body td { border: none; padding: 0; }
  .cs-body td.v { padding-right: 0; }
  .cs-body td.asof { grid-column: 1 / -1; width: auto; text-align: left; font-size: 10.5px; }
}