/* ============================================================================
modern-ui.css — v2
Sleek/modern restyle layer for the Admin Submissions dashboard.
Loaded LAST (after site.css + Observatory.css) so it overrides cleanly.
Goals for v2:
- one consistent TYPE + SPACING + SIZE scale (kills the "some huge / some
tiny" feel)
- modern density & vertical rhythm
- real glassmorphism where it reads well (card, chips, dropdowns, accordion)
Scoping (intentional, so the rest of the app is untouched):
- Navbar -> header.natura-map-header (the extended P2 header)
- Table -> .modern-submissions (added on the submissions card)
Pure CSS over existing markup: no DOM/JS hooks, IDs or onclick changed.
============================================================================ */
:root {
/* brand */
--mui-blue: #00639B;
--mui-green: #00AA7D;
--mui-blue-soft: rgba(0, 99, 155, 0.08);
--mui-blue-soft-2: rgba(0, 99, 155, 0.14);
--mui-green-soft: rgba(0, 170, 125, 0.10);
/* ink */
--mui-ink: #243140;
--mui-ink-soft: #66727f;
--mui-line: rgba(20, 45, 70, 0.10);
/* type scale */
--mui-fs-nav: 14px;
--mui-fs-eyebrow: 11px; /* column headers / labels */
--mui-fs-body: 13px;
--mui-fs-badge: 12px;
--mui-fs-chip: 12.5px;
/* spacing scale (4pt) */
--mui-s1: 4px;
--mui-s2: 8px;
--mui-s3: 12px;
--mui-s4: 16px;
--mui-s5: 20px;
--mui-s6: 24px;
/* sizes */
--mui-icon: 30px; /* round icon discs */
--mui-control-h: 32px; /* buttons / inputs */
/* radii */
--mui-r-pill: 999px;
--mui-r-card: 18px;
--mui-r-ctl: 10px;
/* shadows */
--mui-shadow: 0 12px 34px rgba(16, 42, 67, 0.12);
--mui-shadow-soft: 0 2px 10px rgba(16, 42, 67, 0.07);
--mui-shadow-hover: 0 8px 20px rgba(16, 42, 67, 0.16);
/* glass */
--mui-glass-bg: rgba(255, 255, 255, 0.62);
--mui-glass-bg-strong: rgba(255, 255, 255, 0.80);
--mui-glass-blur: blur(22px) saturate(180%);
--mui-glass-border: 1px solid rgba(255, 255, 255, 0.55);
--mui-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
--mui-ease: cubic-bezier(.4, 0, .2, 1);
}
/* ===========================================================================
1) TOP NAVBAR
=========================================================================== */
header.natura-map-header {
box-shadow: var(--mui-shadow), var(--mui-glass-inset);
border: var(--mui-glass-border) !important;
backdrop-filter: var(--mui-glass-blur);
-webkit-backdrop-filter: var(--mui-glass-blur);
transition: box-shadow .3s var(--mui-ease);
}
header.natura-map-header .header-top {
gap: var(--mui-s3);
padding: var(--mui-s2) var(--mui-s4);
}
/* brand logo chip — constrain so it never dominates */
header.natura-map-header .header-brand-logo {
height: 44px !important;
min-width: 44px;
max-width: 220px;
padding: var(--mui-s1) var(--mui-s3) !important;
box-shadow: var(--mui-shadow-soft);
transition: transform .25s var(--mui-ease), box-shadow .25s var(--mui-ease);
}
header.natura-map-header .header-brand-logo:hover {
transform: translateY(-1px);
box-shadow: var(--mui-shadow-hover);
}
/* center nav */
header.natura-map-header .header-nav {
gap: 2px;
}
header.natura-map-header .header-nav-item {
gap: var(--mui-s2);
padding: 5px var(--mui-s3) 5px 5px;
border-radius: var(--mui-r-pill);
border: 1px solid transparent;
transition: background .25s var(--mui-ease), border-color .25s var(--mui-ease),
box-shadow .25s var(--mui-ease), transform .15s var(--mui-ease);
}
/* normalise the oversized 18px nav text from the inline partial style */
header.natura-map-header .header-nav-item button,
header.natura-map-header .tabChoicep2Extented {
font-size: var(--mui-fs-nav) !important;
font-weight: 600;
letter-spacing: .1px;
line-height: 1.1 !important;
transition: color .2s var(--mui-ease);
}
/* visible hover/active on a LIGHT pill (old rule used white@30% -> invisible) */
header.natura-map-header .header-nav-item:hover {
background: var(--mui-blue-soft);
border-color: rgba(0, 99, 155, 0.12);
transform: translateY(-1px);
}
header.natura-map-header .header-nav-item.active {
background: linear-gradient(135deg, rgba(0, 99, 155, 0.14) 0%, rgba(0, 170, 125, 0.14) 100%);
border-color: rgba(0, 99, 155, 0.20);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
/* round icon discs — one size everywhere */
header.natura-map-header .header-nav-icon {
width: var(--mui-icon);
height: var(--mui-icon);
background: #fff;
box-shadow: var(--mui-shadow-soft);
transition: transform .2s var(--mui-ease);
flex: 0 0 auto;
}
header.natura-map-header .header-nav-icon img {
height: 16px !important;
}
header.natura-map-header .header-nav-item:hover .header-nav-icon,
header.natura-map-header .header-nav-item.active .header-nav-icon {
transform: scale(1.06);
}
/* ---- right-side action cluster ---- */
header.natura-map-header .header-actions {
gap: var(--mui-s2);
}
/* unify every action affordance into the same glass chip & height */
header.natura-map-header .header-actions > div[style*="border-radius:50px"],
header.natura-map-header .header-actions .header-nav-icon,
header.natura-map-header .header-actions .user-containerp2,
header.natura-map-header .header-actions .simple-ContainerNoBorder {
height: 36px !important;
min-width: 36px;
opacity: 1 !important;
background: var(--mui-glass-bg-strong) !important;
backdrop-filter: var(--mui-glass-blur);
-webkit-backdrop-filter: var(--mui-glass-blur);
border: 1px solid rgba(255, 255, 255, 0.6) !important;
box-shadow: var(--mui-shadow-soft);
transition: transform .2s var(--mui-ease), box-shadow .2s var(--mui-ease);
}
header.natura-map-header .header-actions > div[style*="border-radius:50px"] { width: auto; }
header.natura-map-header .header-actions .header-nav-icon { width: 36px !important; height: 36px !important; }
header.natura-map-header .header-actions > div[style*="border-radius:50px"]:hover,
header.natura-map-header .header-actions .header-nav-icon:hover,
header.natura-map-header .header-actions .user-containerp2:hover,
header.natura-map-header .header-actions .simple-ContainerNoBorder:hover {
transform: translateY(-1px);
box-shadow: var(--mui-shadow-hover);
}
header.natura-map-header #logonTimer {
font-size: var(--mui-fs-body);
font-weight: 700;
color: var(--mui-blue);
font-variant-numeric: tabular-nums;
}
/* notification dot */
header.natura-map-header #notificationBellContainer.hasNotification::after {
content: "";
position: absolute;
top: 3px; right: 3px;
width: 9px; height: 9px;
border-radius: 50%;
background: #ff4d4f;
border: 2px solid #fff;
}
header.natura-map-header .user-containerp2 {
display: flex;
align-items: center;
padding: 0 var(--mui-s2) 0 var(--mui-s1);
border-radius: var(--mui-r-pill);
cursor: pointer;
}
header.natura-map-header .user-containerp2 img:first-child { height: 28px !important; }
header.natura-map-header .header-actions .obs_lang {
transition: transform .2s var(--mui-ease);
border-radius: 4px;
}
header.natura-map-header .header-actions .obs_lang:hover { transform: scale(1.08); }
/* glass dropdowns / popovers spawned from the header & page */
.notificationsWindowP2 {
background: var(--mui-glass-bg-strong) !important;
backdrop-filter: var(--mui-glass-blur);
-webkit-backdrop-filter: var(--mui-glass-blur);
border: var(--mui-glass-border) !important;
box-shadow: var(--mui-shadow) !important;
border-radius: var(--mui-r-card) !important;
}
/* ===========================================================================
19) USER CHIP (button) + USER MENU (dropdown) (v5)
=========================================================================== */
/* the chip in the (light) header bar */
.obs_topp2 .user-containerp2 {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 3px 9px 3px 4px;
border-radius: 999px;
background: rgba(16, 42, 67, 0.04);
cursor: pointer;
transition: background .2s var(--mui-ease), box-shadow .2s var(--mui-ease);
}
.obs_topp2 .user-containerp2:hover {
background: rgba(0, 99, 155, 0.08);
box-shadow: var(--mui-shadow-soft);
}
.mui-uchip-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--mui-grad-brand);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
letter-spacing: .3px;
}
.mui-uchip-caret { color: var(--mui-ink-soft); flex: 0 0 auto; }
/* the dropdown */
.userMenu {
position: fixed !important;
top: 74px !important;
right: 22px !important;
left: auto !important;
width: 268px !important;
padding: 8px !important;
background: #fff !important;
border: 1px solid var(--mui-line) !important;
border-radius: 16px !important;
box-shadow: 0 24px 60px rgba(16, 42, 67, 0.24) !important;
z-index: 4000 !important;
}
/* profile header (name + email row) */
.userMenu .row.pb-2 {
display: flex !important;
align-items: center;
padding: 8px 8px 12px !important;
margin: 0 !important;
}
.userMenu .row.pb-2 .col-4 { display: none !important; }
.userMenu .row.pb-2 .col-8 { padding: 0 !important; max-width: none !important; flex: 1 1 auto !important; }
.userMenu .row.pb-2 [style*="font-size:90%"] { font-size: 14px !important; font-weight: 700 !important; color: var(--mui-ink) !important; }
.userMenu .row.pb-2 [style*="font-size:80%"] { font-size: 12px !important; color: var(--mui-ink-soft) !important; margin-top: 2px; }
/* divider */
.userMenu .row[style*="height:1px"] {
background: transparent !important;
height: auto !important;
border-top: 1px solid var(--mui-line) !important;
margin: 4px 6px 8px !important;
}
/* menu items (rows containing a link) */
.userMenu .row:has(a.usermenutext) {
display: flex !important;
align-items: center;
margin: 2px 0 !important;
border-radius: 10px;
cursor: pointer;
transition: background .15s var(--mui-ease);
}
.userMenu .row:has(a.usermenutext):hover { background: var(--mui-blue-soft); }
.userMenu .row:has(a.usermenutext) .col-4 {
flex: 0 0 auto !important;
width: 42px !important;
max-width: 42px !important;
display: flex; align-items: center; justify-content: center;
padding: 9px 0 !important;
}
.userMenu .row:has(a.usermenutext) .col-8 {
flex: 1 1 auto !important;
max-width: none !important;
padding: 9px 4px !important;
}
.userMenu .usermenuicon { height: 18px !important; width: 18px !important; }
.userMenu a.usermenutext,
.userMenu span.usermenutext {
color: var(--mui-ink) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* sign-out item -> red */
.userMenu .row:has(#signOut):hover { background: rgba(226, 59, 59, 0.08); }
.userMenu .row:has(#signOut) span.usermenutext { color: #e23b3b !important; }
/* ===========================================================================
2) SUBMISSIONS CARD (glassmorphism)
=========================================================================== */
.modern-submissions {
background: var(--mui-glass-bg) !important;
backdrop-filter: var(--mui-glass-blur) !important;
-webkit-backdrop-filter: var(--mui-glass-blur) !important;
border: var(--mui-glass-border) !important;
border-radius: var(--mui-r-card) !important;
box-shadow: var(--mui-shadow), var(--mui-glass-inset) !important;
padding: var(--mui-s5) var(--mui-s6) var(--mui-s6) !important;
color: var(--mui-ink);
}
/* ---- status filter counters: grouped, equal pills ---- */
.modern-submissions .documentStatusUnderReview,
.modern-submissions .documentStatusSubmitted,
.modern-submissions .documentStatusClarification,
.modern-submissions .documentStatusVerified,
.modern-submissions .documentStatusRejected {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 var(--mui-s3) !important;
margin-left: 6px;
border-radius: var(--mui-r-pill) !important;
font-size: var(--mui-fs-chip);
font-weight: 600;
line-height: 1;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: var(--mui-shadow-soft);
transition: transform .15s var(--mui-ease), box-shadow .2s var(--mui-ease), filter .2s var(--mui-ease);
}
.modern-submissions .documentStatusUnderReview:hover,
.modern-submissions .documentStatusSubmitted:hover,
.modern-submissions .documentStatusClarification:hover,
.modern-submissions .documentStatusVerified:hover,
.modern-submissions .documentStatusRejected:hover {
transform: translateY(-1px);
box-shadow: var(--mui-shadow-hover);
filter: brightness(0.99);
}
.modern-submissions .fa-eraser {
color: var(--mui-ink-soft);
padding: 7px;
border-radius: var(--mui-r-pill);
transition: background .2s var(--mui-ease), color .2s var(--mui-ease);
}
.modern-submissions .fa-eraser:hover {
background: var(--mui-blue-soft);
color: var(--mui-blue);
}
/* ---- category tabs ---- */
.modern-submissions .nav-tabs {
border-bottom: 1px solid var(--mui-line);
gap: var(--mui-s1);
margin-top: var(--mui-s4);
margin-bottom: var(--mui-s2);
}
.modern-submissions .nav-tabs .nav-link {
border: none !important;
border-radius: var(--mui-r-ctl) var(--mui-r-ctl) 0 0;
color: var(--mui-ink-soft);
font-weight: 600;
font-size: var(--mui-fs-body);
padding: var(--mui-s2) var(--mui-s4);
margin-bottom: -1px;
background: transparent;
transition: color .2s var(--mui-ease), background .2s var(--mui-ease);
}
.modern-submissions .nav-tabs .nav-link:hover {
color: var(--mui-blue);
background: var(--mui-blue-soft);
}
.modern-submissions .nav-tabs .nav-link.active {
color: var(--mui-blue) !important;
background: transparent;
border-bottom: 3px solid var(--mui-blue) !important;
}
/* ---- column header row ---- */
.modern-submissions .Tableheader {
color: var(--mui-ink-soft) !important;
text-transform: uppercase;
font-size: var(--mui-fs-eyebrow);
font-weight: 700;
letter-spacing: .6px;
padding-top: var(--mui-s3);
padding-bottom: var(--mui-s3);
border-bottom: 1px solid var(--mui-line);
}
.modern-submissions .sortButton {
color: var(--mui-ink-soft) !important;
text-transform: uppercase;
font-size: var(--mui-fs-eyebrow);
font-weight: 700;
letter-spacing: .6px;
}
.modern-submissions .sortButton:hover { color: var(--mui-blue) !important; }
/* ---- year accordion header: glass bar + branded pill ---- */
.modern-submissions .accordion {
background: transparent !important;
margin-bottom: var(--mui-s3);
}
.modern-submissions .accordion-header .row {
align-items: center;
background: rgba(255, 255, 255, 0.92);
/* No backdrop-filter here on purpose: this element repeats down the page, and a blurred
backdrop must be re-sampled per element on every scroll frame — with one per row that
overruns the compositor and the page visibly flickers while scrolling. The background
below is opaque enough to read the same against the page. Keep blur for single
floating surfaces (navbar, modals, dropdowns), never for list items. */
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--mui-r-ctl);
padding: var(--mui-s1) var(--mui-s2) !important;
margin: 0 0 var(--mui-s2) 0 !important;
box-shadow: var(--mui-shadow-soft);
}
.modern-submissions .p2DashboardYearLabel {
background: linear-gradient(135deg, var(--mui-blue) 0%, var(--mui-green) 100%) !important;
color: #fff !important;
padding: var(--mui-s1) var(--mui-s4) !important;
border-radius: var(--mui-r-pill) !important;
font-size: var(--mui-fs-body) !important;
letter-spacing: .3px;
box-shadow: var(--mui-shadow-soft);
}
.modern-submissions .accordion-button {
background: transparent !important;
box-shadow: none !important;
padding: var(--mui-s2) var(--mui-s1);
}
.modern-submissions .accordion-button:focus { box-shadow: none !important; }
/* open / closed pills */
.modern-submissions .button-white-linear,
.modern-submissions .form-switch .fontsize80 { font-size: var(--mui-fs-badge) !important; }
/* the year badge ("RY2025") sits in a fixed 1/12-width column, but its own
padding makes it render wider than that column — it was overlapping the
"open/closed for submissions" pill right next to it. Let the badge size to
its own content instead of a rigid Bootstrap column, and force a real gap
before whatever follows. */
.modern-submissions .accordion-header .row > [class^="col-"]:first-child {
flex: 0 0 auto;
width: auto;
max-width: none;
}
.modern-submissions .accordion-header .row > [class^="col-"]:first-child + [class^="col-"] {
flex: 1 1 auto;
width: auto;
max-width: none;
margin-left: var(--mui-s2);
display: flex;
flex-wrap: wrap;
row-gap: 6px;
}
/* ---- data rows ---- */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] {
border-radius: var(--mui-r-ctl);
border-bottom: 1px solid var(--mui-line);
padding-top: var(--mui-s3) !important;
padding-bottom: var(--mui-s3) !important;
transition: background .18s var(--mui-ease), box-shadow .18s var(--mui-ease);
align-items: center;
font-size: var(--mui-fs-body);
}
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"]:hover {
background: rgba(0, 99, 155, 0.045);
box-shadow: inset 3px 0 0 var(--mui-green);
}
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] .fontsize70 {
font-size: var(--mui-fs-badge) !important;
color: var(--mui-ink-soft);
}
/* the OFYPEKA row (.submissionsBodyContainerAdmin, same markup for admin AND
user roles) lays these cells out with `display:grid`, so flex/width fixes
here do nothing — sizing is controlled by that grid's own rules further
below (search .submissionsBodyContainerAdmin). Long unbreakable tokens
(an email address, a submission id) in the primary-tier cells had no wrap
fallback and painted straight over the next grid column; see the
overflow-wrap fix and the small-screen stacking breakpoint there. */
/* smaller screens: the accordion header's badge+pill can still wrap onto
their own line once the row gets tight. */
@media (max-width: 992px) {
.modern-submissions .accordion-header .row > [class^="col-"]:first-child + [class^="col-"] {
flex-basis: 100%;
margin-left: 0;
margin-top: 8px;
}
}
/* company button */
.modern-submissions .companyDetailsButton {
border-color: var(--mui-line) !important;
border-radius: var(--mui-r-ctl) !important;
background: rgba(255, 255, 255, 0.7) !important;
padding: 6px var(--mui-s3);
font-size: var(--mui-fs-body);
color: var(--mui-ink);
transition: border-color .2s var(--mui-ease), box-shadow .2s var(--mui-ease), transform .15s var(--mui-ease);
}
/* the company/municipality name is the primary identifier of a submission row -> bold, stand out */
.submissionsBodyContainerAdmin .row[class*="pt-2"] .companyDetailsButton {
font-weight: 700;
text-align: left;
}
.modern-submissions .companyDetailsButton:hover {
border-color: var(--mui-blue) !important;
box-shadow: var(--mui-shadow-soft);
transform: translateY(-1px);
}
/* ---- per-row status badges ---- */
.modern-submissions .tableCellNoBorder [class*="documentStatus"],
.modern-submissions .tableCellNoBorder [class*="colors"],
.modern-submissions .tableCellNoBorder [class*="ESGStatus"] {
display: inline-block;
padding: var(--mui-s1) var(--mui-s3) !important;
border-radius: var(--mui-r-pill) !important;
font-size: var(--mui-fs-badge);
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
}
/* ---- action buttons in the Ενέργεια column ---- */
.modern-submissions .tableCellColumn {
flex-direction: column;
gap: var(--mui-s2);
padding: 0 var(--mui-s2) !important;
}
.modern-submissions .tableCellColumn .esgdefaultbutton,
.modern-submissions .tableCellColumn .esgmainbutton,
.modern-submissions .tableCellColumn a.esgmainbutton {
-webkit-text-fill-color: initial !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: var(--mui-blue) !important;
background: var(--mui-blue-soft) !important;
border: 1px solid rgba(0, 99, 155, 0.18) !important;
border-radius: var(--mui-r-ctl) !important;
box-shadow: none !important;
width: 100% !important;
min-width: 0 !important;
height: var(--mui-control-h) !important;
min-height: var(--mui-control-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 var(--mui-s3) !important;
font-size: var(--mui-fs-body) !important;
font-weight: 600;
line-height: 1.1;
text-decoration: none;
transition: background .2s var(--mui-ease), border-color .2s var(--mui-ease),
transform .15s var(--mui-ease), box-shadow .2s var(--mui-ease);
}
.modern-submissions .tableCellColumn .esgdefaultbutton img,
.modern-submissions .tableCellColumn .esgmainbutton img { height: 16px !important; }
.modern-submissions .tableCellColumn .esgdefaultbutton:hover,
.modern-submissions .tableCellColumn .esgmainbutton:hover,
.modern-submissions .tableCellColumn a.esgmainbutton:hover {
background: var(--mui-blue-soft-2) !important;
border-color: var(--mui-blue) !important;
transform: translateY(-1px);
box-shadow: var(--mui-shadow-soft) !important;
}
/* green emphasis for report / send links */
.modern-submissions .tableCellColumn a.esgmainbutton {
color: var(--mui-green) !important;
background: var(--mui-green-soft) !important;
border-color: rgba(0, 170, 125, 0.22) !important;
}
.modern-submissions .tableCellColumn a.esgmainbutton:hover {
background: rgba(0, 170, 125, 0.18) !important;
border-color: var(--mui-green) !important;
}
/* ---- unified inline row actions: labeled primary + compact icon-only secondaries ---- */
.modern-submissions .tableCellColumn .mui-act-btn { gap: 7px; }
.modern-submissions .tableCellColumn .mui-act-btn .mui-act-ic { flex: 0 0 auto; }
/* secondary actions = compact icon tiles with a tiny caption beneath, sharing one short row
under the primary. Every action stays visible/labeled without wrapping or adding height.
The full description is still on hover (title=). */
.submissionsBodyContainerAdmin .tableCellColumn .mui-act-btn:not(.mui-act-primary) {
flex: 1 1 0;
min-width: 0;
flex-direction: column;
justify-content: center;
gap: 3px !important;
padding: 6px 4px !important;
min-height: 44px;
line-height: 1;
}
.submissionsBodyContainerAdmin .tableCellColumn .mui-act-btn:not(.mui-act-primary) .mui-act-ic { width: 17px; height: 17px; }
.submissionsBodyContainerAdmin .tableCellColumn .mui-act-btn:not(.mui-act-primary) > span {
font-size: 9px;
font-weight: 600;
letter-spacing: -.2px;
line-height: 1;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* primary (View / Audit / Resume): solid, emphasised, spans the full action grid */
.modern-submissions .tableCellColumn .mui-act-primary {
color: #fff !important;
background: var(--mui-blue) !important;
border-color: var(--mui-blue) !important;
box-shadow: 0 1px 3px rgba(0, 99, 155, 0.18) !important;
}
.modern-submissions .tableCellColumn .mui-act-primary:hover {
color: #fff !important;
background: #084d72 !important;
border-color: #084d72 !important;
transform: translateY(-1px);
}
/* verify: positive / green accent */
.modern-submissions .tableCellColumn .mui-act-verify {
color: var(--mui-green) !important;
background: var(--mui-green-soft) !important;
border-color: rgba(0, 170, 125, 0.22) !important;
}
.modern-submissions .tableCellColumn .mui-act-verify:hover {
background: rgba(0, 170, 125, 0.18) !important;
border-color: var(--mui-green) !important;
}
/* span the full width of the 2-up admin action grid */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn > .mui-act-span { grid-column: 1 / -1; }
/* ---- combined per-row action control: sleek split button (primary + ⋮ more) ---- */
/* one cohesive split pill: primary action + ⋮ kebab as its right half */
.modern-submissions .mui-action-cell {
display: inline-flex;
align-items: stretch;
width: 100%;
max-width: 230px;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(0, 99, 155, 0.18);
overflow: hidden;
}
/* inside the admin grid the actions column is a 2-up grid — let the split button span it */
.submissionsBodyContainerAdmin .tableCellColumn .mui-action-cell {
grid-column: 1 / -1;
max-width: none;
}
.modern-submissions .mui-action-cell:empty { display: none; box-shadow: none; }
/* primary action = left segment, grows to fill, square inner (right) corners */
.submissionsBodyContainerAdmin .tableCellColumn .mui-action-cell .esgdefaultbutton,
.submissionsBodyContainerAdmin .tableCellColumn .mui-action-cell .esgmainbutton,
.submissionsBodyContainerAdmin .tableCellColumn .mui-action-cell a.esgmainbutton {
flex: 1 1 auto;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* ⋮ "more" toggle — the right half of the pill, sharing the primary's blue */
.modern-submissions .mui-action-cell .mui-action-dd {
display: flex !important; /* beat Bootstrap .d-inline so the kebab can stretch */
align-items: stretch;
flex: 0 0 auto;
}
.modern-submissions .mui-action-more {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
align-self: stretch;
width: 40px;
padding: 0;
border: none;
background: var(--mui-blue);
color: #fff;
cursor: pointer;
position: relative;
transition: background .2s var(--mui-ease);
}
.modern-submissions .mui-action-more svg { display: block; opacity: .92; }
.modern-submissions .mui-action-more:hover,
.modern-submissions .mui-action-more[aria-expanded="true"] { background: #084d72; }
.modern-submissions .mui-action-more:hover svg { opacity: 1; }
/* hairline divider between the two halves */
.modern-submissions .mui-action-cell .mui-action-more::before {
content: "";
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 1px;
background: rgba(255, 255, 255, 0.28);
}
/* alert (missing signed report): a small amber dot, not a clashing orange box */
.modern-submissions .mui-action-more-alert::after {
content: "";
position: absolute;
top: 5px; right: 7px;
width: 7px; height: 7px;
border-radius: 50%;
background: #f6a821;
box-shadow: 0 0 0 2px var(--mui-blue);
}
/* no secondary menu -> the primary fills and rounds both ends */
.modern-submissions .mui-action-cell:not(:has(.mui-action-dd)) .esgdefaultbutton,
.modern-submissions .mui-action-cell:not(:has(.mui-action-dd)) .esgmainbutton,
.modern-submissions .mui-action-cell:not(:has(.mui-action-dd)) a.esgmainbutton {
border-radius: 999px !important;
}
/* ---- sleek action dropdown menu ---------------------------------------- */
.mui-action-menu.dropdown-menu {
min-width: 226px !important;
border: 1px solid var(--mui-line) !important;
border-radius: 14px !important;
box-shadow: 0 12px 34px rgba(20, 45, 70, .18), 0 2px 8px rgba(20, 45, 70, .08) !important;
padding: 6px !important;
margin: 0 !important;
background: #fff !important;
overflow: hidden;
}
/* when open we lift the menu out of the clipping scroll container onto */
.mui-action-menu.mui-action-menu--floating {
position: fixed !important;
z-index: 4000 !important;
animation: muiActionMenuIn .13s var(--mui-ease);
}
@keyframes muiActionMenuIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mui-action-menu li { list-style: none; }
.mui-action-menu .mui-action-menu-head {
padding: 4px 10px 7px;
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #93a1b0;
border-bottom: 1px solid rgba(20, 45, 70, .07);
}
/* every menu action is a clean icon + label row */
.mui-action-menu .mui-action-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 11px;
border: none;
border-radius: 9px;
background: transparent;
color: #44525f;
font-size: 13.5px;
font-weight: 600;
line-height: 1.2;
text-align: left;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background .14s var(--mui-ease), color .14s var(--mui-ease);
}
.mui-action-menu .mui-action-item > span { flex: 1 1 auto; }
.mui-action-menu .mui-action-item .mui-action-ic {
flex: 0 0 auto;
color: #8595a4;
transition: color .14s var(--mui-ease);
}
.mui-action-menu .mui-action-item:hover {
background: var(--mui-blue-soft);
color: var(--mui-blue);
}
.mui-action-menu .mui-action-item:hover .mui-action-ic { color: var(--mui-blue); }
.mui-action-menu .mui-action-item-danger:hover {
background: rgba(232, 84, 47, .09);
color: #d9482a;
}
.mui-action-menu .mui-action-item-danger:hover .mui-action-ic { color: #d9482a; }
/* upload sub-panel */
.mui-action-menu .mui-action-upload { padding: 2px; }
.mui-action-menu .mui-action-upload-head {
padding: 3px 9px 5px;
font-size: 11px;
font-weight: 700;
color: #6b7885;
}
.mui-action-menu .mui-action-upload-body {
border: 1px solid rgba(20, 45, 70, .10);
border-radius: 10px;
padding: 6px;
background: #f7f9fb;
}
.mui-action-menu .mui-action-upload-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 1px 5px 5px;
}
.mui-action-menu .mui-action-upload-lbl { font-size: 12px; font-weight: 600; color: #44525f; }
.mui-action-menu .mui-action-upload-missing { font-size: 11px; font-weight: 700; color: #d9482a; }
.mui-action-menu .mui-action-upload-body .mui-action-item { background: #fff; }
.mui-action-menu .mui-action-upload-body .mui-action-item:hover { background: var(--mui-blue-soft); }
/* form controls in the table */
.modern-submissions .form-switch .form-check-input { cursor: pointer; }
.modern-submissions input[type="date"].form-control {
border-radius: var(--mui-r-ctl);
border: 1px solid var(--mui-line);
height: var(--mui-control-h);
font-size: var(--mui-fs-body) !important;
}
/* ===========================================================================
2b) SPACING / TYPOGRAPHY REFINEMENTS (v2.1)
tighten rhythm, fix crammed headers + oversized row text, trim dead space
=========================================================================== */
/* column headers: smaller, calmer letter-spacing, single tidy line, centered */
.modern-submissions .Tableheader,
.modern-submissions .sortButton {
font-size: 10px !important;
letter-spacing: .2px !important;
line-height: 1.25 !important;
}
.modern-submissions .Tableheader {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: var(--mui-s2) !important;
padding-bottom: var(--mui-s2) !important;
padding-right: 6px !important;
}
.modern-submissions .sortButton { text-align: center; }
/* normalise ALL row cell text to one body size (kills the "huge" titles) */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] > div {
font-size: var(--mui-fs-body);
line-height: 1.45;
}
/* submission + report-title cells: readable, not shouty */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] > .col-1,
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] > .col-2 {
font-weight: 500;
color: var(--mui-ink);
}
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] b {
font-weight: 700;
}
/* tighter, even row rhythm */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] {
padding-top: var(--mui-s3) !important;
padding-bottom: var(--mui-s3) !important;
margin: 0 !important;
}
/* trim dead vertical space between / inside year blocks */
.modern-submissions .accordion { margin-bottom: var(--mui-s2) !important; }
.modern-submissions .accordion-collapse > div { padding-top: 0 !important; }
.modern-submissions .accordion-collapse > div:empty,
.modern-submissions .accordion-collapse .row:empty { display: none !important; }
.modern-submissions .tab-content .tab-pane { padding-top: var(--mui-s3) !important; }
/* the cert-hash / KPI scope cells are dense data -> make them monospace-ish & small */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] > div:nth-last-child(2),
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] .tableCellNoBorder {
font-size: var(--mui-fs-badge);
}
/* ===========================================================================
4) COMPACT TOP ZONE (v2.2)
Trim the dead space between the navbar and the submissions table.
Scoped with :has(.modern-submissions) so ONLY the submissions page is
affected, and nothing is hidden (a User's entity data still renders, tighter).
=========================================================================== */
/* the stacked wrapper rows above the card (empty admin EntityData wrapper,
the title+search toolbar, the description row) — kill top padding, trim bottom */
.dashboard-container:has(.modern-submissions) > .col-12 > .row {
padding-top: 0 !important;
padding-bottom: var(--mui-s2) !important;
margin-bottom: 0 !important;
}
/* the submissions row itself should hug the toolbar */
.dashboard-container:has(.modern-submissions) > .col-12 > .row:last-child {
padding-bottom: 0 !important;
}
/* description line under the toolbar: compact + muted */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .grayText {
font-size: var(--mui-fs-body);
line-height: 1.4;
}
/* card breathes less at the very top now that the zone above is tighter */
.modern-submissions {
padding-top: var(--mui-s3) !important;
margin-top: var(--mui-s2);
}
/* status-counter row + tabs sit closer to the card top */
.modern-submissions > .row:first-child .pt-2,
.modern-submissions > .row > .col-12 > .row.pt-2 {
padding-top: 0 !important;
}
.modern-submissions .nav-tabs {
margin-top: var(--mui-s2);
}
/* the search / "save table" toolbar controls: consistent height & alignment */
.dashboard-container:has(.modern-submissions) .dashboard-search-text-unselected-border {
height: var(--mui-control-h);
border-radius: var(--mui-r-ctl);
border: 1px solid var(--mui-line);
padding: 0 var(--mui-s3);
}
.dashboard-container:has(.modern-submissions) .p2QuickFilterButton {
height: var(--mui-control-h);
display: inline-flex;
align-items: center;
border-radius: var(--mui-r-ctl);
}
/* ===========================================================================
5) MAJOR REDESIGN (v3) — adopt the gradient-glass / card language
=========================================================================== */
:root {
--mui-grad-nav: linear-gradient(95deg, #1f6fb2 0%, #1aa3b5 52%, #2fd6a6 100%);
--mui-grad-brand: linear-gradient(135deg, #00639B 0%, #00AA7D 100%);
--mui-canvas: linear-gradient(180deg, #eaf2fb 0%, #f5f9fc 38%, #eafaf4 100%);
}
/* ---- soft gradient canvas behind everything (scoped to this page) ---- */
body:has(.modern-submissions) { background: var(--mui-canvas) !important; }
body:has(.modern-submissions) .dashboard-container { background: transparent !important; }
/* ---- NAVBAR -> vibrant gradient glass (overlay bypasses the inline bg) ---- */
header.natura-map-header {
overflow: visible;
isolation: isolate;
}
header.natura-map-header::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--mui-grad-nav);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
z-index: 0;
pointer-events: none;
}
header.natura-map-header > * { position: relative; z-index: 1; }
/* nav items: white text, glass hover/active pills on the gradient */
header.natura-map-header .header-nav-item button,
header.natura-map-header .header-nav-item .tabChoicep2Extented {
color: #ffffff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
header.natura-map-header .header-nav-item:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.28);
}
header.natura-map-header .header-nav-item.active {
background: rgba(255, 255, 255, 0.24);
border-color: rgba(255, 255, 255, 0.45);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ---- PAGE TITLE block: large heading like the reference ---- */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .blueText {
font-size: 26px !important;
font-weight: 800 !important;
color: #1f3344 !important;
letter-spacing: -.3px;
display: flex;
align-items: center;
gap: var(--mui-s3);
}
.dashboard-container:has(.modern-submissions) > .col-12 > .row .blueText img {
height: 34px !important;
padding: 7px;
border-radius: 12px;
background: var(--mui-grad-brand);
box-shadow: 0 6px 16px rgba(0, 99, 155, 0.28);
}
/* subtitle (the description line) reads as a supporting caption */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .grayText {
font-size: 14px;
color: var(--mui-ink-soft);
}
/* ---- the submissions surface becomes the page canvas, not a boxed card ---- */
.modern-submissions {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: var(--mui-s2) var(--mui-s2) var(--mui-s4) !important;
}
/* ---- status counters -> a glass toolbar cluster ---- */
.modern-submissions .documentStatusUnderReview,
.modern-submissions .documentStatusSubmitted,
.modern-submissions .documentStatusClarification,
.modern-submissions .documentStatusVerified,
.modern-submissions .documentStatusRejected {
/* No backdrop-filter here on purpose: this element repeats down the page, and a blurred
backdrop must be re-sampled per element on every scroll frame — with one per row that
overruns the compositor and the page visibly flickers while scrolling. The background
below is opaque enough to read the same against the page. Keep blur for single
floating surfaces (navbar, modals, dropdowns), never for list items. */
}
/* ---- category tabs -> segmented pill control ---- */
.modern-submissions .nav-tabs {
border-bottom: none !important;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: var(--mui-glass-blur);
-webkit-backdrop-filter: var(--mui-glass-blur);
border: var(--mui-glass-border);
border-radius: var(--mui-r-pill);
padding: 5px;
gap: 4px;
display: inline-flex;
box-shadow: var(--mui-shadow-soft);
width: auto;
}
.modern-submissions .nav-tabs .nav-link {
border-radius: var(--mui-r-pill) !important;
margin-bottom: 0 !important;
padding: 8px 20px !important;
}
.modern-submissions .nav-tabs .nav-link.active {
background: var(--mui-grad-brand) !important;
color: #fff !important;
border-bottom: none !important;
box-shadow: 0 6px 16px rgba(0, 99, 155, 0.26);
}
.modern-submissions .nav-tabs .nav-link:hover:not(.active) { background: var(--mui-blue-soft); }
/* branded tabs carry an inline !important background, which kills the background hover above —
filter is never set inline, so it survives any brand colour (darken works on light and dark). */
.modern-submissions .nav-tabs .nav-link.mui-tab-branded { transition: filter .2s var(--mui-ease), box-shadow .2s var(--mui-ease); }
.modern-submissions .nav-tabs .nav-link.mui-tab-branded:hover:not(.active) {
filter: brightness(.9) saturate(1.08);
box-shadow: 0 2px 8px rgba(15, 43, 60, 0.18);
}
/* ---- column header row: lift it onto a subtle strip ---- */
.modern-submissions .Tableheader {
border-bottom: none !important;
}
.modern-submissions > .row .Tableheader:first-child,
.modern-submissions .text-center.Tableheader {
/* keep header readable above the cards */
}
/* ---- YEAR section header -> rounded glass bar (like "2025 · Open") ---- */
.modern-submissions .accordion-header .row {
background: var(--mui-glass-bg-strong) !important;
/* No backdrop-filter here on purpose: this element repeats down the page, and a blurred
backdrop must be re-sampled per element on every scroll frame — with one per row that
overruns the compositor and the page visibly flickers while scrolling. The background
below is opaque enough to read the same against the page. Keep blur for single
floating surfaces (navbar, modals, dropdowns), never for list items. */
border: var(--mui-glass-border) !important;
border-radius: var(--mui-r-card) !important;
padding: var(--mui-s2) var(--mui-s4) !important;
margin-bottom: var(--mui-s3) !important;
box-shadow: var(--mui-shadow-soft) !important;
}
.modern-submissions .p2DashboardYearLabel {
font-size: 15px !important;
padding: 6px 18px !important;
}
/* ---- DATA ROWS -> floating cards ---- */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] {
background: rgba(255, 255, 255, 0.94) !important;
/* No backdrop-filter here on purpose: this element repeats down the page, and a blurred
backdrop must be re-sampled per element on every scroll frame — with one per row that
overruns the compositor and the page visibly flickers while scrolling. The background
below is opaque enough to read the same against the page. Keep blur for single
floating surfaces (navbar, modals, dropdowns), never for list items. */
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: var(--mui-r-card) !important;
box-shadow: var(--mui-shadow-soft) !important;
margin: 0 0 var(--mui-s2) 0 !important;
padding: 11px var(--mui-s4) 11px var(--mui-s4) !important;
overflow: hidden;
position: relative;
}
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"]:hover {
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: var(--mui-shadow) !important;
transform: translateY(-1px);
}
/* the thin server-rendered status sliver -> a rounded status accent on the card */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] > div[style*="position:absolute"][style*="width:3px"] {
width: 5px !important;
left: 0 !important;
border-radius: 0 4px 4px 0;
}
/* ---- KPI scope cell: tabular, labelled ---- */
.modern-submissions .tab-content .accordion-collapse .row[class*="pt-2"] .tableCellNoBorder {
font-variant-numeric: tabular-nums;
}
/* ---- ACTION buttons: keep stacked, add a primary gradient for view ---- */
.modern-submissions .tableCellColumn .esgdefaultbutton {
background: var(--mui-grad-brand) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 12px rgba(0, 99, 155, 0.22) !important;
}
.modern-submissions .tableCellColumn .esgdefaultbutton:hover {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 99, 155, 0.3) !important;
}
/* ---- search / filter toolbar -> glass pills like the reference ---- */
.dashboard-container:has(.modern-submissions) .p2QuickFilterButton,
.dashboard-container:has(.modern-submissions) .dashboard-search-text-unselected-border {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: var(--mui-glass-border) !important;
box-shadow: var(--mui-shadow-soft);
}
/* ===========================================================================
6) CO2 EMISSION DONUT (v3.1) — the signature viz from the reference,
rendered inside the KPIs cell from the Scope 1 / Scope 2 / Total values.
=========================================================================== */
:root {
--mui-s1col: #00AA7D; /* Scope 1 */
--mui-s2col: #F5A623; /* Scope 2 */
}
.modern-submissions .mui-kpi-cell {
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 6px !important;
}
.mui-emission {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
width: 100%;
min-width: 0;
}
/* total emissions headline */
.mui-total {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.mui-total-num {
font-size: 15px;
font-weight: 800;
color: var(--mui-ink);
letter-spacing: -.3px;
line-height: 1;
}
.mui-total-unit {
font-size: 9px;
font-weight: 600;
color: var(--mui-ink-soft);
text-transform: uppercase;
letter-spacing: .3px;
}
/* the "how was this calculated" note used to live only in an invisible title
attribute on the whole cell — nothing on screen hinted it was hoverable.
A small always-visible glyph makes the tooltip discoverable. */
.mui-info-ic {
font-size: 10px;
color: var(--mui-ink-soft);
cursor: help;
opacity: .75;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
margin: -6px;
}
.mui-info-ic:hover { opacity: 1; color: var(--mui-blue); }
/* Custom tooltip, driven by data-tip — the native `title` attribute alone was unreliable here (the
~1s browser delay is easy to lose the hover before it fires, and there's no styling control), so
this renders instantly on hover/focus instead of depending on it. `title` is left in place too, as
a plain-text fallback for anything that reads attributes rather than rendering CSS (e.g. a11y tools). */
.mui-info-ic { position: relative; }
.mui-info-ic::after {
content: attr(data-tip);
position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
background: #0B1220; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.4;
white-space: nowrap; padding: 7px 11px; border-radius: 8px;
box-shadow: 0 14px 30px -12px rgba(16,40,70,.5);
opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
transition: opacity .12s ease, transform .12s ease;
}
.mui-info-ic::before {
content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
border: 5px solid transparent; border-top-color: #0B1220;
opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; transition: opacity .12s ease;
}
.mui-info-ic:hover::after, .mui-info-ic:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mui-info-ic:hover::before, .mui-info-ic:focus-visible::before { opacity: 1; visibility: visible; }
/* stacked proportion bar — scales to any magnitude, tiny scopes stay visible */
.mui-bar {
display: flex;
width: 100%;
height: 7px;
border-radius: 999px;
overflow: hidden;
background: #e6ebf1;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.mui-bar-seg { display: block; height: 100%; }
.mui-bar-s1 { background: var(--mui-s1col); }
.mui-bar-s2 { background: var(--mui-s2col); }
/* scope legend */
.mui-scopes {
width: 100%;
display: flex;
flex-direction: column;
gap: 2px;
}
.mui-scope {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
line-height: 1.25;
color: var(--mui-ink-soft);
white-space: nowrap;
}
.mui-scope .mui-scope-l { flex: 0 0 auto; font-weight: 600; }
.mui-scope b {
margin-left: auto;
color: var(--mui-ink);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.mui-scope i {
font-style: normal;
color: var(--mui-ink-soft);
min-width: 30px;
text-align: right;
}
.mui-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mui-dot-s1 { background: var(--mui-s1col); }
.mui-dot-s2 { background: var(--mui-s2col); }
/* minimal per-submission "recalculate KPIs" affordance, tucked under the scope lines */
.mui-recalc-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 5px;
padding: 1px 2px;
border: 0;
background: transparent;
color: var(--mui-ink-soft);
font-size: 9.5px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .1px;
cursor: pointer;
opacity: .62;
transition: opacity .12s ease, color .12s ease;
}
.mui-recalc-link svg { flex: 0 0 auto; opacity: .9; }
.mui-recalc-link:hover { opacity: 1; color: var(--mui-blue); }
.mui-recalc-link:active { transform: translateY(.5px); }
/* flags a submission whose Scope 1/2/Total was manually corrected via Emissions Reconciliation —
Recalculate silently leaves these numbers untouched, so this needs to be visible, not implicit. */
.mui-override-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin-bottom: 3px;
padding: 1px 6px;
border-radius: 8px;
background: #fff4e0;
color: #9a6400;
font-size: 9px;
font-weight: 700;
letter-spacing: .1px;
line-height: 1.5;
cursor: help;
}
.mui-override-badge svg { flex: 0 0 auto; }
.mui-recalc-link.is-busy { opacity: .5; pointer-events: none; }
.mui-recalc-link.is-busy svg { animation: mui-recalc-spin .8s linear infinite; }
@keyframes mui-recalc-spin { to { transform: rotate(360deg); } }
/* brief highlight of the scope cell after an inline recalc updates its numbers */
.mui-kpi-cell.mui-kpi-flash { animation: mui-kpi-flash-anim .9s ease; }
@keyframes mui-kpi-flash-anim {
0% { background: rgba(15, 138, 126, .18); }
100% { background: transparent; }
}
/* small transient toast for the inline recalc */
.mui-recalc-toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%) translateY(14px);
z-index: 4000;
max-width: 420px;
padding: 9px 16px;
border-radius: 9px;
background: #12303a;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: .1px;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mui-recalc-toast::before {
content: "✓";
margin-right: 8px;
font-weight: 800;
color: #35d0a5;
}
.mui-recalc-toast.err { background: #5a1d1d; }
.mui-recalc-toast.err::before { content: "!"; color: #ff9b9b; }
.mui-recalc-toast.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ===========================================================================
7) TWO-TIER SUBMISSION CARD (v3.2) — admin layout only
Break the cramped 10-column row into: primary tier (type · submission ·
company · status · emissions · actions) + secondary tier (the 3 dates +
certification, as small labelled items). Scoped to .submissionsBodyContainerAdmin
so User / Auditor / Investor views are untouched.
=========================================================================== */
/* the column-header row is redundant once rows become self-labelled cards */
.modern-submissions:has(.submissionsBodyContainerAdmin) .Tableheader { display: none !important; }
/* the card grid */
.submissionsBodyContainerAdmin .row[class*="pt-2"] {
display: grid !important;
grid-template-columns:
minmax(160px, 1.3fr) /* visual 1: company (cell 3, reordered) */
minmax(150px, 1.3fr) /* visual 2: submission (cell 2, reordered) */
minmax(110px, 0.9fr) /* visual 3: report type / year (cell 1) */
minmax(100px, 0.8fr) /* 4 status */
168px /* 5 emissions */
274px; /* 6 actions */
column-gap: 20px;
row-gap: 7px;
align-items: start;
}
/* company name is the primary identifier of a submission -> pull it to the
front of the row, followed by the submission/submitter info, then the
framework/year caption last */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(1) { order: 3; }
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(2) { order: 2; }
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(3) { order: 1; }
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(4) { order: 4; }
/* neutralise bootstrap col widths / paddings inside the grid */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div {
width: auto !important;
max-width: none !important;
flex: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0;
}
/* primary tier (row 1) vertically centered */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(-n+4) { align-self: center; }
/* an unbroken long token (email address, submission id) in these cells had no
wrap fallback and overflowed straight across the grid's column-gap into the
next cell instead of wrapping — this was visible as a submission's name and
email overlapping the neighbouring "report / year" cell. */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(-n+4) {
overflow-wrap: anywhere;
}
/* report type (cell 1) -> muted caption */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(1) {
font-size: 12px;
font-weight: 600;
color: var(--mui-ink-soft);
line-height: 1.35;
text-align: left !important;
}
/* submission (cell 2) -> the card title */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(2) {
font-size: 13.5px;
color: var(--mui-ink);
line-height: 1.4;
text-align: left !important;
}
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(2) b { font-weight: 800; }
/* emissions + actions pinned right, spanning both tiers */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-kpi-cell {
grid-column: 5;
grid-row: 1 / span 2;
align-self: center;
}
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn {
grid-column: 6;
grid-row: 1 / span 2;
align-self: center;
display: flex !important;
flex-direction: row !important; /* override base .tableCellColumn column direction */
flex-wrap: wrap; /* primary on its own row; the compact icon actions flow below it */
gap: 6px;
align-content: center;
justify-content: flex-start;
min-width: 0;
overflow: hidden;
}
/* the primary action + the attachment chip take a full row of their own */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn > .mui-act-span,
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn > [id$="_preview"] {
flex: 0 0 100%;
}
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn > * {
max-width: 100% !important;
margin: 0 !important;
min-width: 0;
}
/* primary + preview fill their row; every other action is a compact square icon button */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn > .mui-act-span,
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn > [id$="_preview"] {
width: 100% !important;
}
/* action buttons: roomy single-line pills in the single-column action list */
.submissionsBodyContainerAdmin .tableCellColumn .esgdefaultbutton,
.submissionsBodyContainerAdmin .tableCellColumn .esgmainbutton,
.submissionsBodyContainerAdmin .tableCellColumn a.esgmainbutton {
height: auto !important;
min-height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
line-height: 1.2;
padding: 8px 13px !important;
}
/* report attachment -> small, minimal file chip (one box, tiny type icon) */
.submissionsBodyContainerAdmin .tableCellColumn [id$="_preview"] {
display: block !important;
width: 100% !important;
min-width: 0;
}
.submissionsBodyContainerAdmin .tableCellColumn .uploadedFile {
width: 100% !important;
height: 26px !important;
display: flex !important;
align-items: center;
border: 1px solid var(--mui-line) !important;
border-radius: 8px !important;
background-color: #fff;
background-size: auto 14px !important; /* shrink the file-type icon */
background-position: 9px center !important;
transition: background-color .2s var(--mui-ease), border-color .2s var(--mui-ease);
}
.submissionsBodyContainerAdmin .tableCellColumn .uploadedFile:hover {
border-color: var(--mui-blue) !important;
background-color: var(--mui-blue-soft);
}
.submissionsBodyContainerAdmin .tableCellColumn .uploadedFileInner {
position: static !important;
left: 0 !important;
width: auto !important;
flex: 1 1 auto;
min-width: 0;
line-height: 1 !important;
padding: 0 8px 0 30px !important; /* leave room for the icon */
overflow: hidden;
}
.submissionsBodyContainerAdmin .tableCellColumn .uploadedFileInner a {
display: block;
font-size: 10.5px;
font-weight: 600;
color: var(--mui-blue);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* secondary tier (row 2): the labelled meta items */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-meta {
grid-row: 2;
display: flex !important;
flex-direction: column;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 1px;
text-align: left !important;
font-size: 11px !important;
line-height: 1.25;
color: var(--mui-ink);
}
.mui-meta-lbl {
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--mui-ink-soft);
line-height: 1;
}
.submissionsBodyContainerAdmin .mui-meta-cert {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px;
word-break: break-all;
}
.submissionsBodyContainerAdmin .mui-meta-cert .mui-meta-lbl { font-family: inherit; }
/* a hairline separating the two tiers */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-meta {
border-top: 1px solid var(--mui-line);
padding-top: 5px !important;
margin-top: 0 !important;
}
/* the row's minimum width is the sum of its column minmax()/fixed tracks —
160+150+110+100+168+274px plus 5x20px gaps, ~1060px — so anything narrower
than that (a smaller window, a laptop split-screen, a tablet) can't shrink
the grid any further and it overflows. Below that, drop to a single column
and let every cell stack as a readable card instead. */
@media (max-width: 1100px) {
.submissionsBodyContainerAdmin .row[class*="pt-2"] {
grid-template-columns: 1fr !important;
row-gap: 4px;
}
.submissionsBodyContainerAdmin .row[class*="pt-2"] > div:nth-child(-n+4),
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-meta,
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-kpi-cell,
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn {
grid-column: 1 !important;
grid-row: auto !important;
align-self: start !important;
width: 100%;
}
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-meta {
flex-direction: row !important;
justify-content: space-between;
border-top: none;
padding-top: 0 !important;
}
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn {
margin-top: 6px;
}
/* the meta/kpi/action cells rely on the desktop grid's explicit grid-row
to land in the right visual tier and are left at the default order:0,
lower than the primary tier's order:1-4 — stacked in a single column
that default put them ahead of the company/name/status cells they're
meant to follow. Push them after it, in their natural reading order. */
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-meta { order: 5; }
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .mui-kpi-cell { order: 6; }
.submissionsBodyContainerAdmin .row[class*="pt-2"] > .tableCellColumn { order: 7; }
}
/* ---- verifier (Auditor) list: same modern grid + a couple of role-specific touches ---- */
/* Decline is a negative action — set it apart from the neutral-blue action pills (amber caution). */
.submissionsBodyContainerAuditor .tableCellColumn .esgdefaultbutton.mui-decline-btn {
color: #b45309 !important;
background: rgba(245, 158, 11, 0.12) !important;
border: 1px solid rgba(245, 158, 11, 0.30) !important;
}
.submissionsBodyContainerAuditor .tableCellColumn .esgdefaultbutton.mui-decline-btn:hover {
color: #92400e !important;
background: rgba(245, 158, 11, 0.20) !important;
border-color: #f59e0b !important;
}
/* the verifier rarely has a 2nd action, so a single button shouldn't be squeezed to half width */
.submissionsBodyContainerAuditor .row[class*="pt-2"] > .tableCellColumn { grid-template-columns: 1fr; }
/* ===========================================================================
8) ACTION BUTTONS — full redesign (v3.3) admin layout only
One bold primary (View) gradient pill + clean outline/ghost pills for the
rest, with color-coded hover (blue = copy, green = report/send group).
=========================================================================== */
.submissionsBodyContainerAdmin .tableCellColumn .esgdefaultbutton,
.submissionsBodyContainerAdmin .tableCellColumn .esgmainbutton,
.submissionsBodyContainerAdmin .tableCellColumn a.esgmainbutton {
-webkit-text-fill-color: initial !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
width: 100% !important;
min-height: 28px;
height: auto !important;
padding: 4px 11px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 600;
line-height: 1.1;
letter-spacing: .1px;
white-space: normal !important;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: none !important;
transition: transform .18s var(--mui-ease), box-shadow .2s var(--mui-ease),
background .2s var(--mui-ease), border-color .2s var(--mui-ease), color .2s var(--mui-ease);
}
/* PRIMARY — View */
.submissionsBodyContainerAdmin .tableCellColumn .esgdefaultbutton {
background: var(--mui-blue) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 1px 3px rgba(0, 99, 155, 0.18) !important;
}
.submissionsBodyContainerAdmin .tableCellColumn .esgdefaultbutton:hover {
background: var(--mui-blue) !important;
box-shadow: 0 3px 8px rgba(0, 99, 155, 0.22) !important;
}
.submissionsBodyContainerAdmin .tableCellColumn .esgdefaultbutton:active {
background: var(--mui-blue) !important;
box-shadow: 0 1px 3px rgba(0, 99, 155, 0.2) !important;
}
.submissionsBodyContainerAdmin .tableCellColumn .esgdefaultbutton img {
height: 13px !important;
filter: brightness(0) invert(1);
}
/* SECONDARY — copy / report / send : one clean, neutral outline style */
.submissionsBodyContainerAdmin .tableCellColumn .esgmainbutton,
.submissionsBodyContainerAdmin .tableCellColumn a.esgmainbutton {
background: #fff !important;
color: #46535f !important;
border: 1px solid #e1e8ef !important;
}
.submissionsBodyContainerAdmin .tableCellColumn .esgmainbutton:hover,
.submissionsBodyContainerAdmin .tableCellColumn a.esgmainbutton:hover {
background: #f5f8fb !important;
border-color: #c6d2de !important;
color: var(--mui-ink) !important;
transform: translateY(-1px);
box-shadow: 0 3px 9px rgba(16, 42, 67, 0.08) !important;
}
.submissionsBodyContainerAdmin .tableCellColumn .esgmainbutton:active,
.submissionsBodyContainerAdmin .tableCellColumn a.esgmainbutton:active {
transform: translateY(0);
box-shadow: none !important;
background: #eef3f8 !important;
}
/* delete / small icon action stays subtle & circular */
.submissionsBodyContainerAdmin .tableCellColumn .esgsmallbutton {
-webkit-text-fill-color: initial !important;
width: 28px !important;
height: 28px !important;
min-height: 28px;
align-self: center;
border-radius: 999px !important;
background: #fff !important;
border: 1.5px solid var(--mui-line) !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: all .2s var(--mui-ease);
}
.submissionsBodyContainerAdmin .tableCellColumn .esgsmallbutton:hover {
border-color: #e23b3b !important;
background: rgba(226, 59, 59, 0.06) !important;
}
/* ===========================================================================
9) USE THE VERTICAL SPACE (v3.4) — taller list + compact top
=========================================================================== */
/* the list was capped at ~55vh (100vh - 10vh header - 20vh footer - 15vh).
let it run down close to the footer instead of stopping above the wave. */
.submissionsBodyContainerAdmin {
height: calc(100vh - var(--headerHeight) - 178px) !important;
max-height: none !important;
padding-bottom: 10px;
}
/* --- compact top zone --- */
/* page title: smaller + tighter */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .blueText {
font-size: 21px !important;
gap: 10px;
}
.dashboard-container:has(.modern-submissions) > .col-12 > .row .blueText img {
height: 26px !important;
padding: 6px !important;
border-radius: 10px;
}
/* description caption: smaller, tighter */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .grayText {
font-size: 12.5px;
line-height: 1.3;
}
/* card + tabs + counters hug the top */
.modern-submissions {
padding-top: 4px !important;
margin-top: 2px;
}
.modern-submissions .nav-tabs {
margin-top: 6px;
margin-bottom: 6px;
}
.modern-submissions .documentStatusUnderReview,
.modern-submissions .documentStatusSubmitted,
.modern-submissions .documentStatusClarification,
.modern-submissions .documentStatusVerified,
.modern-submissions .documentStatusRejected { height: 26px; }
/* the year accordion header bars: a touch tighter */
.modern-submissions .accordion-header .row {
padding: 6px 14px !important;
margin-bottom: 10px !important;
}
.modern-submissions .accordion { margin-bottom: 6px !important; }
/* the submission cards live in a wrapper with padding-right:2rem, but the year
header bar does not -> inset the header bar by the same 2rem so they align */
.submissionsBodyContainerAdmin .accordion-header .row {
margin-right: 2rem !important;
}
/* ===========================================================================
10) ONE SLEEK SCROLLBAR (v3.5)
Kill the outer page scroll (title/tabs stay fixed) so only the list scrolls,
then style that single scrollbar to be thin, rounded and subtle.
=========================================================================== */
.dashboard-container:has(.modern-submissions) { overflow: hidden !important; }
/* the card carries a `dashboardp2-container` class that adds its OWN scroll —
disable it so the inner list is the only scroll container */
.modern-submissions {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.submissionsBodyContainerAdmin {
overflow-y: auto !important;
scrollbar-width: thin;
scrollbar-color: rgba(0, 99, 155, 0.30) transparent;
}
.submissionsBodyContainerAdmin::-webkit-scrollbar { width: 8px; }
.submissionsBodyContainerAdmin::-webkit-scrollbar-track { background: transparent; }
.submissionsBodyContainerAdmin::-webkit-scrollbar-thumb {
background: rgba(0, 99, 155, 0.26);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background .2s var(--mui-ease);
}
.submissionsBodyContainerAdmin::-webkit-scrollbar-thumb:hover {
background: rgba(0, 99, 155, 0.48);
background-clip: padding-box;
}
/* the right sidebar (Χρήσιμο Υλικό / Ενημερώσεις) lives next to the list, but the
page scroll is killed so its overflow was clipped — give it its own scroll. */
.dashboard-container:has(.modern-submissions) .mui-side-col {
height: calc(100vh - var(--headerHeight) - 178px) !important;
overflow-y: auto !important;
overflow-x: hidden;
padding-right: 5px !important;
scrollbar-width: thin;
scrollbar-color: rgba(0, 99, 155, 0.30) transparent;
}
.dashboard-container:has(.modern-submissions) .mui-side-col::-webkit-scrollbar { width: 8px; }
.dashboard-container:has(.modern-submissions) .mui-side-col::-webkit-scrollbar-track { background: transparent; }
.dashboard-container:has(.modern-submissions) .mui-side-col::-webkit-scrollbar-thumb {
background: rgba(0, 99, 155, 0.26);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background .2s var(--mui-ease);
}
.dashboard-container:has(.modern-submissions) .mui-side-col::-webkit-scrollbar-thumb:hover {
background: rgba(0, 99, 155, 0.48);
background-clip: padding-box;
}
/* ===========================================================================
11) FOOTER POLISH (v3.6) — refined link bar over the wave
=========================================================================== */
/* footer wave removed — no decorative image in the footer on any page */
.bottom-logo-Container,
.bottom-logo-Container-Product1,
.bottom-logo-Container-Product2,
.bottom-logo-Container-white-Product2,
.bottom-logo-Container-custom,
.bottom-logo-Container-animation {
background-image: none !important;
}
/* the wave used to need a tall (20vh) reserved band; with it gone, collapse the
footer to a slim bar so it takes only the space the links need. (modern-ui.css
loads after Observatory.css, so this --footerHeight wins.) */
:root { --footerHeight: 4vh; }
.footer-bottom {
top: 0 !important;
height: var(--footerHeight) !important;
line-height: var(--footerHeight) !important;
padding-top: 0 !important;
}
/* the link row */
.footer-bottom {
padding-left: 2.25rem !important;
}
/* links: kill the uneven Bootstrap pl-4 (it was on every link EXCEPT the
email one) so the uniform spacers become the only, even gap */
.footer-bottom a {
color: #2f5067 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .1px;
text-decoration: none !important;
padding-left: 0 !important;
transition: color .2s var(--mui-ease);
}
.footer-bottom a:hover {
color: var(--mui-blue) !important;
text-decoration: underline;
}
/* "e-Helpdesk:" label */
.footer-bottom span {
color: #5d6f7b !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* ===========================================================================
12) SUPER-FILTER BAR (v3.8) — compact pills + checkbox dropdowns + chips
=========================================================================== */
.mui-filterbar {
position: relative;
z-index: 100; /* above the list (its accordions are confined to their own context) but below modals (1050+) */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 2px 0 12px 0;
padding: 9px 12px;
background: var(--mui-glass-bg-strong);
backdrop-filter: var(--mui-glass-blur);
-webkit-backdrop-filter: var(--mui-glass-blur);
border: var(--mui-glass-border);
border-radius: var(--mui-r-card);
box-shadow: var(--mui-shadow-soft);
}
/* the native multiselects are the form source-of-truth; JS draws the pills */
.mui-filterbar select.mui-filter { display: none !important; }
/* ---- filter pill button ---- */
.mui-filter-field { position: relative; flex: 0 0 auto; }
.mui-filter-pill {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 11px 0 14px;
border: 1px solid var(--mui-line);
border-radius: 999px;
background: #fff;
font-size: 12.5px;
font-weight: 600;
color: var(--mui-ink);
cursor: pointer;
transition: background .15s var(--mui-ease), border-color .15s var(--mui-ease), box-shadow .15s var(--mui-ease);
}
.mui-filter-pill:hover { background: #f5f8fb; border-color: #c6d2de; }
.mui-filter-pill.has-sel { border-color: rgba(0, 99, 155, 0.30); color: var(--mui-blue); }
.mui-filter-field.open .mui-filter-pill {
border-color: var(--mui-blue);
box-shadow: 0 0 0 3px rgba(0, 99, 155, 0.10);
}
.mui-pill-badge {
display: none;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--mui-blue);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.mui-filter-pill.has-sel .mui-pill-badge { display: inline-block; }
.mui-pill-caret { color: var(--mui-ink-soft); font-size: 9px; transition: transform .15s var(--mui-ease); }
.mui-filter-field.open .mui-pill-caret { transform: rotate(180deg); }
/* ---- dropdown panel ---- */
.mui-filter-panel {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 1200;
width: 250px;
background: #fff;
border: 1px solid var(--mui-line);
border-radius: 14px;
box-shadow: var(--mui-shadow);
padding: 8px;
}
.mui-filter-field.open .mui-filter-panel { display: block; }
.mui-panel-search {
width: 100%;
height: 32px;
border: 1.5px solid var(--mui-blue);
border-radius: 9px;
padding: 0 10px 0 30px;
font-size: 12.5px;
color: var(--mui-ink);
margin-bottom: 6px;
outline: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 9px center;
}
.mui-panel-list {
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.mui-panel-opt {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 9px;
border-radius: 9px;
font-size: 12.5px;
color: var(--mui-ink);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-panel-opt:hover { background: var(--mui-blue-soft); }
.mui-panel-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mui-panel-opt input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--mui-blue);
flex: 0 0 auto;
cursor: pointer;
}
.mui-panel-list::-webkit-scrollbar { width: 7px; }
.mui-panel-list::-webkit-scrollbar-thumb { background: rgba(0, 99, 155, 0.22); border-radius: 999px; }
/* ---- selected chips row (below the pills) ---- */
.mui-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 0 0 100%;
order: 99;
}
.mui-filter-chips:empty { display: none; }
.mui-chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 4px 0 11px;
background: var(--mui-blue-soft);
color: var(--mui-blue);
border: 1px solid rgba(0, 99, 155, 0.18);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.mui-chip > span {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mui-chip-x {
border: none;
background: transparent;
color: var(--mui-blue);
cursor: pointer;
font-size: 15px;
line-height: 1;
padding: 0 5px;
border-radius: 999px;
}
.mui-chip-x:hover { background: rgba(0, 99, 155, 0.12); color: #e23b3b; }
/* ---- date / search / sort / clear controls ---- */
.mui-filterbar .mui-filter-date,
.mui-filterbar .mui-filter-search,
.mui-filterbar .mui-filter-sort {
height: 32px;
border: 1px solid var(--mui-line);
border-radius: 999px;
background: #fff;
padding: 0 13px;
font-size: 12.5px;
font-weight: 600;
color: var(--mui-ink);
transition: border-color .2s var(--mui-ease), box-shadow .2s var(--mui-ease);
}
.mui-filterbar .mui-filter-date { padding: 0 10px; color: var(--mui-ink-soft); font-weight: 500; flex: 0 0 auto; }
.mui-filterbar .mui-filter-search { flex: 1 1 150px; min-width: 130px; font-weight: 500; }
.mui-filterbar .mui-filter-sort { flex: 0 0 auto; cursor: pointer; }
.mui-filterbar .mui-filter-date:focus,
.mui-filterbar .mui-filter-search:focus,
.mui-filterbar .mui-filter-sort:focus {
outline: none;
border-color: var(--mui-blue);
box-shadow: 0 0 0 3px rgba(0, 99, 155, 0.10);
}
.mui-filterbar .mui-filter-clear {
height: 32px;
border: none;
background: transparent;
color: var(--mui-ink-soft);
font-size: 12.5px;
font-weight: 600;
padding: 0 12px;
border-radius: 999px;
cursor: pointer;
transition: color .2s var(--mui-ease), background .2s var(--mui-ease);
flex: 0 0 auto;
}
.mui-filterbar .mui-filter-clear:hover { color: #e23b3b; background: rgba(226, 59, 59, 0.06); }
/* ---- export ("Αποθήκευση πίνακα") -> sleek gradient pill + modern menu ---- */
.mui-filterbar .mui-filter-export { flex: 0 0 auto; }
.mui-filterbar .mui-export-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 13px;
border: none;
border-radius: 999px;
background: var(--mui-blue);
color: #fff;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 99, 155, 0.20);
transition: box-shadow .2s var(--mui-ease);
}
.mui-filterbar .mui-export-btn:hover { box-shadow: 0 4px 11px rgba(0, 99, 155, 0.26); }
.mui-filterbar .mui-export-btn .mui-pill-caret { color: rgba(255, 255, 255, 0.85); font-size: 9px; }
.mui-filterbar .mui-export-btn svg { flex: 0 0 auto; }
.mui-export-menu.dropdown-menu {
min-width: 150px;
border: 1px solid var(--mui-line);
border-radius: 12px;
box-shadow: var(--mui-shadow);
padding: 6px;
margin-top: 6px;
}
.mui-export-menu .dropdown-item {
border-radius: 8px;
padding: 7px 12px;
font-size: 12.5px;
font-weight: 600;
color: var(--mui-ink);
cursor: pointer;
}
.mui-export-menu .dropdown-item:hover,
.mui-export-menu .dropdown-item:focus {
background: var(--mui-blue-soft);
color: var(--mui-blue);
}
/* ===========================================================================
13) TOP-ZONE ALIGNMENT + TITLE (v3.9)
=========================================================================== */
/* the card content was inset an extra 8px vs the title -> align them */
.modern-submissions {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* rows + year header carried an extra 2rem right inset -> drop it so they
match the filter-bar width */
.submissionsBodyContainerAdmin .accordion-collapse > div { padding-right: 0 !important; }
.submissionsBodyContainerAdmin .accordion-header .row { margin-right: 0 !important; }
/* nudge the bar's right edge in by the scrollbar width so it lines up with the rows */
.mui-filterbar { margin-right: 8px; }
/* ---- title: Lucide icon tile + roomy text ---- */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .blueText {
font-size: 20px !important;
font-weight: 800 !important;
gap: 12px !important;
align-items: center;
padding-top: 2px;
padding-bottom: 2px;
}
.mui-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 11px;
background: var(--mui-grad-brand);
color: #fff;
box-shadow: 0 6px 16px rgba(0, 99, 155, 0.28);
}
.mui-title-icon svg { display: block; }
.mui-title-text { line-height: 1.2; }
/* no old gradient ![]()
anymore, but neutralise its rule just in case */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .blueText img { display: none !important; }
/* subtitle: a touch of breathing room under the title */
.dashboard-container:has(.modern-submissions) > .col-12 > .row .grayText { margin-top: 3px; }
/* ===========================================================================
14) PER-YEAR EMISSIONS SUMMARY (in the RY header)
=========================================================================== */
.mui-year-emissions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 14px;
padding-right: 8px;
font-size: 12px;
color: var(--mui-ink-soft);
white-space: nowrap;
}
.mui-year-emissions b {
color: var(--mui-ink);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.mui-ye-total { display: inline-flex; align-items: baseline; gap: 3px; }
.mui-ye-total b { font-size: 15px; letter-spacing: -.2px; }
.mui-ye-unit {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
color: var(--mui-ink-soft);
}
.mui-ye-item { display: inline-flex; align-items: center; gap: 5px; }
.mui-ye-item b { margin-left: 2px; }
.mui-ye-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mui-ye-sep { width: 1px; height: 16px; background: var(--mui-line); }
/* ===========================================================================
15) TOP NAV POLISH (v4) — sleek, modern feel
=========================================================================== */
header.natura-map-header .header-top { gap: 10px; padding: 7px 14px; }
/* center nav: clean white-translucent hover/active pills on the gradient */
header.natura-map-header .header-nav { gap: 4px; }
header.natura-map-header .header-nav-item {
gap: 8px;
padding: 5px 14px 5px 6px;
border-radius: 999px;
border: 1px solid transparent;
}
header.natura-map-header .header-nav-item button,
header.natura-map-header .header-nav-item .tabChoicep2Extented {
font-size: 14px !important;
font-weight: 600;
}
header.natura-map-header .header-nav-item:hover {
background: rgba(255, 255, 255, 0.14) !important;
border-color: transparent !important;
transform: none;
}
header.natura-map-header .header-nav-item.active {
background: rgba(255, 255, 255, 0.22) !important;
border-color: rgba(255, 255, 255, 0.30) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
/* icon discs: subtle + consistent */
header.natura-map-header .header-nav-item .header-nav-icon {
width: 28px !important;
height: 28px !important;
background: rgba(255, 255, 255, 0.9) !important;
box-shadow: none !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
header.natura-map-header .header-nav-item.active .header-nav-icon { background: #fff !important; }
/* right-side action cluster: uniform glass chips */
header.natura-map-header .header-actions { gap: 8px; align-items: center; }
header.natura-map-header .header-actions > div[style*="border-radius:50px"],
header.natura-map-header .header-actions .header-nav-icon,
header.natura-map-header .header-actions .simple-ContainerNoBorder {
height: 38px !important;
min-height: 38px;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.94) !important;
box-shadow: var(--mui-shadow-soft) !important;
border: none !important;
opacity: 1 !important;
}
header.natura-map-header .header-actions .header-nav-icon { width: 38px !important; }
header.natura-map-header #logonTimer { font-weight: 700; color: var(--mui-blue); font-size: 12.5px; }
/* user chip: avatar + name + role + caret */
header.natura-map-header .user-containerp2 {
display: inline-flex !important;
align-items: center;
gap: 9px;
height: 38px;
padding: 0 12px 0 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: var(--mui-shadow-soft);
opacity: 1 !important;
}
.mui-user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--mui-grad-brand);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
letter-spacing: .3px;
}
.mui-user-meta {
display: flex;
flex-direction: column;
line-height: 1.15;
text-align: left;
max-width: 150px;
}
.mui-user-name {
font-size: 12.5px;
font-weight: 700;
color: var(--mui-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-user-role {
font-size: 10px;
font-weight: 600;
color: var(--mui-ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-user-caret { color: var(--mui-ink-soft); flex: 0 0 auto; }
/* ===========================================================================
16) ADMIN NAV (the live .tabChoice bar in #tabChoicesContainer) (v4.1)
sleek, centered pill items with a subtle hover pill — matches the reference
=========================================================================== */
#tabChoicesContainer {
display: inline-flex !important;
align-items: center;
gap: 4px;
border: none !important;
background: transparent !important;
overflow: visible !important;
white-space: nowrap;
vertical-align: middle;
pointer-events: auto !important; /* nav clickable; its wrapper is pointer-events:none so the bell/actions underneath stay clickable */
}
#tabChoicesContainer .tabChoice {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 15px !important;
border: 1px solid transparent !important;
border-radius: 999px !important;
background: transparent !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
color: #51606d !important;
cursor: pointer;
transition: background .2s var(--mui-ease), color .2s var(--mui-ease), border-color .2s var(--mui-ease);
}
#tabChoicesContainer .tabChoice span { color: inherit !important; }
#tabChoicesContainer .tabChoice:hover {
background: rgba(0, 99, 155, 0.07) !important;
color: var(--mui-blue) !important;
}
/* active item -> soft brand pill */
#tabChoicesContainer .tabChoice.tabChoiceSelectedp2,
#tabChoicesContainer .tabChoice.tabChoiceSelectedp2 span,
#tabChoicesContainer .tabChoice.frontColor,
#tabChoicesContainer .tabChoice.frontColor span {
color: var(--mui-blue) !important;
}
#tabChoicesContainer .tabChoice.tabChoiceSelectedp2 {
background: rgba(0, 99, 155, 0.10) !important;
border-color: rgba(0, 99, 155, 0.16) !important;
}
/* inline icons inside the nav buttons -> compact (keep their own color) */
#tabChoicesContainer .tabChoice .p2tabmenuicon {
height: 16px !important;
width: auto !important;
padding-right: 0 !important;
}
/* Lucide icon per nav item (inherits the button's text color) */
#tabChoicesContainer .tabChoice .mui-nav-ic {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
#tabChoicesContainer .tabChoice .mui-nav-ic svg { display: block; }
/* ---- "More" overflow dropdown for collapsible nav bars (nav-overflow.js) ---- */
/* The whole .mui-nav-more wrapper is shown/hidden via inline style from JS (display none/inline-flex).
The button is fully self-styled — it deliberately does NOT reuse .tabChoice/.header-nav-item, whose
`display: inline-flex !important` (scoped under the container id) would otherwise pin it visible. */
.mui-nav-more { position: relative; display: none; flex: 0 0 auto; align-items: center; }
.mui-nav-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 36px;
padding: 0 15px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #51606d;
cursor: pointer;
white-space: nowrap;
font-family: inherit;
transition: background .2s var(--mui-ease), color .2s var(--mui-ease);
}
.mui-nav-more-btn:hover { background: rgba(0, 99, 155, 0.07); color: var(--mui-blue); }
.mui-nav-more-btn svg { flex: 0 0 auto; transition: transform .15s ease; }
.mui-nav-more:hover .mui-nav-more-btn svg, .mui-nav-more.is-open .mui-nav-more-btn svg { transform: rotate(180deg); }
.mui-nav-more-menu {
display: none;
flex-direction: column;
gap: 2px;
position: absolute;
top: 100%;
right: 0;
min-width: 220px;
padding: 6px;
margin-top: 2px;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(16, 42, 67, 0.16), 0 2px 8px rgba(16, 42, 67, 0.08);
z-index: 3000;
}
.mui-nav-more:hover .mui-nav-more-menu,
.mui-nav-more.is-open .mui-nav-more-menu {
display: flex;
}
/* items dropped into the menu render as a vertical list instead of horizontal pills */
.mui-nav-more-menu > * {
display: flex !important;
justify-content: flex-start !important;
width: 100%;
white-space: nowrap;
}
/* ---- platform logo in the header (left) ---- */
body:has(.modern-submissions) .obs_topp2 img.simple-ContainerNoBorder,
body:has(.modern-submissions) .obs_topp2 .tableCellNoBorderAlignLeft img[alt="resNovae"] {
height: 46px !important;
max-height: 46px !important;
width: auto !important;
background: transparent !important;
object-fit: contain;
}
/* ===========================================================================
17) SIGN-IN PAGE POLISH (v5) — sleeker/fluid, same layout
Scoped to .login-page-wrapper so nothing else is affected.
=========================================================================== */
/* soft gradient canvas + gentle entrance */
.login-page-wrapper {
background: linear-gradient(135deg, #f3f8fc 0%, #ffffff 46%, #eefaf4 100%) !important;
}
.login-page-wrapper .login-left-content {
animation: muiLoginIn .5s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes muiLoginIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* title + subtitle */
.login-page-wrapper .login-title {
color: var(--mui-blue) !important;
letter-spacing: -.4px;
}
.login-page-wrapper .login-subtitle { color: var(--mui-ink-soft); }
/* inputs: modern, smooth focus ring */
.login-page-wrapper .custom-input {
background: #f4f7fa !important;
border: 1.5px solid #e6edf3 !important;
border-radius: 11px !important;
padding: 0.62rem 1rem !important;
transition: border-color .2s var(--mui-ease), box-shadow .2s var(--mui-ease), background .2s var(--mui-ease) !important;
}
.login-page-wrapper .custom-input:hover { border-color: #d4dee8 !important; }
.login-page-wrapper .custom-input:focus {
background: #fff !important;
border-color: var(--mui-blue) !important;
box-shadow: 0 0 0 4px rgba(0, 99, 155, 0.12) !important;
}
.login-page-wrapper .custom-label { color: var(--mui-ink-soft); font-weight: 600; }
/* primary button: brand gradient pill with a fluid hover */
.login-page-wrapper .btn-secure-login {
background: linear-gradient(135deg, #00639B 0%, #00AA7D 100%) !important;
border-radius: 999px !important;
padding: 0.72rem !important;
box-shadow: 0 8px 20px rgba(0, 99, 155, 0.24) !important;
transition: transform .15s var(--mui-ease), box-shadow .2s var(--mui-ease), filter .2s var(--mui-ease) !important;
}
.login-page-wrapper .btn-secure-login:hover {
background: linear-gradient(135deg, #00639B 0%, #00AA7D 100%) !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(0, 99, 155, 0.30) !important;
filter: brightness(1.04);
}
.login-page-wrapper .btn-secure-login:active { transform: translateY(0); }
/* links */
.login-page-wrapper .forgot-pass-link,
.login-page-wrapper .signup-row a,
.login-page-wrapper .login-inline-footer a {
color: var(--mui-blue) !important;
transition: color .2s var(--mui-ease);
}
.login-page-wrapper .forgot-pass-link:hover,
.login-page-wrapper .signup-row a:hover,
.login-page-wrapper .login-inline-footer a:hover {
color: var(--mui-green) !important;
text-decoration: underline;
}
/* logo + right image panel: a little depth */
.login-page-wrapper .login-logo-img { transition: transform .3s var(--mui-ease); }
.login-page-wrapper .login-right-panel {
box-shadow: 0 18px 46px rgba(16, 42, 67, 0.16);
overflow: hidden;
}
/* password toggle hover */
.login-page-wrapper .password-toggle-btn { transition: color .2s var(--mui-ease); }
.login-page-wrapper .password-toggle-btn:hover { color: var(--mui-blue); }
/* ===========================================================================
18) NOTIFICATIONS PANEL (v5) — redesign + fix (was z-index:3, hidden behind page)
=========================================================================== */
.notificationsWindowP2 {
position: fixed !important;
top: 76px !important;
right: 22px !important;
left: auto !important;
bottom: auto !important;
width: 380px !important;
max-width: calc(100vw - 44px) !important;
height: auto !important;
max-height: 72vh !important;
display: flex;
flex-direction: column;
padding: 0 !important;
background: #fff !important;
border: 1px solid var(--mui-line) !important;
border-radius: 16px !important;
box-shadow: 0 24px 60px rgba(16, 42, 67, 0.24) !important;
z-index: 4000 !important;
overflow: hidden !important;
white-space: normal !important;
transition: none !important;
backdrop-filter: none !important;
}
.notificationsWindowP2.hide { display: none !important; }
.notificationWindowActive {
width: 380px !important;
height: auto !important;
max-height: 72vh !important;
animation: muiNotifIn .22s cubic-bezier(.4, 0, .2, 1) both;
}
.notificationWindowinActive { width: 380px !important; height: auto !important; }
@keyframes muiNotifIn {
from { opacity: 0; transform: translateY(-10px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* header */
.notificationsWindowP2 .mui-notif-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 16px;
border-bottom: 1px solid var(--mui-line);
flex: 0 0 auto;
}
.notificationsWindowP2 .mui-notif-title { font-size: 15px; font-weight: 800; color: var(--mui-ink); display: inline-flex; align-items: center; gap: 8px; }
.notificationsWindowP2 .mui-notif-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px; background: var(--mui-blue); color: #fff;
font-size: 11px; font-weight: 800; line-height: 1;
}
.notificationsWindowP2 .mui-notif-clear {
border: none;
background: transparent;
color: var(--mui-blue);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
padding: 4px 9px;
border-radius: 8px;
transition: background .2s var(--mui-ease);
}
.notificationsWindowP2 .mui-notif-clear:hover { background: var(--mui-blue-soft); }
/* scrollable body */
.notificationsWindowP2 .homeNotificationsContainer {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
}
.notificationsWindowP2 .homeNotificationsContainer::-webkit-scrollbar { width: 8px; }
.notificationsWindowP2 .homeNotificationsContainer::-webkit-scrollbar-thumb { background: rgba(0, 99, 155, 0.22); border-radius: 999px; }
/* notification item */
.notificationsWindowP2 .mui-notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 10px 11px 8px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--mui-line);
position: relative;
transition: background .18s var(--mui-ease), border-color .18s var(--mui-ease), box-shadow .18s var(--mui-ease);
}
.notificationsWindowP2 .mui-notif-item:hover {
background: #f7fafc;
border-color: #d8e2ea;
box-shadow: var(--mui-shadow-soft);
}
/* unread dot */
.notificationsWindowP2 .mui-notif-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mui-green);
flex: 0 0 auto;
margin-top: 13px;
}
/* type icon */
.notificationsWindowP2 .mui-notif-ic {
width: 32px;
height: 32px;
border-radius: 50%;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--mui-blue-soft);
color: var(--mui-blue);
}
.notificationsWindowP2 .mui-notif-body { flex: 1 1 auto; min-width: 0; }
.notificationsWindowP2 .mui-notif-msg {
font-size: 13px;
line-height: 1.45;
color: var(--mui-ink);
word-wrap: break-word;
white-space: normal;
}
.notificationsWindowP2 .mui-notif-msg a { color: var(--mui-blue); font-weight: 600; }
.notificationsWindowP2 .mui-notif-time {
margin-top: 4px;
font-size: 11px;
color: var(--mui-ink-soft);
font-variant-numeric: tabular-nums;
}
/* dismiss */
.notificationsWindowP2 .mui-notif-dismiss {
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--mui-ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: .45;
transition: opacity .15s var(--mui-ease), background .2s var(--mui-ease), color .2s var(--mui-ease);
}
.notificationsWindowP2 .mui-notif-item:hover .mui-notif-dismiss { opacity: 1; }
.notificationsWindowP2 .mui-notif-dismiss:hover { background: rgba(226, 59, 59, 0.10); color: #e23b3b; }
/* read / unread states */
.notificationsWindowP2 .mui-notif-item.is-unread { background: var(--mui-blue-soft, #eef6fb); border-color: rgba(0,99,155,.16); }
.notificationsWindowP2 .mui-notif-item.is-unread .mui-notif-msg { font-weight: 700; }
.notificationsWindowP2 .mui-notif-item.is-read { background: #fff; opacity: .72; }
.notificationsWindowP2 .mui-notif-item.is-read .mui-notif-dot { visibility: hidden; }
.notificationsWindowP2 .mui-notif-item.is-read .mui-notif-ic { background: #eef1f4; color: var(--mui-ink-soft); }
/* the dot only shows for unread */
.notificationsWindowP2 .mui-notif-item.is-read .mui-notif-read { display: none; }
/* per-item "mark as read" (check) */
.notificationsWindowP2 .mui-notif-read {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
border: none; background: transparent; color: var(--mui-blue);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; opacity: .55;
transition: opacity .15s var(--mui-ease), background .2s var(--mui-ease);
}
.notificationsWindowP2 .mui-notif-item:hover .mui-notif-read { opacity: 1; }
.notificationsWindowP2 .mui-notif-read:hover { background: var(--mui-blue-soft, rgba(0,99,155,.1)); }
/* empty state */
.notificationsWindowP2 .mui-notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 44px 20px;
color: var(--mui-ink-soft);
text-align: center;
font-size: 13px;
}
.notificationsWindowP2 .mui-notif-empty svg { color: #c4d2dc; }
/* ======================================================================
20. AGGREGATED RESULTS dashboard (.mui-agg-*)
====================================================================== */
.mui-agg {
/* reference palette */
--agg-s1: #0F766E; /* Κατηγορία 1 — dark teal */
--agg-s2: #5EEAD4; /* Κατηγορία 2 — light turquoise */
--agg-total: var(--agg-accent, #0EA5E9); /* per-article accent (set inline) */
--agg-brand: #0D9488; /* teal-green chrome (pills, icons) */
--agg-eyebrow: #0C726C;
--agg-navy: #0B1220; /* titles / numbers */
/* glassmorphism tokens */
--agg-glass: rgba(255,255,255,.58);
--agg-glass-strong: rgba(255,255,255,.72);
--agg-glass-brd: rgba(255,255,255,.75);
--agg-glass-blur: saturate(160%) blur(16px);
--agg-shadow: 0 18px 40px -22px rgba(16,40,70,.45), 0 2px 8px -4px rgba(16,40,70,.18);
--agg-shadow-hi: inset 0 1px 0 rgba(255,255,255,.6);
position: relative;
margin-top: 15px;
padding: 22px 20px 30px;
font-family: 'Inter','Segoe UI',system-ui,sans-serif;
color: var(--mui-ink);
isolation: isolate;
}
/* ambient accent-tinted splashes — painted full-bleed directly into the page
background (fixed to the viewport), not boxed inside a card. The accent
colour changes per article type via --agg-accent (set inline). */
.mui-agg::before {
/* leave the bottom footer strip clear — the footer sits at z-index:-1 and
a full-height fixed splash would paint over it */
content: ''; position: fixed; inset: 0 0 var(--footerHeight) 0; z-index: -1; border-radius: 0; pointer-events: none;
background:
radial-gradient(1150px 540px at 6% -8%, color-mix(in srgb, var(--agg-accent) 18%, transparent), transparent 56%),
radial-gradient(880px 620px at 102% 6%, color-mix(in srgb, var(--agg-accent-mid, #5EEAD4) 16%, transparent), transparent 55%),
radial-gradient(760px 720px at 48% 118%, color-mix(in srgb, var(--agg-accent) 12%, transparent), transparent 60%),
linear-gradient(180deg, #f5f9fc 0%, #eaf1f6 100%);
}
/* shared glass surface */
.mui-agg-subtab,
.mui-agg-header,
.mui-agg-stat,
.mui-agg-card,
.mui-agg-empty {
background: var(--agg-glass);
/* No backdrop-filter here on purpose: this element repeats down the page, and a blurred
backdrop must be re-sampled per element on every scroll frame — with one per row that
overruns the compositor and the page visibly flickers while scrolling. The background
below is opaque enough to read the same against the page. Keep blur for single
floating surfaces (navbar, modals, dropdowns), never for list items. */
border: 1px solid var(--agg-glass-brd);
box-shadow: var(--agg-shadow), var(--agg-shadow-hi);
}
/* ---- subtabs ---- */
.mui-agg-subtabs { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
.mui-agg-subtab {
border-radius: 13px;
padding: 9px 17px;
cursor: pointer;
display: flex; align-items: baseline; gap: 6px;
transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
color: var(--mui-ink-soft);
}
.mui-agg-subtab:hover { color: var(--agg-accent); transform: translateY(-1px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--agg-accent) 60%, transparent), var(--agg-shadow-hi); }
.mui-agg-subtab-no { font-weight: 700; font-size: 14px; }
.mui-agg-subtab-sub { font-size: 12.5px; opacity: .85; }
.mui-agg-subtab.is-active {
background: linear-gradient(135deg, color-mix(in srgb, var(--agg-accent) 92%, white) 0%, var(--agg-accent) 100%);
border-color: color-mix(in srgb, var(--agg-accent) 55%, white);
color: #fff;
box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--agg-accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.mui-agg-subtab.is-active .mui-agg-subtab-sub { opacity: .92; }
/* ---- header card ---- */
.mui-agg-header {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
border-radius: 20px;
padding: 20px 24px;
margin-bottom: 16px;
flex-wrap: wrap;
position: relative; overflow: hidden;
}
.mui-agg-header::after {
content: ''; position: absolute; right: -40px; top: -60px; width: 240px; height: 240px;
background: radial-gradient(circle, color-mix(in srgb, var(--agg-accent) 18%, transparent), transparent 70%);
pointer-events: none;
}
.mui-agg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--agg-eyebrow); margin-bottom: 5px; text-transform: uppercase; }
.mui-agg-title { font-size: 24px; font-weight: 800; color: var(--agg-navy); line-height: 1.1; letter-spacing: -.2px; }
.mui-agg-title-sub { font-weight: 600; color: var(--mui-ink-soft); font-size: 18px; }
.mui-agg-subcount { font-size: 13px; color: var(--mui-ink-soft); margin-top: 6px; }
.mui-agg-years { display: flex; gap: 6px; flex-wrap: wrap; position: relative; z-index: 1; }
.mui-agg-year {
border: 1px solid var(--agg-glass-brd);
background: rgba(255,255,255,.5);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: var(--mui-ink-soft);
border-radius: 10px;
padding: 7px 15px;
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all .15s ease;
}
.mui-agg-year:hover { border-color: var(--agg-brand); color: var(--agg-brand); transform: translateY(-1px); }
.mui-agg-year.is-active { background: linear-gradient(135deg, color-mix(in srgb, var(--agg-brand) 90%, white), var(--agg-brand)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(13,148,136,.6); }
/* ---- stat chips ---- */
.mui-agg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.mui-agg-lastcalc { display: inline-flex; align-items: center; gap: 6px; margin: -8px 0 16px; padding: 4px 11px;
border-radius: 999px; background: rgba(13,148,136,.08); color: #5b7186; font-size: 11.5px; font-weight: 600;
font-family: 'Inter','Segoe UI',system-ui,sans-serif; }
.mui-agg-lastcalc svg { color: #0D9488; flex: 0 0 auto; }
.mui-agg-stat {
border-radius: 18px;
padding: 17px 22px 18px;
position: relative;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.mui-agg-stat:hover { transform: translateY(-2px); box-shadow: 0 26px 48px -24px rgba(16,40,70,.5), var(--agg-shadow-hi); }
.mui-agg-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; }
.mui-agg-stat::after { content: ''; position: absolute; right: -30px; top: -40px; width: 150px; height: 150px; border-radius: 50%; opacity: .5; pointer-events: none; }
.mui-agg-stat-total::before { background: var(--agg-total); }
.mui-agg-stat-total::after { background: radial-gradient(circle, color-mix(in srgb, var(--agg-total) 22%, transparent), transparent 70%); }
.mui-agg-stat-s1::before { background: var(--agg-s1); }
.mui-agg-stat-s1::after { background: radial-gradient(circle, rgba(15,118,110,.18), transparent 70%); }
.mui-agg-stat-s2::before { background: var(--agg-s2); }
.mui-agg-stat-s2::after { background: radial-gradient(circle, rgba(94,234,212,.28), transparent 70%); }
.mui-agg-stat-k { font-size: 12.5px; color: var(--mui-ink-soft); font-weight: 600; display: flex; align-items: center; gap: 7px; position: relative; }
.mui-agg-stat-v { font-size: 28px; font-weight: 800; color: var(--agg-navy); margin-top: 7px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; position: relative; }
.mui-agg-stat-v span { font-size: 13px; font-weight: 600; color: var(--mui-ink-soft); letter-spacing: 0; }
.mui-agg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.mui-agg-dot.s1 { background: var(--agg-s1); }
.mui-agg-dot.s2 { background: var(--agg-s2); }
/* ---- chart grid ---- */
.mui-agg-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
.mui-agg-card-wide { grid-column: 1 / -1; }
@media (min-width: 1280px) {
.mui-agg-grid { grid-template-columns: 1fr 1fr; }
.mui-agg-card-wide { grid-column: 1 / -1; }
}
.mui-agg-card {
border-radius: 18px;
padding: 17px 20px 19px;
transition: transform .2s ease, box-shadow .2s ease;
display: flex; flex-direction: column;
}
.mui-agg-card:hover { box-shadow: 0 26px 50px -26px rgba(16,40,70,.5), var(--agg-shadow-hi); }
.mui-agg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.mui-agg-card-title { font-size: 14.5px; font-weight: 700; color: var(--agg-navy); letter-spacing: -.1px; }
.mui-agg-card-titlewrap { display: flex; flex-direction: column; gap: 1px; }
.mui-agg-card-sub { font-size: 11.5px; font-weight: 500; color: var(--mui-ink-soft); letter-spacing: .1px; }
.mui-agg-legend { display: flex; gap: 14px; font-size: 12px; color: var(--mui-ink-soft); }
.mui-agg-legend span { display: flex; align-items: center; gap: 6px; }
.mui-agg-sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.mui-agg-sw.total { background: var(--agg-total); }
.mui-agg-sw.s1 { background: var(--agg-s1); }
.mui-agg-sw.s2 { background: var(--agg-s2); }
/* canvas grows to fill the card height (so the chart matches the taller map card instead of
leaving empty space below); 280px floor keeps the standalone full-width charts unchanged */
.mui-agg-canvas { position: relative; flex: 1 1 auto; min-height: 280px; }
/* ---- obligor split bars ---- */
.mui-agg-obligor { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.mui-agg-ob-row { display: grid; grid-template-columns: 200px 1fr 132px; align-items: center; gap: 14px; }
.mui-agg-ob-row[title] { cursor: default; }
.mui-agg-ob-name { font-size: 12.5px; font-weight: 600; color: var(--mui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mui-agg-ob-track { height: 20px; background: rgba(15,23,42,.06); border-radius: 10px; overflow: hidden; display: flex; box-shadow: inset 0 1px 2px rgba(16,40,70,.08); }
.mui-agg-ob-seg { height: 100%; transition: width .6s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* in-bar Κατ.1 / Κατ.2 values — shown when the segment is wide enough, clipped otherwise */
.mui-agg-ob-segval { font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; padding: 0 5px; color: #fff; font-variant-numeric: tabular-nums; }
.mui-agg-ob-segval.s2val { color: #0b4f49; } /* dark teal — readable on the light Κατ.2 segment */
.mui-agg-ob-seg.s1 { background: linear-gradient(90deg, color-mix(in srgb, var(--agg-s1) 85%, black) 0%, var(--agg-s1) 100%); }
.mui-agg-ob-seg.s2 { background: linear-gradient(90deg, var(--agg-s2) 0%, color-mix(in srgb, var(--agg-s2) 70%, white) 100%); }
.mui-agg-ob-val { font-size: 12.5px; font-weight: 700; color: var(--agg-navy); text-align: right; font-variant-numeric: tabular-nums; }
.mui-agg-ob-val span { font-size: 10.5px; font-weight: 600; color: var(--mui-ink-soft); margin-left: 2px; }
/* ---- table ---- */
.mui-agg-tablecard { padding: 18px 0 8px; }
.mui-agg-tablecard .mui-agg-card-head { padding: 0 20px; }
/* title wrap grows and absorbs the free space, so the tools + export icon pack together on
the right with no dead gap between the "Columns" button and the download icon */
.mui-agg-tablecard .mui-agg-card-titlewrap { flex: 1 1 auto; min-width: 0; }
.mui-agg-table-tools { display: flex; align-items: center; gap: 14px; }
.mui-agg-select {
border: 1px solid var(--agg-glass-brd);
border-radius: 10px;
padding: 7px 13px;
font-size: 13px;
color: var(--mui-ink);
background: rgba(255,255,255,.6);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
cursor: pointer;
min-width: 180px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.mui-agg-select:hover, .mui-agg-select:focus { border-color: var(--agg-brand); box-shadow: 0 0 0 3px rgba(13,148,136,.12); outline: none; }
.mui-agg-count { font-size: 12.5px; color: var(--mui-ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
/* compact breakdown selector in the historical-trend card header */
.mui-agg-histmode { min-width: 0; padding: 6px 30px 6px 11px; font-size: 12.5px; }
/* ── historical-trend "add line" series picker ───────────────────────── */
.mui-agg-series-pickwrap { position: relative; }
/* lift the whole card above following cards while its picker is open */
.mui-agg-card-elevated { position: relative; z-index: 50; }
.mui-agg-addline {
display: inline-flex; align-items: center; gap: 7px;
border: 1px solid var(--agg-brand); border-radius: 10px;
padding: 7px 13px; font-size: 12.5px; font-weight: 600;
color: var(--agg-brand); background: rgba(13,148,136,.06);
cursor: pointer; transition: background .15s ease, box-shadow .15s ease;
}
.mui-agg-addline:hover { background: rgba(13,148,136,.13); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.mui-agg-addline-plus { font-size: 15px; font-weight: 700; line-height: 1; }
.mui-agg-addline-caret { font-size: 10px; opacity: .7; }
.mui-agg-series-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
width: 290px; max-width: 80vw;
background: #fff; border: 1px solid var(--agg-glass-brd); border-radius: 13px;
box-shadow: 0 18px 48px rgba(15,23,42,.18); padding: 10px;
}
.mui-agg-series-menu[hidden] { display: none; }
.mui-agg-series-search { margin-bottom: 8px; }
.mui-agg-series-search input {
width: 100%; box-sizing: border-box; border: 1px solid var(--agg-glass-brd);
border-radius: 9px; padding: 7px 11px; font-size: 12.5px; color: var(--mui-ink);
outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.mui-agg-series-search input:focus { border-color: var(--agg-brand); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.mui-agg-series-scroll { max-height: 340px; overflow: auto; }
.mui-agg-series-group { margin-bottom: 6px; }
.mui-agg-series-ghead {
font-size: 10.5px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
color: var(--mui-ink-soft); padding: 8px 8px 4px; position: sticky; top: 0; background: #fff;
}
.mui-agg-series-opt {
display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px;
cursor: pointer; font-size: 12.5px; color: var(--mui-ink); transition: background .12s ease;
}
.mui-agg-series-opt:hover { background: var(--agg-glass); }
.mui-agg-series-opt input { accent-color: var(--agg-brand); width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
.mui-agg-series-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.mui-agg-series-optlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mui-agg-series-none { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--mui-ink-soft); }
/* selected-line chips below the card head, doubling as the chart legend */
.mui-agg-series-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; min-height: 26px; }
.mui-agg-chip {
display: inline-flex; align-items: center; gap: 7px;
background: var(--agg-glass); border: 1px solid var(--agg-glass-brd);
border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--mui-ink);
max-width: 240px;
}
.mui-agg-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mui-agg-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mui-agg-chip-x {
border: none; background: transparent; color: var(--mui-ink-soft); cursor: pointer;
font-size: 16px; line-height: 1; padding: 0 2px; border-radius: 50%;
transition: color .12s ease, background .12s ease;
}
.mui-agg-chip-x:hover { color: #DC2626; background: rgba(220,38,38,.1); }
.mui-agg-series-empty { font-size: 12px; color: var(--mui-ink-soft); font-style: italic; padding: 4px 2px; }
/* Άρθρο 16 obligor table: the reduction-% annotation next to a 2025/2030 target value */
.mui-agg-tgt-pct { font-size: 11px; color: var(--mui-ink-soft); margin-left: 5px; font-variant-numeric: tabular-nums; }
/* combined tab: source-article pill + multi-article de-dup badge */
.mui-agg-srcpill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--agg-accent-dark); background: var(--agg-accent-light); border: 1px solid color-mix(in srgb, var(--agg-accent) 30%, transparent); }
/* absolute ⇆ intensity view switch on the "Emissions by category & year" chart */
.mui-agg-modeswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 6px 8px; }
.mui-agg-modeswitch-lbl { font-size: 11px; font-weight: 700; color: var(--mui-ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.mui-agg-modebtn { border: 1px solid #d9e0e7; background: #fff; color: #44525f; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.mui-agg-modebtn:hover { border-color: var(--agg-accent); color: var(--agg-accent); }
.mui-agg-modebtn.is-active { background: var(--agg-accent); border-color: var(--agg-accent); color: #fff; }
.mui-agg-multibadge { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; vertical-align: middle; }
.mui-agg-subtab-combined { margin-left: 6px; }
.mui-agg-table-wrap { max-height: 560px; overflow: auto; }
.mui-agg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mui-agg-table thead th {
position: sticky; top: 0; z-index: 1;
background: rgba(244,248,251,.85);
-webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);
color: var(--mui-ink-soft);
font-weight: 700; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase;
text-align: left;
padding: 12px 20px;
border-bottom: 1px solid var(--mui-line);
cursor: default; user-select: none;
}
.mui-agg-table th.sortable { cursor: pointer; transition: color .15s ease; }
.mui-agg-table th.sortable:hover { color: var(--agg-brand); }
.mui-agg-table th.num, .mui-agg-table td.num { text-align: right; }
.mui-agg-table td.num { font-variant-numeric: tabular-nums; }
.mui-agg-table th.sortable::after { content: '↕'; opacity: .35; margin-left: 6px; font-size: 11px; }
.mui-agg-table th.asc::after { content: '↑'; opacity: 1; color: var(--agg-brand); }
.mui-agg-table th.desc::after { content: '↓'; opacity: 1; color: var(--agg-brand); }
.mui-agg-table tbody td { padding: 11px 20px; border-bottom: 1px solid rgba(20,45,70,.05); color: var(--mui-ink); }
.mui-agg-table tbody tr { transition: background .12s ease; }
.mui-agg-table tbody tr:hover { background: rgba(13,148,136,.08); }
.mui-agg-td-name { font-weight: 600; max-width: 360px; }
.mui-agg-td-vat { font-variant-numeric: tabular-nums; color: var(--mui-ink-soft); white-space: nowrap; }
.mui-agg-table td.strong { font-weight: 800; color: var(--agg-navy); }
/* unit suffix in numeric headers ("tCO₂e") — lowercase, lighter, doesn't shout */
.mui-agg-th-unit { font-weight: 600; font-size: 10px; letter-spacing: .2px; text-transform: none; color: var(--mui-ink-soft); opacity: .8; margin-left: 4px; }
/* sticky totals footer row */
.mui-agg-table tfoot td {
position: sticky; bottom: 0; z-index: 1;
background: rgba(244,248,251,.92);
-webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);
padding: 12px 20px; border-top: 2px solid var(--mui-line);
font-weight: 800; color: var(--agg-navy); font-variant-numeric: tabular-nums;
}
.mui-agg-table tfoot .mui-agg-foot-count { font-weight: 600; font-size: 12px; color: var(--mui-ink-soft); }
/* ---- empty ---- */
.mui-agg-empty {
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 64px 20px; color: var(--mui-ink-soft);
border-radius: 18px; border-style: dashed;
}
.mui-agg-empty svg { color: color-mix(in srgb, var(--agg-accent) 45%, #c4d2dc); }
.mui-agg-empty span { font-size: 14px; }
/* ---- choropleth map (Phase 2) ---- */
/* map-card header — icon + "Άρθρο 20 · Επιχειρήσεις" + total (matches reference) */
.mui-agg-mapcard-head { display: flex; align-items: center; gap: 11px; padding: 2px 2px 12px; }
.mui-agg-mapcard-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
background: color-mix(in srgb, var(--agg-accent) 14%, white);
color: var(--agg-accent);
}
.mui-agg-mapcard-title { font-size: 16px; line-height: 1.15; font-weight: 500; color: var(--mui-ink-soft); }
.mui-agg-mapcard-title b { color: var(--agg-navy, #0B1220); font-weight: 800; }
.mui-agg-mapcard-mid { color: var(--mui-ink-soft); margin: 0 1px; }
.mui-agg-mapcard-sub { font-size: 12.5px; color: var(--mui-ink-soft); margin-top: 2px; }
.mui-agg-mapcard-sub span { opacity: .75; }
.mui-agg-mapcard .mui-agg-map { position: relative; height: 380px; width: 100%; }
.mui-agg-map canvas { display: block; width: 100%; height: 100%; }
.mui-agg-map-tip {
position: absolute; display: none; pointer-events: none;
background: rgba(15,25,38,.82);
-webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
color: #fff;
font-size: 12px; line-height: 1.35;
padding: 8px 11px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 10px 26px rgba(0,0,0,.28);
white-space: nowrap; z-index: 5;
}
.mui-agg-map-tip b { font-weight: 700; font-size: 12.5px; }
.mui-agg-map-legend {
position: absolute; left: 14px; bottom: 10px;
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--mui-ink-soft);
}
.mui-agg-map-legend-bar {
width: 120px; height: 9px; border-radius: 5px;
background: linear-gradient(90deg, var(--agg-accent-light, #dcebf8) 0%, var(--agg-accent-mid, #5aaee4) 55%, var(--agg-accent-dark, #1c6ca8) 100%);
border: 1px solid var(--agg-glass-brd);
box-shadow: 0 1px 3px rgba(16,40,70,.15);
}
.mui-agg-mapcard .mui-agg-map canvas { cursor: pointer; }
/* ---- region filter (map click) — active bar + per-card pills ---- */
.mui-agg-filterbar {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px; margin-bottom: 14px; border-radius: 12px;
background: color-mix(in srgb, var(--agg-accent) 12%, white);
border: 1px solid color-mix(in srgb, var(--agg-accent) 30%, white);
color: var(--agg-navy, #0B1220); font-size: 13px;
}
.mui-agg-filterbar-ic { display: inline-flex; color: var(--agg-accent); }
.mui-agg-filterbar-txt { flex: 1 1 auto; }
.mui-agg-filterbar-txt b { font-weight: 800; }
.mui-agg-filterbar-clear {
display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
background: var(--agg-accent); color: #fff; font-size: 12px; font-weight: 700;
padding: 5px 10px; border-radius: 8px; transition: filter .15s ease;
}
.mui-agg-filterbar-clear:hover { filter: brightness(.92); }
.mui-agg-cardfilter {
display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
color: var(--agg-accent);
background: color-mix(in srgb, var(--agg-accent) 12%, white);
border: 1px solid color-mix(in srgb, var(--agg-accent) 28%, white);
vertical-align: middle;
}
.mui-agg-cardfilter svg { flex: 0 0 auto; }
/* ---- export controls (per-card PNG/PPT/XLS/CSV menu + export-all) ---- */
.mui-agg-export { position: relative; margin-left: auto; flex: 0 0 auto; }
.mui-agg-export-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
border: 1px solid var(--agg-glass-brd, rgba(255,255,255,.75));
background: rgba(255,255,255,.6); color: var(--agg-navy, #0B1220);
transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mui-agg-export-btn:hover { color: var(--agg-accent); border-color: color-mix(in srgb, var(--agg-accent) 40%, white); box-shadow: var(--agg-shadow-hi); }
.mui-agg-export-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
min-width: 172px; padding: 6px; border-radius: 12px;
background: #fff; border: 1px solid rgba(20,45,70,.12);
box-shadow: 0 18px 40px -16px rgba(16,40,70,.4);
display: none; flex-direction: column; gap: 2px;
}
.mui-agg-export-menu.is-open { display: flex; }
.mui-agg-export-menu button {
text-align: left; border: none; background: transparent; cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--mui-ink, #1f2d3d);
padding: 8px 10px; border-radius: 8px; transition: background .12s ease, color .12s ease;
}
.mui-agg-export-menu button:hover { background: var(--mui-blue-soft, rgba(0,99,155,.08)); color: var(--agg-accent); }
/* column picker (obligor-details table: add any company field as an extra column) */
.mui-agg-colpick { position: relative; display: inline-flex; }
.mui-agg-colbtn {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; cursor: pointer;
border: 1px solid var(--agg-glass-brd, rgba(255,255,255,.75)); background: rgba(255,255,255,.6);
color: var(--agg-navy, #0B1220); font-size: 12.5px; font-weight: 600;
transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mui-agg-colbtn:hover { color: var(--agg-accent); border-color: color-mix(in srgb, var(--agg-accent) 40%, white); box-shadow: var(--agg-shadow-hi); }
.mui-agg-colmenu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
min-width: 230px; max-height: 320px; overflow-y: auto; padding: 7px; border-radius: 12px;
background: #fff; border: 1px solid rgba(20,45,70,.12); box-shadow: 0 18px 40px -16px rgba(16,40,70,.4);
display: none; flex-direction: column; gap: 1px;
}
.mui-agg-colmenu.is-open { display: flex; }
.mui-agg-colmenu-hd { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--agg-soft, #64748b); padding: 4px 8px 6px; }
.mui-agg-colopt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mui-ink, #1f2d3d); transition: background .12s ease; }
.mui-agg-colopt:hover { background: var(--mui-blue-soft, rgba(0,99,155,.08)); }
.mui-agg-colopt input { accent-color: var(--agg-accent, #0EA5E9); width: 15px; height: 15px; cursor: pointer; }
.mui-agg-td-x { color: var(--mui-ink, #1f2d3d); }
/* drag-to-reorder columns */
.mui-agg-table thead th { cursor: grab; }
.mui-agg-table thead th:active { cursor: grabbing; }
.mui-agg-table thead th.agg-dragging { opacity: .45; }
.mui-agg-table thead th.agg-dragover { box-shadow: inset 2px 0 0 var(--agg-accent, #0EA5E9); }
.mui-agg-colmenu-hint { font-size: 11px; color: var(--agg-soft, #64748b); padding: 6px 8px 2px; border-top: 1px solid rgba(15,23,42,.08); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
/* export-all button (top, in the subtabs row) */
.mui-agg-exportall {
margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
font-size: 13px; font-weight: 700; color: #fff; border: 1px solid transparent;
background: linear-gradient(135deg, color-mix(in srgb, var(--agg-accent) 88%, white), var(--agg-accent));
box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--agg-accent) 60%, transparent);
transition: filter .15s ease, transform .1s ease;
}
.mui-agg-exportall:hover { filter: brightness(.95); }
.mui-agg-exportall:active { transform: translateY(1px); }
.mui-agg-exportall.is-busy { opacity: .7; cursor: progress; }
/* actions group (report + export-all) pinned to the right of the article tabs */
.mui-agg-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.mui-agg-actions .mui-agg-export, .mui-agg-actions .mui-agg-exportall { margin-left: 0; }
.mui-agg-reportbtn {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
color: var(--agg-accent); background: #fff;
border: 1.5px solid color-mix(in srgb, var(--agg-accent) 45%, white);
transition: background .15s ease, box-shadow .15s ease;
}
.mui-agg-reportbtn:hover { background: color-mix(in srgb, var(--agg-accent) 8%, white); box-shadow: var(--agg-shadow-hi); }
.mui-agg-reportbtn.is-busy { opacity: .7; cursor: progress; }
/* ===== generated report (off-screen A4 pages, rasterized to PDF/Word) ===== */
.rep-wrap { position: fixed; left: -10000px; top: 0; width: 794px; z-index: -1; }
.rep-page { width: 794px; min-height: 1123px; background: #fff; color: #222b36; box-sizing: border-box; position: relative; overflow: hidden; font-family: 'Inter','Segoe UI',system-ui,sans-serif; }
.rep-pad { padding: 54px 56px 64px; }
.rep-p { font-size: 14px; line-height: 1.6; color: #3b4654; margin: 0 0 18px; }
.rep-sec { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.rep-sec-no { color: #fff; font-weight: 800; font-size: 13px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.rep-sec-t { font-size: 19px; font-weight: 800; color: #0B1220; letter-spacing: -.2px; }
.rep-sub-cont { font-size: 13px; font-weight: 700; color: #64748b; margin: 0 0 12px; }
.rep-kpis { display: flex; gap: 14px; margin: 6px 0 18px; }
.rep-kpi { flex: 1; background: #f6f9fb; border: 1px solid #e8eef3; border-radius: 12px; padding: 14px 16px; }
.rep-kpi-l { font-size: 12px; color: #64748b; font-weight: 600; }
.rep-kpi-v { font-size: 21px; font-weight: 800; color: #0B1220; margin-top: 5px; }
.rep-list { margin: 4px 0 8px; padding-left: 18px; }
.rep-list li { font-size: 13.5px; line-height: 1.7; color: #3b4654; }
.rep-img { text-align: center; margin: 6px 0 10px; }
.rep-img img { max-width: 100%; border: 1px solid #eef2f6; border-radius: 10px; }
.rep-img-missing { text-align: center; color: #9aa7b2; font-size: 13px; padding: 40px 0; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rep-table th { background: var(--rep-ac, #0EA5E9); color: #fff; text-align: left; padding: 8px 10px; font-weight: 700; }
.rep-table th.n, .rep-table td.n { text-align: right; }
.rep-table td { padding: 7px 10px; border-bottom: 1px solid #eef2f6; color: #2b3645; }
.rep-table td.b { font-weight: 800; color: #0B1220; }
.rep-table tbody tr:nth-child(even) td { background: #f7fafc; }
.rep-cover, .rep-back { color: #fff; }
.rep-cover { display: flex; flex-direction: column; justify-content: space-between; padding: 64px 60px; }
.rep-cover-top { font-size: 13px; font-weight: 700; letter-spacing: 2px; opacity: .85; }
.rep-cover-mid { margin-top: 210px; }
.rep-cover-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; opacity: .9; margin-bottom: 14px; }
.rep-cover-title { font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; }
.rep-cover-sub { font-size: 24px; font-weight: 600; margin-top: 12px; opacity: .96; }
.rep-cover-period { font-size: 15px; margin-top: 18px; opacity: .9; }
.rep-cover-region { font-size: 14px; margin-top: 6px; opacity: .9; }
.rep-cover-foot { display: flex; justify-content: space-between; font-size: 12.5px; opacity: .9; border-top: 1px solid rgba(255,255,255,.3); padding-top: 16px; }
.rep-back { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 70px; }
.rep-back-title { font-size: 30px; font-weight: 800; }
.rep-back-txt { font-size: 14px; line-height: 1.7; opacity: .92; margin-top: 18px; max-width: 520px; }
.rep-back-contact { font-size: 14px; font-weight: 700; margin-top: 24px; }
.rep-back-foot { position: absolute; bottom: 48px; left: 0; right: 0; text-align: center; font-size: 12px; opacity: .85; }
/* ======================================================================
21. ΕΤΑΙΡΕΙΕΣ (Companies admin) — clean modern + light glass
Scoped under #nav-company so other admin tables are unaffected.
.aco-* classes are unique to this page.
====================================================================== */
/* Shared at :root, not on #nav-company — #nav-investor is a SIBLING tab pane, not a descendant, so a
var() declared only on #nav-company silently resolved to nothing everywhere in #nav-investor (every
var(--aco-shadow)/var(--aco-line) there was invalid). Lightened while fixing it: a flatter, thinner
shadow reads as "sleek" instead of "card floating above the page", which is most of what makes the
old version feel heavy. */
:root {
--aco-brand: #0D9488;
--aco-brand-2: #0B7E73;
--aco-navy: #0B1220;
--aco-line: rgba(20,45,70,.08);
--aco-glass: rgba(255,255,255,.72);
--aco-blur: saturate(140%) blur(12px);
--aco-shadow: 0 1px 2px rgba(16,40,70,.05);
--aco-shadow-hover: 0 6px 16px -10px rgba(16,40,70,.22);
}
#nav-company, #nav-investor {
font-family: 'Inter','Segoe UI',system-ui,sans-serif;
padding: 6px 4px 16px;
}
/* ---- tab bar (ΕΤΑΙΡΕΙΕΣ / ΕΜΠΛΕΚΟΜΕΝΟΙ) — flat pill switcher, no per-tab shadow at rest ---- */
#nav-tab.nav-tabs { border: none; gap: 4px; }
#nav-tab.nav-tabs .nav-link {
border: 1px solid transparent; border-radius: 10px;
color: #7c8894; font-weight: 600; font-size: 13.5px; padding: 8px 16px;
transition: color .12s ease, background .12s ease; -webkit-text-fill-color: currentColor;
}
#nav-tab.nav-tabs .nav-link:hover { color: #0D9488; background: rgba(13,148,136,.06); }
#nav-tab.nav-tabs .nav-link.active {
color: #fff; -webkit-text-fill-color: #fff; border-color: transparent; background: #0D9488;
}
/* ---- toolbar — thin hairline instead of a floating card; shadow only appears on interaction ---- */
.aco-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.aco-search {
display: flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid var(--aco-line); border-radius: 11px;
padding: 4px 6px 4px 14px; transition: box-shadow .14s ease, border-color .14s ease;
}
.aco-search:focus-within { border-color: #bfe2de; box-shadow: var(--aco-shadow-hover); }
.aco-search-ic { color: #a3b1bd; font-size: 13px; display: flex; }
.aco-search-input { border: none; background: transparent; outline: none; font-size: 13.5px; color: var(--aco-navy); width: 280px; max-width: 42vw; padding: 7px 2px; }
.aco-search-input::placeholder { color: #a3b1bd; }
.aco-search-go {
border: none; border-radius: 8px; cursor: pointer; background: #0D9488; color: #fff;
font-weight: 600; font-size: 13px; padding: 8px 16px;
transition: background .12s ease; box-shadow: none;
}
.aco-search-go:hover { background: #0B7E73; }
.aco-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.aco-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.aco-btn svg { flex: 0 0 auto; }
.aco-btn-ghost { background: #fff; border: 1px solid var(--aco-line); color: var(--aco-navy); -webkit-text-fill-color: currentColor; }
.aco-btn-ghost:hover { color: #0D9488; border-color: #9ad2cc; background: rgba(13,148,136,.04); }
.aco-caret { opacity: .5; }
/* ---- column picker panel — solid, not frosted: a backdrop-filter this large repaints on every
scroll/drag frame under it, which is exactly the kind of cost that shows up as jank while
reordering columns. A plain solid surface looks just as crisp and costs nothing at paint time. ---- */
.aco-colpicker { position: relative; }
.aco-colpanel {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200;
width: 270px; max-height: 60vh; overflow: auto;
background: #fff; border: 1px solid var(--aco-line); border-radius: 13px;
box-shadow: var(--aco-shadow-hover);
padding: 8px; opacity: 0; transform: translateY(-4px); pointer-events: none;
transition: opacity .12s ease, transform .12s ease;
}
.aco-colpanel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.aco-colpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid var(--aco-line); margin-bottom: 6px; }
.aco-colpanel-head > span { font-weight: 700; font-size: 13px; color: var(--aco-navy); }
.aco-colpanel-acts { display: flex; gap: 6px; }
.aco-link { border: none; background: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: #0D9488; padding: 2px 5px; border-radius: 6px; }
.aco-link:hover { background: rgba(13,148,136,.1); }
.aco-colpanel-list { display: flex; flex-direction: column; gap: 1px; }
.aco-colitem { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 10px; border-radius: 10px; transition: background .12s ease; }
.aco-colitem:hover { background: rgba(13,148,136,.07); }
.aco-colitem input { position: absolute; opacity: 0; width: 0; height: 0; }
.aco-colitem-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #cbd5e1; flex: 0 0 auto; position: relative; transition: all .15s ease; background: #fff; }
.aco-colitem input:checked + .aco-colitem-box { background: #0D9488; border-color: #0D9488; }
.aco-colitem input:checked + .aco-colitem-box::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.aco-colitem-txt { font-size: 13px; color: var(--mui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- columns picker: scrollable list + sticky footer, drag-reorder ---- */
.aco-colpanel { display: flex; flex-direction: column; overflow: hidden; }
.aco-colpanel-hint { font-size: 11px; color: var(--aco-soft, #64748b); padding: 0 8px 6px; }
.aco-colpanel-list { flex: 1 1 auto; overflow: auto; padding-right: 2px; }
.aco-colpanel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 4px; margin-top: 6px; border-top: 1px solid var(--aco-line); }
.aco-colpanel-status { font-size: 11.5px; font-weight: 600; color: var(--aco-soft, #64748b); }
.aco-colsave { padding: 6px 14px; }
.aco-colitem-grip { flex: 0 0 auto; cursor: grab; color: #94a3b8; font-size: 13px; line-height: 1; letter-spacing: -2px; user-select: none; }
.aco-colitem[draggable="true"] { user-select: none; }
.aco-colitem.aco-dragging { opacity: .5; }
.aco-colitem.aco-drop-before { box-shadow: inset 0 2px 0 0 #0D9488; }
.aco-colitem.aco-drop-after { box-shadow: inset 0 -2px 0 0 #0D9488; }
/* ---- flattened grid (column toggling) — classes are unique, unscoped ---- */
.aco-grid, .aco-row {
display: grid !important;
grid-template-columns: 5fr 5fr 10fr 15fr 15fr 10fr 6fr 6fr 9fr 9fr 6fr 12fr 4fr 4fr 4fr 12fr 12fr 14fr 7fr 14fr 8fr 9fr 9fr;
align-items: stretch; margin: 0 !important; width: 100% !important;
}
#nav-company .tableCell .aco-ro { font-size: 12.5px; color: #5b6b78; }
.aco-grid > [class*="col-"], .aco-row > [class*="col-"] { display: contents !important; }
.aco-grid > [class*="col-"] > .row, .aco-row > [class*="col-"] > .row { display: contents !important; }
.aco-grid [data-col], .aco-row [data-col] {
width: auto !important; max-width: none !important; min-width: 0;
display: flex; align-items: center; justify-content: center; padding: 5px 8px;
}
.aco-row [data-col] > input, .aco-row [data-col] > select { width: 100%; min-width: 0; }
/* ---- header ---- */
#nav-company .Tableheader.aco-grid {
background: #f7f9fb; border: 1px solid var(--aco-line); border-radius: 12px 12px 0 0;
box-shadow: var(--aco-shadow); height: auto !important; min-height: 48px; overflow: hidden;
}
#nav-company .Tableheader .tableCell {
color: #66727f; font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; line-height: 1.2;
}
/* ---- body container + rows ---- */
/* override the legacy fixed-height inner scroll (Observatory.css: height:calc(100vh..)+overflow-y:scroll)
so the grid grows to fit ALL rows and the PAGE scrolls — same as the .umx user grid. */
#nav-company .submissionsBodyContainerAdmin {
background: #fff; border: 1px solid var(--aco-line); border-top: none;
border-radius: 0 0 12px 12px; box-shadow: var(--aco-shadow); overflow: visible;
height: auto !important; max-height: none !important; backdrop-filter: none !important;
}
#nav-company .submissionsBodyContainerAdmin .aco-row { border-bottom: 1px solid rgba(20,45,70,.06); min-height: 46px; transition: background .12s ease; }
#nav-company .submissionsBodyContainerAdmin .aco-row:hover { background: rgba(13,148,136,.05); }
#nav-company .submissionsBodyContainerAdmin .aco-row:last-child { border-bottom: none; }
/* ---- cell inputs/selects ---- */
#nav-company .tableCell .ESGDataTableResultsTextEditable,
#nav-company .tableCell input.ESGDataTableResultsText,
#nav-company .tableCell select.ESGDataTableResultsText {
border: 1px solid transparent !important; border-radius: 8px; background: transparent !important; color: var(--aco-navy);
-webkit-text-fill-color: currentColor;
font-size: 12.5px; padding: 6px 8px; height: auto !important; text-align: left;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
/* base .ESGDataTableResultsText centers text — left-align everything in the cells */
#nav-company .tableCell input,
#nav-company .tableCell select,
#nav-company .tableCell .ESGDataTableResultsText,
#nav-company .tableCell .aco-ro { text-align: left; }
#nav-company .tableCell .ESGDataTableResultsTextEditable:hover,
#nav-company .tableCell select.ESGDataTableResultsText:hover { background: #f3f6f9 !important; border-color: transparent !important; }
#nav-company .tableCell .ESGDataTableResultsTextEditable:focus,
#nav-company .tableCell select.ESGDataTableResultsText:focus { outline: none; background: #fff !important; border-color: #0D9488 !important; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
/* ---- in-cell action / tier buttons (undo gradient-text so icons/labels show) ---- */
#nav-company .tableCell .button-white-linear.buttonBorder {
margin: 0 3px !important;
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 32px; padding: 0 9px;
border-radius: 9px; border: 1px solid var(--aco-line);
background: #fff !important; color: #5b6b78 !important;
-webkit-background-clip: border-box !important; background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
#nav-company .tableCell .button-white-linear.buttonBorder:hover {
color: #0D9488 !important; border-color: #9ad2cc; transform: translateY(-1px);
box-shadow: 0 6px 14px -8px rgba(13,148,136,.6);
}
#nav-company .tableCell .button-white-linear.buttonBorder i { font-size: 13px; }
#nav-company [data-col="info"] { gap: 4px; flex-wrap: wrap; }
#nav-company [data-col="tier"] .button-white-linear.buttonBorder { width: auto; padding: 0 10px; }
/* ---- footer action buttons (Add / Refresh / Save) ---- */
#nav-company .button-white-linear.fontsize90 {
border-radius: 10px; border: 1px solid var(--aco-line); background: #fff !important;
color: var(--aco-navy) !important;
-webkit-background-clip: border-box !important; background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
font-weight: 600; padding: 9px 18px; margin-right: 8px; box-shadow: none;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
#nav-company .button-white-linear.fontsize90:hover { color: #0D9488 !important; border-color: #9ad2cc; background: rgba(13,148,136,.04) !important; }
#nav-company .button-white-linear.fontsize90[value="Admin_SaveCompanies"] {
background: #0D9488 !important; color: #fff !important; border-color: transparent;
}
#nav-company .button-white-linear.fontsize90[value="Admin_SaveCompanies"]:hover { color: #fff !important; background: #0B7E73 !important; }
/* ---- per-column sort + filter header controls ---- */
#nav-company .Tableheader .tableCell.aco-th {
flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 7px 8px;
}
#nav-company .aco-sort {
display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
background: none; border: none; cursor: pointer; padding: 0;
font: inherit; color: inherit; text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .3px;
-webkit-text-fill-color: currentColor;
}
#nav-company .aco-sort:hover { color: #0D9488; }
/* Wrap instead of clipping (NECCA 86cax7f8b) — headers were cut off mid-word with no way to read the
full label; the tooltip on the same span (title attribute, set in enhanceHeaders()) still covers
any remaining edge case where a single unbroken token is wider than the column. */
#nav-company .aco-sort > span:first-child { white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
.aco-sort-ic { width: 12px; flex: 0 0 auto; text-align: center; opacity: .4; }
.aco-sort-ic::before { content: '⇅'; font-size: 10px; }
#nav-company .aco-sort.asc, #nav-company .aco-sort.desc { color: #0D9488; }
.aco-sort.asc .aco-sort-ic, .aco-sort.desc .aco-sort-ic { opacity: 1; }
.aco-sort.asc .aco-sort-ic::before { content: '↑'; }
.aco-sort.desc .aco-sort-ic::before { content: '↓'; }
#nav-company .aco-colfilter {
width: 100%; border: 1px solid var(--aco-line); border-radius: 7px; background: #fff;
font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0;
padding: 4px 7px; color: var(--aco-navy); -webkit-text-fill-color: currentColor;
}
#nav-company .aco-colfilter::placeholder { color: #b6c2cc; }
#nav-company .aco-colfilter:focus { outline: none; border-color: #0D9488; box-shadow: 0 0 0 2px rgba(13,148,136,.15); }
/* ---- zebra striping, hidden rows, results count ---- */
#nav-company .submissionsBodyContainerAdmin .aco-row.aco-even { background: rgba(20,45,70,.025); }
#nav-company .submissionsBodyContainerAdmin .aco-row.aco-even:hover { background: rgba(13,148,136,.06); }
.aco-row.aco-hidden { display: none !important; }
.aco-count-chip { font-size: 12px; font-weight: 600; color: #66727f; background: #fff; border: 1px solid var(--aco-line); border-radius: 9px; padding: 8px 11px; }
/* ---- Active boolean → segmented toggle pill (parity with the .umx user grid) ---- */
#nav-company [data-col="active"] { gap: 0; }
#nav-company [data-col="active"] .p3radioContainer {
margin: 0; cursor: pointer; user-select: none; position: relative;
display: inline-flex; align-items: center; justify-content: center;
padding: 5px 12px; font-size: 12px; font-weight: 600; line-height: 1;
color: #8595a3; background: #f1f4f7; border: 1px solid var(--aco-line);
}
#nav-company [data-col="active"] .p3radioContainer:first-of-type { border-radius: 8px 0 0 8px; border-right-width: 0; }
#nav-company [data-col="active"] .p3radioContainer:last-of-type { border-radius: 0 8px 8px 0; }
#nav-company [data-col="active"] .p3radioContainer input,
#nav-company [data-col="active"] .p3radioContainer .checkmark {
position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
margin: 0 !important; padding: 0 !important; pointer-events: none; border: none !important; background: none !important;
}
#nav-company [data-col="active"] .p3radioContainer:has(input:checked) { background: #0D9488; color: #fff; border-color: #0D9488; z-index: 1; }
/* ---- crisp icon action column (tighter spacing, destructive delete cue) ---- */
#nav-company [data-col="info"] { gap: 6px; }
#nav-company [data-col="info"] .button-white-linear.buttonBorder { margin: 0 !important; }
#nav-company [data-col="info"] .button-white-linear.buttonBorder[onclick*="showCompanyDeletionConfirm"]:hover {
color: #c0392b !important; border-color: #e7b9a6;
box-shadow: 0 6px 14px -8px rgba(192,57,49,.55);
}
/* ---- flat, borderless cells — match the clean .umx user grid (kills "cells inside cells") ---- */
#nav-company .Tableheader .tableCell,
#nav-company .submissionsBodyContainerAdmin .tableCell { border: none !important; }
/* left-align text columns (modern feel); keep toggle / actions / short numerics centered.
Note: keep the centered overrides at the same .aco-grid/.aco-row specificity, declared after,
so they win over the general left-align rule. */
#nav-company .aco-grid [data-col],
#nav-company .aco-row [data-col] { justify-content: flex-start; text-align: left; padding: 7px 10px; }
#nav-company .aco-sort { justify-content: flex-start; }
#nav-company .aco-grid [data-col="active"],#nav-company .aco-row [data-col="active"],
#nav-company .aco-grid [data-col="info"], #nav-company .aco-row [data-col="info"] { justify-content: center; text-align: center; }
#nav-company .aco-grid [data-col="active"] .aco-sort { justify-content: center; }
/* match the user grid's lighter row rhythm */
#nav-company .submissionsBodyContainerAdmin .aco-row { min-height: 48px; }
/* =========================================================================================
Stakeholders / Investors company grid (Companies page → #nav-investor tab) — modern reskin.
Legacy bootstrap-col + .tableCell structure (not the aco data-col grid), so styles target
those classes directly. Scoped to #nav-investor (the user-management investor tab uses the
.umx classes, so these selectors never touch it).
========================================================================================= */
/* header card */
#nav-investor .Tableheader {
background: #f7f9fb; border: 1px solid var(--aco-line); border-radius: 12px 12px 0 0;
box-shadow: var(--aco-shadow); height: auto !important; min-height: 48px; overflow: hidden;
}
#nav-investor .Tableheader .tableCell {
border: none !important; color: #5b6b78; font-weight: 700; font-size: 11px;
letter-spacing: .3px; text-transform: uppercase; line-height: 1.2;
justify-content: flex-start; text-align: left;
}
/* body card — drop the legacy fixed-height inner scroll so the PAGE scrolls */
#nav-investor .submissionsBodyContainerAdmin {
background: #fff; border: 1px solid var(--aco-line); border-top: none;
border-radius: 0 0 12px 12px; box-shadow: var(--aco-shadow);
height: auto !important; max-height: none !important; overflow: visible; backdrop-filter: none !important;
}
/* flat cells (kill the cell-in-cell borders) + left-align */
#nav-investor .tableCell,
#nav-investor .tableCellBorderOnly { border: none !important; justify-content: flex-start; text-align: left; }
/* rows: separators, hover, zebra */
#nav-investor .submissionsBodyContainerAdmin > .row { border-bottom: 1px solid rgba(20,45,70,.06); transition: background .12s ease; }
#nav-investor .submissionsBodyContainerAdmin > .row:last-child { border-bottom: none; }
#nav-investor .submissionsBodyContainerAdmin > .row:nth-of-type(even) { background: rgba(20,45,70,.025); }
#nav-investor .submissionsBodyContainerAdmin > .row:hover { background: rgba(13,148,136,.05); }
/* borderless inline inputs (override the !important base border) + left text */
#nav-investor .tableCell .ESGDataTableResultsTextEditable {
border: 1px solid transparent !important; background: transparent !important; border-radius: 8px;
color: var(--aco-navy); -webkit-text-fill-color: currentColor; font-size: 12.5px; padding: 6px 8px;
text-align: left; height: auto !important; transition: all .14s ease;
}
#nav-investor .tableCell .ESGDataTableResultsTextEditable:hover { background: #f3f6f9 !important; }
#nav-investor .tableCell .ESGDataTableResultsTextEditable:focus { outline: none; background: #fff !important; border-color: #0D9488 !important; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
/* in-cell action chips (All/No companies, Years, Frameworks, Aggregated tabs) */
#nav-investor .button-white-linear.fontsize90 {
border-radius: 9px; border: 1px solid var(--aco-line); background: #fff !important; color: #0D9488 !important;
-webkit-text-fill-color: currentColor !important; font-weight: 600; font-size: 12px; padding: 5px 12px; margin: 2px 3px;
box-shadow: none; transition: all .15s ease;
}
#nav-investor .button-white-linear.fontsize90:hover { border-color: #9ad2cc; background: #f3faf9 !important; transform: translateY(-1px); }
/* clickable label links (purchased services + the per-row visibility/company summaries) */
#nav-investor [id^="InvestorLicense_"] { color: #0D9488; font-weight: 600; font-size: 12px; }
#nav-investor [id^="InvestorYears_"],
#nav-investor [id^="InvestorFrameworks_"],
#nav-investor [id^="InvestorAggTabs_"] { display: block; font-size: 12px; color: #5b6b78; text-align: left; }
/* contain the long "selected companies" list so one row can't fill the whole page */
#nav-investor [id^="InvestorIncludedCompanies_"] {
display: block; max-height: 132px; overflow-y: auto; text-align: left;
font-size: 12px; line-height: 1.5; color: #5b6b78; padding: 4px 6px;
background: #f8fafc; border: 1px solid var(--aco-line); border-radius: 8px; margin-top: 4px;
}
/* Active boolean → segmented toggle pill (parity with the other grids) */
#nav-investor .tableCell .p3radioContainer {
margin: 0; cursor: pointer; user-select: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
padding: 5px 11px; font-size: 12px; font-weight: 600; line-height: 1; color: #8595a3; background: #f1f4f7; border: 1px solid var(--aco-line);
}
#nav-investor .tableCell .p3radioContainer:first-of-type { border-radius: 8px 0 0 8px; border-right-width: 0; }
#nav-investor .tableCell .p3radioContainer:last-of-type { border-radius: 0 8px 8px 0; }
#nav-investor .tableCell .p3radioContainer input,
#nav-investor .tableCell .p3radioContainer .checkmark {
position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
margin: 0 !important; padding: 0 !important; pointer-events: none; border: none !important; background: none !important;
}
#nav-investor .tableCell .p3radioContainer:has(input:checked) { background: #0D9488; color: #fff; border-color: #0D9488; z-index: 1; }
/* footer buttons (Add / Refresh / Save) */
#nav-investor .button-white-linear.fontsize90[value^="Admin_"] {
border-radius: 11px; padding: 9px 18px; color: var(--aco-navy) !important; box-shadow: var(--aco-shadow); margin-right: 8px;
}
#nav-investor .button-white-linear.fontsize90[value="Admin_SaveInvestorCompanies"] { background: #0D9488 !important; color: #fff !important; border-color: transparent; }
#nav-investor .button-white-linear.fontsize90[value="Admin_SaveInvestorCompanies"]:hover { background: #0B7E73 !important; color: #fff !important; }
/* export button → ghost style */
#nav-investor .button-simple.buttonBorder {
border-radius: 12px; border: 1px solid var(--aco-line); background: #fff; color: var(--aco-navy);
padding: 9px 15px; font-weight: 600; font-size: 13px; box-shadow: var(--aco-shadow);
}
#nav-investor .button-simple.buttonBorder:hover { color: #0D9488; border-color: #9ad2cc; }
/* =========================================================================================
EXCEL-GRID LAYER — Εταιρείες (#nav-company) + Εμπλεκόμενοι (#nav-investor)
Turns both grids from "rows of form fields" into a spreadsheet, without restructuring
either one: the CELL carries the grid lines and every piece of state, and the control
inside it is stripped of its own chrome (border, radius, focus ring) so it reads as text
sitting in a cell. Row numbers come from CSS counters drawn into an absolutely-positioned
left gutter, which is why neither Razor template nor the column-picker's grid-template
maths had to change. Behaviour half: wwwroot/js/excelGrid.js (paints is-active /
is-inrange / is-activerow / is-activecol).
Declared AFTER the two reskin blocks above so it wins the ties on equal specificity.
========================================================================================= */
:root { --exg-line: #e4eaf1; --exg-line-strong: #cfd8e3; --exg-head: #eef2f7; --exg-brand: #0D9488; }
/* ---- sticky header + the gutter corner ---- */
#nav-company .Tableheader.aco-grid,
#nav-investor .Tableheader {
position: sticky; top: 0; z-index: 6; border-radius: 10px 10px 0 0; overflow: visible;
}
#nav-company .Tableheader.aco-grid, #nav-company .submissionsBodyContainerAdmin,
#nav-investor .Tableheader, #nav-investor .submissionsBodyContainerAdmin {
padding-left: 44px !important; /* the row-number rail lives here */
position: relative; border-radius: 10px 10px 0 0;
}
#nav-company .submissionsBodyContainerAdmin, #nav-investor .submissionsBodyContainerAdmin { border-radius: 0 0 10px 10px; }
/* header corner block above the numbers */
#nav-company .Tableheader.aco-grid::before, #nav-investor .Tableheader::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 44px;
background: var(--exg-head); border-right: 1px solid var(--exg-line-strong); border-radius: 10px 0 0 0;
}
/* ---- row-number rail (counters, so no markup change) ---- */
#nav-company .submissionsBodyContainerAdmin { counter-reset: exgrow; }
#nav-investor .submissionsBodyContainerAdmin { counter-reset: exgrow; }
#nav-company .submissionsBodyContainerAdmin .aco-row,
#nav-investor .submissionsBodyContainerAdmin > .row { counter-increment: exgrow; position: relative; }
#nav-company .submissionsBodyContainerAdmin .aco-row::before,
#nav-investor .submissionsBodyContainerAdmin > .row::before {
content: counter(exgrow);
/* absolute keeps it out of the grid/flex flow, so it never becomes a track of its own */
position: absolute; left: -44px; top: 0; bottom: 0; width: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--exg-head); border-right: 1px solid var(--exg-line-strong); border-bottom: 1px solid var(--exg-line);
font-size: 10.5px; font-weight: 700; color: #64748b; z-index: 1;
}
#nav-company .submissionsBodyContainerAdmin .aco-row.is-activerow::before,
#nav-investor .submissionsBodyContainerAdmin > .row.is-activerow::before { background: #d6e6f4; color: #0B1220; }
/* ---- grid lines ---- */
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col] { border-right: 1px solid var(--exg-line) !important; }
#nav-company .Tableheader.aco-grid [data-col] { border-right: 1px solid var(--exg-line-strong) !important; }
#nav-investor .submissionsBodyContainerAdmin .tableCell,
#nav-investor .submissionsBodyContainerAdmin .tableCellBorderOnly,
#nav-investor .Tableheader .tableCell { border-right: 1px solid var(--exg-line) !important; }
#nav-company .submissionsBodyContainerAdmin .aco-row { border-bottom: 1px solid var(--exg-line); }
/* white rows + a hover tint read more like a spreadsheet than zebra banding does */
#nav-company .submissionsBodyContainerAdmin .aco-row.aco-even,
#nav-investor .submissionsBodyContainerAdmin > .row:nth-of-type(even) { background: transparent; }
#nav-company .submissionsBodyContainerAdmin .aco-row:hover,
#nav-company .submissionsBodyContainerAdmin .aco-row.aco-even:hover,
#nav-investor .submissionsBodyContainerAdmin > .row:hover { background: #f6f9fc; }
/* ---- cells go full-bleed; the control fills them edge to edge ---- */
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col] { padding: 0 !important; align-items: stretch; }
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col] > input,
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col] > select,
#nav-investor .submissionsBodyContainerAdmin .tableCell > input,
#nav-investor .submissionsBodyContainerAdmin .tableCell > select {
height: 100% !important; min-height: 42px; padding: 0 10px !important;
border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
/* cells holding controls rather than a value keep their breathing room */
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col="active"],
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col="info"],
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col="tier"] { padding: 5px 8px !important; align-items: center; }
/* no per-input focus ring anywhere — the cell draws it (see .is-active below) */
#nav-company .tableCell .ESGDataTableResultsTextEditable:focus,
#nav-company .tableCell select.ESGDataTableResultsText:focus,
#nav-investor .tableCell .ESGDataTableResultsTextEditable:focus {
background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
#nav-company .tableCell .ESGDataTableResultsTextEditable:hover,
#nav-company .tableCell select.ESGDataTableResultsText:hover,
#nav-investor .tableCell .ESGDataTableResultsTextEditable:hover { background: transparent !important; }
/* ---- active cell + range selection ---- */
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col].is-inrange,
#nav-investor .submissionsBodyContainerAdmin .tableCell.is-inrange { background: rgba(13,148,136,.11); }
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col].is-active,
#nav-investor .submissionsBodyContainerAdmin .tableCell.is-active {
box-shadow: inset 0 0 0 2px var(--exg-brand); background: #fff; position: relative; z-index: 2;
}
#nav-company .submissionsBodyContainerAdmin .aco-row.is-activerow,
#nav-investor .submissionsBodyContainerAdmin > .row.is-activerow { background: #f2f8fb; }
#nav-company .Tableheader.aco-grid [data-col].is-activecol,
#nav-investor .Tableheader .tableCell.is-activecol { background: #d6e6f4; color: #0B1220; }
/* Keep the action column on ONE line — wrapped icons make every row a different height, which is
the single thing that stops a grid reading as a spreadsheet. */
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col="info"] { flex-wrap: nowrap !important; gap: 3px !important; }
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col="info"] .button-white-linear.buttonBorder,
#nav-company .submissionsBodyContainerAdmin .aco-row [data-col="tier"] .button-white-linear.buttonBorder {
min-width: 26px !important; height: 26px !important; padding: 0 6px !important; font-size: 11px;
}
/* the investor rows carry stacked control clusters (companies / years / frameworks / agg tabs);
tighten them so the rows stay as close to a uniform height as their content allows */
#nav-investor .submissionsBodyContainerAdmin .tableCellBorderOnly { padding: 6px 8px !important; }
#nav-investor .submissionsBodyContainerAdmin .button-white-linear.fontsize90 { padding: 4px 10px; margin: 1px 2px; font-size: 11.5px; }
#nav-investor .submissionsBodyContainerAdmin [id^="InvestorIncludedCompanies_"] { max-height: 84px; }
/* ---- sticky bottom action bar (Add/Refresh/Save + paging) ----
.dashboard-container (the non-extended admin shell) is ITSELF the scrolling element
(height: calc(100vh - headerHeight) + overflow:auto), not the browser window — so with up to 100
rows on a page, the old "just put the buttons after the table" layout could put them a very long
scroll away. Sticky pins this bar to the bottom of THAT container, so it's reachable however far
down the row list you've scrolled. */
#nav-company .aco-actionbar, #nav-investor .aco-actionbar {
position: sticky; bottom: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-top: 14px; padding: 12px 4px;
background: #fff; border-top: 1px solid var(--aco-line);
box-shadow: 0 -8px 20px -16px rgba(16,40,70,.16);
}
#nav-company .aco-actionbar-btns, #nav-investor .aco-actionbar-btns { display: flex; align-items: center; gap: 8px; }
#nav-company .aco-actionbar .button-white-linear.fontsize90,
#nav-investor .aco-actionbar .button-white-linear.fontsize90 { margin-right: 0; }
/* ---- paging controls, reskinned: the shared paging.cshtml partial (used by many other pages too,
so its own markup/classes stay untouched) renders plain "|< << >> >|" glyphs as button text —
swap those for crisp chevron icons here, scoped to just this bar, and turn the page-range text
into a chip matching the rest of the toolbar's language. ---- */
#nav-company .aco-actionbar-paging, #nav-investor .aco-actionbar-paging { display: flex; align-items: center; gap: 4px; }
#nav-company .aco-actionbar-paging .button-white-linear.fontsize90,
#nav-investor .aco-actionbar-paging .button-white-linear.fontsize90 {
font-size: 0; min-width: 34px; height: 34px; padding: 0; margin-right: 0;
display: inline-flex; align-items: center; justify-content: center;
}
#nav-company .aco-actionbar-paging .button-white-linear.fontsize90::before,
#nav-investor .aco-actionbar-paging .button-white-linear.fontsize90::before {
font-size: 13px; line-height: 1; font-family: inherit;
}
#nav-company .aco-actionbar-paging .button-white-linear.fontsize90[value$="_FirstPage"]::before,
#nav-investor .aco-actionbar-paging .button-white-linear.fontsize90[value$="_FirstPage"]::before { content: "⇤"; }
#nav-company .aco-actionbar-paging .button-white-linear.fontsize90[value$="_PreviousPage"]::before,
#nav-investor .aco-actionbar-paging .button-white-linear.fontsize90[value$="_PreviousPage"]::before { content: "‹"; font-size: 17px; }
#nav-company .aco-actionbar-paging .button-white-linear.fontsize90[value$="_NextPage"]::before,
#nav-investor .aco-actionbar-paging .button-white-linear.fontsize90[value$="_NextPage"]::before { content: "›"; font-size: 17px; }
#nav-company .aco-actionbar-paging .button-white-linear.fontsize90[value$="_LastPage"]::before,
#nav-investor .aco-actionbar-paging .button-white-linear.fontsize90[value$="_LastPage"]::before { content: "⇥"; }
#nav-company .aco-actionbar-paging span, #nav-investor .aco-actionbar-paging span {
font-size: 12px; font-weight: 600; color: #5b6b78; background: #f5f8fb;
border: 1px solid var(--aco-line); border-radius: 9px; padding: 8px 12px; margin: 0 2px; white-space: nowrap;
}
/* ---- shortcut legend + the module's fallback toast ---- */
.exg-keyhint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #64748b; margin: 0 0 8px 2px; }
.exg-keyhint kbd {
font-family: inherit; font-size: 10px; font-weight: 700; color: #0B1220; background: var(--exg-head);
border: 1px solid #d7dfe8; border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; margin: 0 1px;
}
.exg-keyhint span { white-space: nowrap; }
.exg-toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
background: #0B1220; color: #fff; font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 11px;
box-shadow: 0 18px 40px -14px rgba(11,18,32,.6); z-index: 2147483003; opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease; max-width: 78vw; text-align: center;
}
.exg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.exg-toast.is-err { background: #b3261e; }
/* ======================================================================
22. CONFIGURATION (frameworks admin) — .cfg-*
====================================================================== */
/* breathing room between the floating top nav and the page title (Submissions etc.) */
.mui-page-head { margin-top: 14px !important; }
/* Config palette. The modals are rendered OUTSIDE #cfgRoot (.cfg), so the vars must be
declared on the overlays too — otherwise var(--cfg-*) is undefined there and teal/blue
buttons & selected chips render with no background (grey/unreadable). */
/* .cfg-confirm-back is appended to document.body for the same reason and needs them just as much:
without it a .cfg-field input inside a confirm dialog resolves border: 1px solid var(--cfg-line)
to an invalid shorthand, which falls back to border-style: none — the field renders as bare text
with no box at all. */
.cfg, .cfg-modal-overlay, .cfg-confirm-back {
--cfg-brand: #0D9488; --cfg-brand-2: #0B7E73; --cfg-accent: #0EA5E9;
--cfg-navy: #0B1220; --cfg-ink: #334155; --cfg-soft: #64748b; --cfg-line: rgba(20,45,70,.10);
}
.cfg {
margin-top: 60px; padding: 6px 6px 28px;
font-family: 'Inter','Segoe UI',system-ui,sans-serif; color: var(--cfg-ink);
}
.cfg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--cfg-brand-2); }
.cfg-title { font-size: 24px; font-weight: 800; color: var(--cfg-navy); letter-spacing: -.3px; line-height: 1.1; margin-top: 3px; }
.cfg-sub { font-size: 13px; color: var(--cfg-soft); margin-top: 4px; }
/* year bar */
.cfg-yearbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
background: rgba(255,255,255,.6); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px);
border: 1px solid var(--cfg-line); border-radius: 14px; padding: 9px 12px; box-shadow: 0 10px 26px -20px rgba(16,40,70,.4); }
.cfg-yearbar-label { font-size: 12px; font-weight: 600; color: var(--cfg-soft); margin-right: 6px; }
.cfg-year { border: 1px solid var(--cfg-line); background: #fff; color: var(--cfg-soft); border-radius: 9px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.cfg-year:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); }
.cfg-year.is-active { background: var(--cfg-brand); border-color: var(--cfg-brand); color: #fff; box-shadow: 0 6px 14px -8px rgba(13,148,136,.6); }
/* buttons */
.cfg-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent; transition: all .15s ease; -webkit-text-fill-color: currentColor; }
.cfg-btn svg { flex: 0 0 auto; }
.cfg-btn-lg { padding: 10px 18px; font-size: 13.5px; border-radius: 12px; }
.cfg-btn-ghost { background: #fff; border-color: var(--cfg-line); color: var(--cfg-ink); }
.cfg-btn-ghost:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); }
.cfg-btn-icon { padding: 8px; }
.cfg-btn-primary { background: var(--cfg-brand); color: #fff; box-shadow: 0 8px 16px -8px rgba(13,148,136,.6); }
.cfg-btn-primary:hover { background: var(--cfg-brand-2); transform: translateY(-1px); }
.cfg-btn-accent { background: var(--cfg-accent); color: #fff; box-shadow: 0 8px 16px -8px rgba(14,165,233,.6); }
.cfg-btn-accent:hover { background: #0284c7; transform: translateY(-1px); }
.cfg-btn-danger { background: #fff; border-color: #f0c2c2; color: #c0392b; }
.cfg-btn-danger:hover { background: #fdecec; }
/* disabled buttons: clearly greyed but still readable (was washing out to near-white) */
.cfg-btn:disabled, .cfg-btn[disabled] { background: #e6eaf0 !important; border-color: #e6eaf0 !important; color: #8b96a4 !important; -webkit-text-fill-color: #8b96a4 !important; box-shadow: none !important; transform: none !important; cursor: not-allowed; }
/* group cards */
.cfg-body { display: flex; flex-direction: column; gap: 14px; }
.cfg-group { background: #fff; border: 1px solid var(--cfg-line); border-radius: 16px; box-shadow: 0 12px 30px -22px rgba(16,40,70,.4), 0 1px 4px -2px rgba(16,40,70,.1); overflow: hidden; }
.cfg-group.is-inactive { opacity: .7; }
.cfg-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #f7fafb; border-bottom: 1px solid var(--cfg-line); flex-wrap: wrap; }
.cfg-group-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cfg-group-name { font-size: 15.5px; font-weight: 700; color: var(--cfg-navy); }
.cfg-type-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.cfg-type-badge.framework { background: rgba(13,148,136,.12); color: #0B7E73; }
.cfg-type-badge.report { background: rgba(14,165,233,.12); color: #0369a1; }
.cfg-group-count { font-size: 11px; font-weight: 700; color: var(--cfg-soft); background: rgba(20,45,70,.06); border-radius: 999px; padding: 2px 9px; }
.cfg-inactive-tag { font-size: 10.5px; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 6px; padding: 2px 7px; }
.cfg-group-actions { display: flex; gap: 8px; }
.cfg-fw-list { display: flex; flex-direction: column; }
.cfg-fw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid rgba(20,45,70,.05); flex-wrap: wrap; transition: background .12s ease; }
.cfg-fw:last-child { border-bottom: none; }
.cfg-fw:hover { background: rgba(13,148,136,.04); }
.cfg-fw.is-inactive .cfg-fw-name { color: var(--cfg-soft); text-decoration: line-through; }
.cfg-fw-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cfg-fw-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cfg-fw-dot.on { background: var(--cfg-brand); box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.cfg-fw-dot.off { background: #cbd5e1; }
.cfg-fw-name { font-size: 13.5px; font-weight: 600; color: var(--cfg-navy); }
.cfg-fw-id { font-size: 11px; font-weight: 600; color: var(--cfg-soft); font-variant-numeric: tabular-nums; }
.cfg-fw-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfg-act-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cfg-soft); }
.cfg-fw-empty, .cfg-empty { padding: 18px; font-size: 13px; color: var(--cfg-soft); text-align: center; }
.cfg-empty { padding: 50px 18px; }
/* default checkbox */
.cfg-default { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: var(--cfg-ink); user-select: none; }
.cfg-default input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-default-box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #cbd5e1; background: #fff; position: relative; transition: all .15s ease; }
.cfg-default input:checked + .cfg-default-box { background: var(--cfg-brand); border-color: var(--cfg-brand); }
.cfg-default input:checked + .cfg-default-box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* switch */
.cfg-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--cfg-ink); user-select: none; }
.cfg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-switch-ui { width: 38px; height: 21px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .18s ease; flex: 0 0 auto; }
.cfg-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; }
.cfg-switch input:checked + .cfg-switch-ui { background: var(--cfg-brand); }
.cfg-switch input:checked + .cfg-switch-ui::after { transform: translateX(17px); }
/* modals */
/* Above the cookie-consent banner (z-index 2147483000): otherwise the fixed bottom banner can overlap
these centred modals' footer buttons on shorter viewports and swallow clicks meant for the modal. */
.cfg-modal-overlay { position: fixed; inset: 0; z-index: 2147483002; display: none; align-items: center; justify-content: center;
background: rgba(15,25,38,.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 20px; }
.cfg-modal-overlay.open { display: flex; }
.cfg-modal { width: 460px; max-width: 96vw; max-height: 90vh; overflow: auto;
background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
border: 1px solid rgba(255,255,255,.8); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(16,40,70,.6), inset 0 1px 0 rgba(255,255,255,.7);
animation: cfgPop .18s ease; }
.cfg-modal-wide { width: 560px; }
.cfg-modal-xwide { width: 940px; }
/* The content grid is a spreadsheet, and a spreadsheet wants the screen. Sized as a share of the
viewport rather than a fixed px width so it fills a large monitor instead of stopping at 1520px. */
/* The framework content editor is a spreadsheet, so it takes a fixed share of the viewport rather than
a pixel cap — on a wide screen a 2400px ceiling left the grid floating in the middle of the page. */
.cfg-modal-xxwide { width: 95vw; max-width: 95vw; }
/* activation grid — frameworks (grouped) x years, one-click complete on/off per cell */
.cfg-actgrid-wrap { margin-top: 10px; max-height: 62vh; overflow: auto; border: 1px solid var(--cfg-line); border-radius: 12px; background: #fff; }
.cfg-actgrid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.cfg-actgrid thead th {
position: sticky; top: 0; z-index: 3;
padding: 9px 12px; text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
color: var(--cfg-soft); background: #f5f8fb; border-bottom: 1px solid var(--cfg-line); white-space: nowrap;
box-shadow: 0 1px 0 var(--cfg-line);
}
.cfg-actgrid thead th:first-child { text-align: left; left: 0; z-index: 4; }
.cfg-actgrid-group td {
position: sticky; left: 0; z-index: 1;
padding: 9px 12px 6px; font-weight: 700; color: #fff; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
background: var(--cfg-navy); border-bottom: 1px solid var(--cfg-line);
}
.cfg-actgrid tbody tr:not(.cfg-actgrid-group):hover { background: rgba(13,148,136,.05); }
.cfg-actgrid tbody tr:not(.cfg-actgrid-group):nth-child(even) { background: rgba(20,45,70,.015); }
.cfg-actgrid-name {
position: sticky; left: 0; z-index: 1;
padding: 7px 12px; white-space: nowrap; color: var(--cfg-navy); font-weight: 600; font-size: 12px;
background-color: #fff; border-right: 1px solid var(--cfg-line);
}
.cfg-actgrid tbody tr:not(.cfg-actgrid-group):hover .cfg-actgrid-name { background-color: #f1f8f7; }
.cfg-actgrid tbody tr:not(.cfg-actgrid-group):nth-child(even) .cfg-actgrid-name { background-color: #fafbfc; }
.cfg-actgrid-cell { padding: 5px 8px; text-align: center; border-bottom: 1px solid rgba(20,45,70,.05); }
.cfg-actgrid-sw { width: 32px; height: 19px; border-radius: 999px; border: 1px solid var(--cfg-line); cursor: pointer; position: relative; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; padding: 0; }
.cfg-actgrid-sw:hover { box-shadow: 0 0 0 3px rgba(20,45,70,.06); }
.cfg-actgrid-sw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .14s ease; }
.cfg-actgrid-off { background: #e3e7ee; }
.cfg-actgrid-on { background: #17b26a; border-color: #17b26a; }
.cfg-actgrid-on::after { transform: translateX(13px); }
/* dot marking a year-cell with its own override, distinct from the framework's general Active switch */
.cfg-actgrid-ovmark { display: inline-block; margin-left: 4px; color: var(--mui-blue); font-weight: 900; cursor: help; }
/* flags a year-cell whose effective group differs from the framework's base group row (per-year override) */
.cfg-actgrid-groupbadge { display: inline-block; margin-top: 4px; font-size: 9px; font-weight: 600; color: #8a5a00; background: #fff4e0; border-radius: 6px; padding: 1px 5px; cursor: help; white-space: nowrap; }
@keyframes cfgPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cfg-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cfg-line); font-size: 15px; font-weight: 700; color: var(--cfg-navy); }
.cfg-x { border: none; background: none; font-size: 22px; line-height: 1; color: var(--cfg-soft); cursor: pointer; padding: 0 4px; }
.cfg-x:hover { color: var(--cfg-navy); }
.cfg-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.cfg-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--cfg-line); }
.cfg-modal-foot-split { justify-content: space-between; }
.cfg-modal-foot-split > div { display: flex; gap: 10px; }
.cfg-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--cfg-soft); }
.cfg-field > span { font-weight: 600; }
.cfg-field input, .cfg-field select { border: 1px solid var(--cfg-line); border-radius: 9px; padding: 8px 11px; font-size: 13.5px; font-weight: 500; color: var(--cfg-navy); background: #fff; -webkit-text-fill-color: currentColor; }
.cfg-field input:focus, .cfg-field select:focus { outline: none; border-color: var(--cfg-brand); box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
.cfg-field-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* predefined document-lines editor (framework modal) */
.cfg-doclines-hint { font-size: 11px; font-weight: 500; color: var(--cfg-soft); margin: -1px 0 2px; }
/* ---- Configuration page: health strip, sticky year bar + search, per-year row chips ---------- */
.cfg-health { border: 1px solid #e6edf3; border-radius: 12px; background: #fff; padding: 12px 14px; margin-bottom: 16px; }
.cfg-health.has-err { border-color: #F0D8C8; background: #FFFBF9; }
.cfg-health.has-warn { border-color: #EBE3CF; background: #FFFDF7; }
.cfg-health.is-ok { border-color: #DCEEE9; background: #F8FCFB; }
.cfg-health-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cfg-health-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #33414d; }
.cfg-health.has-err .cfg-health-title { color: #B4441A; }
.cfg-health.has-warn .cfg-health-title { color: #8A6D1F; }
.cfg-health.is-ok .cfg-health-title { color: #00775A; }
.cfg-health-counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; color: #7b8794; }
.cfg-health-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-health-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: #44525f; }
.cfg-health-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex: 0 0 6px; }
.cfg-health-item.sev-err .cfg-health-dot { background: #E2453B; }
.cfg-health-item.sev-warn .cfg-health-dot { background: #E0A83B; }
.cfg-health-txt { flex: 1 1 auto; }
.cfg-health-go { border: 1px solid #cdd7e2; background: #fff; color: #00639B; font-family: inherit; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.cfg-health-go:hover { border-color: #00639B; background: #F2F8FC; }
.cfg-yearbar-sticky { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 1px 0 #e6edf3; }
.cfg-yearbar-search { margin-left: auto; display: flex; align-items: center; gap: 6px; border: 1px solid #dbe3ec; border-radius: 999px; padding: 4px 10px; background: #fff; min-width: 260px; color: #94a3b0; }
.cfg-yearbar-search:focus-within { border-color: #00AA7D; }
.cfg-yearbar-search input { border: 0; outline: 0; font-family: inherit; font-size: 12.5px; color: #33414d; background: transparent; flex: 1 1 auto; min-width: 0; }
.cfg-search-x { border: 0; background: transparent; color: #94a3b0; font-size: 16px; line-height: 1; cursor: pointer; visibility: hidden; }
/* Sits between the name and the actions in the same flex row (.cfg-fw). mr:auto keeps the chips
hugging the framework name and pushes the action cluster to the right edge, instead of the
chips floating in the middle of the row. */
.cfg-fw-year { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: 14px; margin-right: auto; }
.cfg-ychip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef2f6; color: #55636f; white-space: nowrap; }
.cfg-ychip-muted { background: #f5f7f9; color: #94a3b0; font-weight: 600; }
.cfg-ychip-on { background: #C9EFEB; color: #00775A; }
.cfg-ychip-off { background: #FFE7DD; color: #B4441A; }
.cfg-ychip-move { background: #E7EDFB; color: #3A4FA0; }
.cfg-btn-lbl { white-space: nowrap; }
.cfg-fw-more { position: relative; display: inline-block; }
.cfg-fw-more-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 1px solid #e6edf3; border-radius: 10px; box-shadow: 0 10px 28px rgba(16,40,60,.14); padding: 5px; min-width: 260px; }
.cfg-fw-more.open .cfg-fw-more-menu { display: block; }
.cfg-fw-more-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; font-family: inherit; font-size: 12.5px; color: #33414d; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.cfg-fw-more-menu button:hover { background: #f4f7fa; }
@keyframes cfgFwFlash { 0%, 100% { background: transparent; } 25%, 75% { background: #FFF6D8; } }
.cfg-fw-flash { animation: cfgFwFlash 2.2s ease; }
/* Framework modal scope zones: the modal is opened with a reference year selected, so it has to be
obvious at a glance which fields are per-year and which rewrite every year at once. */
.cfg-allzone-head, .cfg-yearzone-head { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.cfg-allzone-head { color: #94a3b0; }
.cfg-yearzone-head { color: #00775A; }
.cfg-yearzone { background: #F6FBFA; border: 1px solid #DCEEE9; border-radius: 10px; padding: 10px 12px; }
.cfg-year-note { font-size: 11.5px; line-height: 1.45; color: #B4441A; background: #FFF6F2; border: 1px solid #F0D8C8; border-radius: 8px; padding: 7px 10px; margin-top: 7px; }
.cfg-autofill-status { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 10px; padding: 8px 11px;
border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 1.45; }
.cfg-autofill-status svg { flex: 0 0 auto; margin-top: 1px; }
.cfg-autofill-status.is-on { background: rgba(16,185,129,.10); color: #0d9367; }
.cfg-autofill-status.is-off { background: rgba(148,163,184,.14); color: #64748b; }
.cfg-autofill-check-btn { border: 1px solid var(--cfg-line); background: #fff; color: var(--cfg-navy);
border-radius: 9px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; margin: -4px 0 10px; }
.cfg-autofill-check-btn:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); }
.cfg-autofill-check-btn:disabled { opacity: .6; cursor: default; }
.cfg-autofill-audit:empty { display: none; }
.cfg-autofill-audit-summary { font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 7px 11px; margin-bottom: 8px; }
.cfg-autofill-audit-summary.all-ok { background: rgba(16,185,129,.10); color: #0d9367; }
.cfg-autofill-audit-summary.has-issues { background: rgba(239,68,68,.10); color: #b91c1c; }
.cfg-autofill-audit-empty { font-size: 11.5px; color: var(--cfg-soft); font-weight: 600; }
.cfg-autofill-audit-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 10px; }
.cfg-autofill-audit-table th { text-align: left; font-weight: 700; color: var(--cfg-soft); padding: 4px 8px; border-bottom: 1px solid var(--cfg-line); }
.cfg-autofill-audit-table td { padding: 5px 8px; border-bottom: 1px solid var(--cfg-line); color: var(--cfg-navy); }
.cfg-audit-fail { color: #b91c1c; font-weight: 700; }
/* ---- "Suggest fixes" result list (Data/KPIs algorithm tools) ---- */
.cfg-algo-suggest-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.cfg-algo-suggest-item { border: 1px solid var(--cfg-line); border-radius: 10px; padding: 8px 11px; font-size: 11.5px; }
.cfg-algo-suggest-code { font-weight: 800; color: var(--cfg-navy); margin-bottom: 3px; }
.cfg-algo-suggest-orig { font-family: 'SFMono-Regular', Consolas, monospace; color: #b91c1c; background: rgba(239,68,68,.06); border-radius: 6px; padding: 3px 6px; word-break: break-all; }
.cfg-algo-suggest-fix { font-family: 'SFMono-Regular', Consolas, monospace; color: #0d9367; background: rgba(16,185,129,.08); border-radius: 6px; padding: 3px 6px; margin-top: 5px; word-break: break-all; }
.cfg-algo-suggest-reason { color: var(--cfg-soft); margin-top: 4px; font-style: italic; }
.cfg-algo-suggest-diag { color: var(--cfg-soft); margin-top: 5px; }
.cfg-algo-suggest-item .cfg-autofill-check-btn { margin: 8px 0 0; }
.cfg-doclines { display: flex; flex-direction: column; gap: 6px; }
.cfg-docline { display: flex; align-items: center; gap: 8px; }
.cfg-docline-name { flex: 1 1 auto; border: 1px solid var(--cfg-line); border-radius: 9px; padding: 8px 11px; font-size: 13.5px; font-weight: 500; color: var(--cfg-navy); background: #fff; }
.cfg-docline-name:focus { outline: none; border-color: var(--cfg-brand); box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
.cfg-docline-del { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--cfg-line); border-radius: 8px; background: #fff; color: #b4424e; font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.cfg-docline-del:hover { background: #fdecee; border-color: #f3c0c6; }
.cfg-docline-autofill-lbl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--cfg-soft); white-space: nowrap; cursor: pointer; }
.cfg-docline-autofill-lbl input { margin: 0; cursor: pointer; }
.cfg-docline-lock-lbl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--cfg-soft); white-space: nowrap; cursor: pointer; }
.cfg-docline-lock-lbl input { margin: 0; cursor: pointer; }
.cfg-doclines-add { align-self: flex-start; margin-top: 4px; border: 1px dashed var(--cfg-line); background: #fff; color: var(--cfg-brand); font-size: 12.5px; font-weight: 700; border-radius: 9px; padding: 6px 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.cfg-doclines-add:hover { background: rgba(13,148,136,.06); border-color: var(--cfg-brand); }
.cfg-field-sm { max-width: 110px; }
/* year toggle chips (replaced the multi-select) */
.cfg-field-yearchips { flex: 1 1 100%; }
.cfg-yearpick { display: flex; flex-wrap: wrap; gap: 5px; }
.cfg-ychipbtn { border: 1px solid var(--cfg-line); background: #fff; color: var(--cfg-soft); border-radius: 999px; font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; transition: all .13s ease; }
.cfg-ychipbtn:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); }
.cfg-ychipbtn.is-on { background: var(--cfg-brand); border-color: var(--cfg-brand); color: #fff; }
.cfg-scope-box { display: flex; flex-direction: column; gap: 6px; }
.cfg-scope-box select[multiple] { width: 100%; border: 1px solid var(--cfg-line); border-radius: 10px; padding: 4px; font-size: 13px; color: var(--cfg-navy); }
.cfg-scope-box select[multiple] option { padding: 5px 8px; border-radius: 6px; }
.cfg-optsearch { border: 1px solid var(--cfg-line); border-radius: 9px; padding: 7px 11px; font-size: 13px; }
.cfg-optsearch:focus { outline: none; border-color: var(--cfg-brand); }
.cfg-allyears { margin-top: 4px; }
/* toast — must outrank .cfg-modal-overlay (z-index 2147483002); every config
editor IS a modal, so a toast fired while one is open (e.g. a save error)
was rendering behind it, completely invisible. */
.cfg-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 2147483003;
background: rgba(15,25,38,.92); color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 12px;
box-shadow: 0 18px 40px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: all .25s ease; }
.cfg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cfg-toast.ok { border-left: 4px solid #0D9488; }
.cfg-toast.err { border-left: 4px solid #e74c3c; }
/* ---- Configuration: additions (show-hidden, max chip, activations) ---- */
.cfg-header-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-showhidden { font-size: 12.5px; color: var(--cfg-soft); }
.cfg-max-chip { font-size: 11px; font-weight: 700; color: #0369a1; background: rgba(14,165,233,.12); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cfg-act-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cfg-soft); background: rgba(20,45,70,.05); border: 1px solid transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: all .14s ease; -webkit-text-fill-color: currentColor; }
.cfg-act-count:hover { color: var(--cfg-brand); background: rgba(13,148,136,.1); border-color: rgba(13,148,136,.25); }
.cfg-muted { color: var(--cfg-soft); font-size: 13px; }
/* dashboard-mapping code picker */
.cfg-codepicker { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--cfg-line); border-radius: 9px; padding: 4px 8px; margin: 4px 0 10px; }
.cfg-codepicker-row { display: grid; grid-template-columns: 1fr 32px 32px 44px; align-items: center; gap: 4px; padding: 4px 2px; font-size: 12.5px; }
.cfg-codepicker-row:not(:last-child) { border-bottom: 1px solid #f1f3f6; }
.cfg-codepicker-row input { justify-self: center; cursor: pointer; }
.cfg-codepicker-code { color: var(--cfg-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; min-width: 0; }
.cfg-codepicker-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cfg-codepicker-head { font-size: 10.5px; font-weight: 700; color: var(--cfg-soft); text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; background: #fff; }
.cfg-dashall-ok { color: #0f7b5c; }
.cfg-dashall-missing { color: #b4424e; }
/* dashboard-mapping cards (list view of what's already configured) */
.cfg-dashcards { display: flex; flex-direction: column; gap: 10px; }
.cfg-dashempty { font-size: 13px; color: var(--cfg-soft); text-align: center; padding: 22px 12px; border: 1.5px dashed var(--cfg-line); border-radius: 12px; }
.cfg-dashcard { border: 1px solid var(--cfg-line); border-radius: 12px; padding: 12px 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.cfg-dashcard:hover { border-color: var(--cfg-brand); box-shadow: 0 2px 10px rgba(20,45,70,.06); }
.cfg-dashcard.is-inactive { opacity: .58; }
.cfg-dashcard-head { display: flex; align-items: center; gap: 10px; }
.cfg-dashcard-pill { font-size: 11.5px; font-weight: 800; padding: 3px 11px; border-radius: 999px; color: #fff; background: var(--cfg-brand); letter-spacing: .02em; white-space: nowrap; }
.cfg-dashcard-pill.dash-Article20 { background: #0d9488; }
.cfg-dashcard-pill.dash-Article19 { background: #6366f1; }
.cfg-dashcard-pill.dash-Article16 { background: #0369a1; }
.cfg-dashcard-pill.dash-Combined { background: #a16207; }
.cfg-dashcard-meta { font-size: 12.5px; font-weight: 600; color: var(--cfg-soft); flex: 1 1 auto; }
.cfg-dashcard-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.cfg-dashcard-edit, .cfg-dashcard-del { border: 1px solid var(--cfg-line); border-radius: 8px; background: #fff; cursor: pointer; height: 30px; font-size: 12.5px; font-weight: 700; color: var(--cfg-navy); display: inline-flex; align-items: center; gap: 5px; transition: all .14s ease; }
.cfg-dashcard-edit { padding: 0 11px; }
.cfg-dashcard-edit:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); background: rgba(13,148,136,.06); }
.cfg-dashcard-del { width: 30px; justify-content: center; color: #b4424e; font-size: 18px; line-height: 1; }
.cfg-dashcard-del:hover { background: #fdecee; border-color: #f3c0c6; }
.cfg-dashcard-codes { display: flex; flex-wrap: wrap; gap: 5px 20px; margin-top: 10px; font-size: 12.5px; color: var(--cfg-navy); }
.cfg-dashcard-codes b { font-weight: 800; color: var(--cfg-soft); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.cfg-dashcard-muted { color: var(--cfg-soft); font-style: italic; }
.cfg-dashadd { margin-top: 12px; width: 100%; border: 1.5px dashed var(--cfg-line); background: #fff; color: var(--cfg-brand); font-size: 13px; font-weight: 800; border-radius: 11px; padding: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all .15s ease; }
.cfg-dashadd:hover { background: rgba(13,148,136,.06); border-color: var(--cfg-brand); }
.cfg-dashback { border: none; background: none; color: var(--cfg-soft); font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; margin-bottom: 12px; }
.cfg-dashback:hover { color: var(--cfg-brand); }
.cfg-dashform-title { font-size: 14.5px; font-weight: 800; color: var(--cfg-navy); margin-bottom: 4px; }
/* ---- dashboard mapping: plain-language explainer, examples and the dry-run check ---- */
.cfg-dashexplain { border: 1px solid var(--cfg-line); border-left: 3px solid var(--cfg-brand); border-radius: 10px; padding: 12px 14px; background: #fbfdfd; }
.cfg-dashexplain-t { font-size: 13px; font-weight: 800; color: var(--cfg-navy); }
.cfg-dashexplain-b { font-size: 12.5px; color: var(--cfg-navy); margin-top: 4px; line-height: 1.5; }
.cfg-dashexplain-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cfg-dfx { font-size: 11.5px; font-weight: 700; color: var(--cfg-soft); background: rgba(20,45,70,.05); border-radius: 6px; padding: 3px 9px; }
.cfg-dfx-hi { color: #fff; background: var(--cfg-brand); }
.cfg-dfarrow { color: var(--cfg-soft); font-size: 12px; }
.cfg-dashexplain-note { font-size: 11.5px; color: var(--cfg-soft); margin-top: 9px; line-height: 1.5; }
.cfg-dashlist-actions { display: flex; gap: 8px; align-items: center; }
.cfg-dashlist-actions .cfg-dashadd { flex: 1 1 auto; }
.cfg-dashlist-actions .cfg-btn { margin-top: 12px; white-space: nowrap; }
.cfg-codepicker-row.is-unused .cfg-codepicker-code { color: var(--cfg-soft); }
.cfg-codepicker-use { flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 800; margin-left: 7px; padding: 1px 6px; border-radius: 999px; background: rgba(13,148,136,.1); color: #0f7b5c; letter-spacing: .02em; }
.cfg-codepicker-use.none { background: rgba(20,45,70,.06); color: var(--cfg-soft); }
/* Same KPI code, different KPI in another reference year — hover for the per-year list. */
.cfg-codepicker-warn { flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 800; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(217,119,6,.13); color: #9a5b06; letter-spacing: .02em; cursor: help; white-space: nowrap; }
.cfg-dashex { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.cfg-dashex-head { flex: 1 0 100%; font-size: 10.5px; font-weight: 800; color: var(--cfg-soft); text-transform: uppercase; letter-spacing: .03em; }
.cfg-dashex-card { flex: 1 1 240px; border: 1px solid var(--cfg-line); border-radius: 10px; padding: 9px 11px; background: #fff; }
.cfg-dashex-card.is-match { border-color: #0f7b5c; background: #f4fbf8; }
.cfg-dashex-card.is-none { opacity: .6; }
.cfg-dashex-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cfg-navy); }
.cfg-dashex-badge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.cfg-dashex-badge.ok { background: #dcf3ea; color: #0f7b5c; }
.cfg-dashex-badge.warn { background: #fdf1dc; color: #9a6510; }
.cfg-dashex-badge.none { background: rgba(20,45,70,.06); color: var(--cfg-soft); }
.cfg-dashex-codes { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--cfg-navy); word-break: break-all; }
.cfg-dashex-codes i { font-style: normal; font-weight: 800; color: var(--cfg-soft); margin-right: 5px; }
.cfg-dashex-use { margin-top: 8px; border: 1px solid var(--cfg-line); background: #fff; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: var(--cfg-brand); padding: 4px 10px; cursor: pointer; }
.cfg-dashex-use:hover { background: rgba(13,148,136,.07); border-color: var(--cfg-brand); }
.cfg-dashcard-check { border: 1px solid var(--cfg-line); border-radius: 8px; background: #fff; cursor: pointer; height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 700; color: var(--cfg-navy); display: inline-flex; align-items: center; gap: 5px; transition: all .14s ease; }
.cfg-dashcard-check:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); background: rgba(13,148,136,.06); }
.cfg-dashcard.v-ok { border-color: #86c9b1; }
.cfg-dashcard.v-warn { border-color: #e6b465; }
.cfg-dashcard.v-error { border-color: #e29aa3; }
.cfg-dashcard-result { margin-top: 10px; border-top: 1px solid var(--cfg-line); padding-top: 10px; }
.cfg-dashcheck { margin-top: 14px; border: 1px solid var(--cfg-line); border-radius: 11px; padding: 12px 14px; background: #fbfcfd; }
.cfg-dashcheck-verdict { font-size: 13px; font-weight: 800; padding: 7px 11px; border-radius: 8px; margin-bottom: 10px; }
.cfg-dashcheck-verdict.v-ok { background: #dcf3ea; color: #0b6249; }
.cfg-dashcheck-verdict.v-warn { background: #fdf1dc; color: #8a5a0c; }
.cfg-dashcheck-verdict.v-error { background: #fdecee; color: #9a2f3c; }
.cfg-dashcheck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cfg-dashcheck-list li { font-size: 12.5px; line-height: 1.45; padding-left: 20px; position: relative; color: var(--cfg-navy); }
.cfg-dashcheck-list li b { display: block; font-weight: 800; }
.cfg-dashcheck-list li span { color: var(--cfg-soft); }
.cfg-dashcheck-list li::before { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 12px; }
.cfg-dashcheck-list li.c-ok::before { content: '✓'; color: #0f7b5c; }
.cfg-dashcheck-list li.c-warn::before { content: '!'; color: #b57a1a; }
.cfg-dashcheck-list li.c-error::before { content: '✕'; color: #b4424e; }
.cfg-dashcheck-sub { margin-top: 12px; font-size: 10.5px; font-weight: 800; color: var(--cfg-soft); text-transform: uppercase; letter-spacing: .03em; }
/* Obligor names run to 60+ characters; without a fixed layout the name column eats the row and
pushes Scope 1/2/Total off the edge of the modal — the only columns anyone opened this for. */
.cfg-dashcheck-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; table-layout: fixed; }
.cfg-dashcheck-tbl th:first-child, .cfg-dashcheck-tbl td:first-child { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-dashcheck-tbl th:nth-child(2), .cfg-dashcheck-tbl td:nth-child(2) { width: 46px; }
.cfg-dashcheck-tbl th:nth-child(n+3), .cfg-dashcheck-tbl td:nth-child(n+3) { width: 94px; padding-left: 2px; padding-right: 2px; }
.cfg-dashcheck-tbl th { text-align: right; font-weight: 800; color: var(--cfg-soft); font-size: 10.5px; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--cfg-line); }
.cfg-dashcheck-tbl th:first-child, .cfg-dashcheck-tbl td:first-child { text-align: left; }
.cfg-dashcheck-tbl td { text-align: right; padding: 5px 6px; border-bottom: 1px solid #f1f3f6; color: var(--cfg-navy); white-space: nowrap; }
.cfg-dashcheck-tbl tr.is-mismatch td { background: #fff8f8; }
.cfg-dashcheck-flag { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--cfg-soft); margin-left: 4px; }
.cfg-dashcheck-flag.bad { color: #b4424e; }
.cfg-dashcheck-foot { margin-top: 8px; font-size: 12px; color: var(--cfg-soft); }
.cfg-btn.cfg-btn-danger { background: #b4424e; border-color: #b4424e; color: #fff; }
/* framework content editor (fields / calculations / KPIs tabs) */
.cfg-content-tabs { display: flex; gap: 4px; }
.cfg-content-tab { border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cfg-soft); padding: 9px 14px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .14s ease, border-color .14s ease; }
.cfg-content-tab:hover { color: var(--cfg-navy); }
.cfg-content-tab.is-active { color: var(--cfg-brand); border-bottom-color: var(--cfg-brand); }
/* framework content editor — wider modal, roomier spreadsheet-style editable table */
.cfg-content-modal .cfg-modal-body { padding: 22px 26px; gap: 16px; }
/* Excel-style formula bar: shows/edits the full value of whichever cell is focused */
.cfg-ct-formulabar { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.cfg-ct-fb-label { flex: 0 0 auto; margin-top: 9px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--cfg-soft); background: #f5f8fb; border: 1px solid var(--cfg-line); border-radius: 8px; padding: 5px 10px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cfg-ct-fb-inputwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.cfg-ct-fb-input { min-height: 40px; max-height: 260px; overflow-y: auto; resize: vertical; border: 1.5px solid var(--cfg-line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cfg-navy); background: #fff; }
.cfg-ct-fb-input:disabled { background: #f5f8fb; color: var(--cfg-soft); cursor: default; }
.cfg-ct-fb-input:focus { outline: none; border-color: var(--cfg-brand); box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
.cfg-ct-fb-count { align-self: flex-end; margin-top: 3px; font-size: 10.5px; color: var(--cfg-soft); }
/* algorithm-writing helper: insert-id / insert-function dropdowns + PDF guide link */
.cfg-ct-algohelp { display: flex; align-items: center; gap: 8px; margin-top: -6px; }
.cfg-ct-algohelp-dd { position: relative; }
.cfg-ct-algohelp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cfg-line); background: #fff; color: var(--cfg-navy); font-size: 12px; font-weight: 700; border-radius: 8px; padding: 6px 11px; cursor: pointer; transition: all .14s ease; }
.cfg-ct-algohelp-btn:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); background: rgba(13,148,136,.06); }
.cfg-ct-algohelp-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 300px; max-width: 360px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--cfg-line); border-radius: 12px; box-shadow: 0 20px 46px -18px rgba(16,40,70,.35); padding: 6px; }
.cfg-ct-algohelp-menu.open { display: block; }
.cfg-ct-algohelp-menu-right { left: auto; right: 0; }
/* column manager (Fields/Data/KPIs tabs — show/hide + reorder) */
.cfg-content-tabsrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--cfg-line); }
.cfg-colmgr-list { display: flex; flex-direction: column; }
.cfg-colmgr-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 8px; }
.cfg-colmgr-row:hover { background: rgba(13,148,136,.06); }
.cfg-colmgr-move { border: 1px solid var(--cfg-line); background: #fff; border-radius: 6px; width: 22px; height: 22px; font-size: 11px; color: var(--cfg-soft); cursor: pointer; flex: 0 0 auto; }
.cfg-colmgr-move:hover:not(:disabled) { border-color: var(--cfg-brand); color: var(--cfg-brand); }
.cfg-colmgr-move:disabled { opacity: .35; cursor: default; }
.cfg-colmgr-lbl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--cfg-navy); cursor: pointer; padding: 4px 2px; flex: 1 1 auto; }
.cfg-colmgr-reset { width: 100%; margin-top: 4px; border: none; background: none; color: var(--cfg-brand); font-size: 11.5px; font-weight: 700; padding: 8px; cursor: pointer; border-top: 1px solid var(--cfg-line); }
.cfg-colmgr-reset:hover { text-decoration: underline; }
.cfg-ct-algohelp-group { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cfg-soft); padding: 8px 9px 4px; }
.cfg-ct-algohelp-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: none; background: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--cfg-navy); }
.cfg-ct-algohelp-item:hover { background: rgba(13,148,136,.08); }
.cfg-ct-algohelp-item b { font-weight: 700; }
.cfg-ct-algohelp-item span { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; font-weight: 500; color: var(--cfg-soft); }
.cfg-ct-algohelp-empty { font-size: 12px; color: var(--cfg-soft); padding: 10px; text-align: center; }
.cfg-ct-algohelp-guide { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--cfg-brand); text-decoration: none; padding: 6px 4px; cursor: pointer; }
.cfg-ct-algohelp-guide:hover { text-decoration: underline; }
/* "Industries" gating button (Fields tab) + its nested editor rows */
.cfg-ct-indbtn { border: 1px solid var(--cfg-line); border-radius: 999px; background: #fff; color: var(--cfg-navy); font-size: 11.5px; font-weight: 800; width: 26px; height: 26px; cursor: pointer; transition: all .14s ease; }
.cfg-ct-indbtn:hover { border-color: var(--cfg-brand); color: var(--cfg-brand); background: rgba(13,148,136,.08); }
/* "all industries" (no gating rows) — a word, not a number, so it needs to be a pill rather than a
circle, and muted so a genuine industry restriction still stands out in a long column. */
.cfg-ct-indbtn-all { width: auto; min-width: 26px; padding: 0 9px; border-style: dashed; color: var(--cfg-muted, #64748b); font-weight: 700; letter-spacing: .01em; }
#cfgIndList .cfg-field-row select.cfg-ind-industry, #cfgIndList .cfg-field-row select.cfg-ind-sub { min-width: 170px; border: 1px solid var(--cfg-line); border-radius: 9px; padding: 8px 11px; font-size: 13px; color: var(--cfg-navy); background: #fff; }
#cfgIndList .cfg-field-row { align-items: center; }
/* "Duplicate to..." target picker */
.cfg-content-tabsrow-actions { display: flex; align-items: center; gap: 8px; }
#cfgDupTargets .cfg-field-row { align-items: center; }
#cfgDupTargets .cfg-field-row select.cfg-dup-fw { min-width: 220px; border: 1px solid var(--cfg-line); border-radius: 9px; padding: 8px 11px; font-size: 13px; color: var(--cfg-navy); background: #fff; }
#cfgDupTargets .cfg-field-row select.cfg-dup-yr { min-width: 90px; border: 1px solid var(--cfg-line); border-radius: 9px; padding: 8px 11px; font-size: 13px; color: var(--cfg-navy); background: #fff; }
.cfg-dup-result { font-size: 12.5px; color: var(--cfg-navy); padding: 6px 10px; border-radius: 8px; background: rgba(13,148,136,.06); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.cfg-dup-result svg { flex: 0 0 auto; }
.cfg-dup-pending { background: rgba(20,45,70,.04); color: var(--cfg-soft); }
.cfg-dup-done { background: rgba(15,123,92,.08); color: #0f7b5c; }
.cfg-dup-skipped { background: rgba(20,45,70,.04); color: var(--cfg-soft); }
.cfg-dup-error { background: #fdecee; color: #b4424e; }
.cfg-dup-progresswrap { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.cfg-dup-progressbar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(20,45,70,.08); overflow: hidden; }
.cfg-dup-progressfill { height: 100%; background: var(--cfg-brand); transition: width .25s ease; }
.cfg-dup-progresslbl { font-size: 11.5px; font-weight: 700; color: var(--cfg-soft); white-space: nowrap; }
.cfg-dup-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(20,45,70,.15); flex: 0 0 auto; }
.cfg-dup-spin-active { border-top-color: var(--cfg-brand); animation: cfgDupSpin .7s linear infinite; }
@keyframes cfgDupSpin { to { transform: rotate(360deg); } }
/* Excel import: the upload is a single request with no interim progress from the server, so this is
an indeterminate bar (a moving band, not a real percentage) — it exists purely so a slow import
reads as "still working" instead of a frozen page. See cfgCtImportRun(). */
.cfg-ct-import-progresswrap { margin-bottom: 10px; }
.cfg-ct-import-progressbar { height: 7px; border-radius: 999px; background: rgba(20,45,70,.08); overflow: hidden; position: relative; }
.cfg-ct-import-progressbar-indeterminate::before {
content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
border-radius: 999px; background: var(--cfg-brand);
animation: cfgCtImportIndeterminate 1.1s ease-in-out infinite;
}
@keyframes cfgCtImportIndeterminate {
0% { left: -30%; }
50% { left: 60%; }
100% { left: 110%; }
}
.cfg-dup-success { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #0f7b5c; background: rgba(15,123,92,.1); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cfg-content-tabs { gap: 6px; }
.cfg-content-tab { padding: 10px 18px; font-size: 13.5px; }
/* ============================================================================================
CONFIGURATION CONTENT GRID — a spreadsheet, not a form that happens to sit in a table.
The inversion this design rests on: the owns the grid lines and all visual state, and the
/ |