:root {
--mapri-navy: #0f2a4a;
--mapri-navy-text: #ffffff;
--mapri-gold: #c99a1e;
--mapri-green-bg: #eaf7ea;
--mapri-green-text: #1e5e1e;
--mapri-amber-bg: #fff3cd;
--mapri-amber-text: #7a5b00;
--mapri-neutral-bg: #eef0f2;
--mapri-neutral-text: #50575e;
--mapri-red-bg: #fbeaea;
--mapri-red-text: #8a1f1f;
--mapri-border: #e2e5e9;
--mapri-shadow: 0 1px 2px rgba(15, 42, 74, 0.06), 0 1px 6px rgba(15, 42, 74, 0.05);
}
body.mapri-portal-page .wp-site-blocks > header.wp-block-template-part,
body.mapri-portal-page .wp-site-blocks > footer.wp-block-template-part,
body.mapri-portal-page .wp-block-post-title,
body.mapri-portal-page .wp-block-post-featured-image,
body.mapri-portal-page .entry-title {
display: none !important;
}
body.mapri-portal-page .wp-site-blocks,
body.mapri-portal-page main.wp-block-group,
body.mapri-portal-page main .wp-block-group,
body.mapri-portal-page .wp-block-post-content,
body.mapri-portal-page .entry-content {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.mapri-portal-page {
background: #fff;
}
.mapri-portal {
width: 100vw !important;
max-width: none !important;
min-height: 100vh;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
overflow-x: hidden;
background: #fff;
color: #1d2327;
font-size: 15px;
line-height: 1.5;
box-sizing: border-box;
}
.mapri-portal *,
.mapri-portal *::before,
.mapri-portal *::after {
box-sizing: inherit;
}
.mapri-portal__container {
max-width: 1320px;
margin: 0 auto;
padding: 2.5em 2em;
}
.mapri-btn {
display: inline-block;
padding: 0.55em 1.1em;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
font-size: 0.95em;
font-weight: 600;
line-height: 1.2;
transition: background-color 0.15s ease;
}
.mapri-btn:focus-visible {
outline: 2px solid var(--mapri-gold);
outline-offset: 1px;
}
.mapri-btn-confirm {
background: #2ea44f !important;
color: #fff !important;
}
.mapri-btn-confirm:hover {
background: #268a42 !important;
color: #fff !important;
}
.mapri-btn-download {
background: #2271b1 !important;
color: #fff !important;
}
.mapri-btn-download:hover {
background: #195a91 !important;
color: #fff !important;
}
.mapri-btn-reset {
background: transparent !important;
color: var(--mapri-neutral-text) !important;
border-color: var(--mapri-border);
}
.mapri-btn-reset:hover {
background: var(--mapri-neutral-bg) !important;
color: #1d2327 !important;
}
.mapri-btn:disabled,
.mapri-btn[disabled],
.mapri-btn[aria-disabled="true"] {
opacity: 0.55 !important;
cursor: not-allowed !important;
pointer-events: none;
}
.mapri-status-badge {
display: inline-block;
padding: 0.25em 0.75em;
border-radius: 999px;
font-size: 0.85em;
font-weight: 600;
white-space: nowrap;
}
.mapri-status-badge--ok {
background: var(--mapri-green-bg);
color: var(--mapri-green-text);
}
.mapri-status-badge--error {
background: var(--mapri-red-bg);
color: var(--mapri-red-text);
}
.mapri-status-badge--pending {
background: var(--mapri-amber-bg);
color: var(--mapri-amber-text);
}
.mapri-portal__card {
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.25em 1.5em;
margin-bottom: 1.5em;
}
.mapri-upload-form__title {
color: var(--mapri-navy);
font-size: 1.6em;
font-weight: 700;
margin: 0 0 0.3em;
}
.mapri-upload-form__intro {
color: var(--mapri-neutral-text);
margin: 0 0 1.5em;
font-size: 1.02em;
}
.mapri-upload-form__notice {
border-radius: 8px;
padding: 0.9em 1.1em;
margin: 0 0 1.5em;
}
.mapri-upload-form__notice--success {
background: var(--mapri-green-bg);
border: 1px solid #b7e2b7;
}
.mapri-upload-form__notice--success p {
color: var(--mapri-green-text);
margin: 0;
}
.mapri-upload-form__notice--error {
background: var(--mapri-red-bg);
border: 1px solid #f0c2c2;
}
.mapri-upload-form__notice--error p {
color: var(--mapri-red-text);
margin: 0;
}
.mapri-upload-form__field {
margin-bottom: 1.25em;
}
.mapri-upload-form__field-row {
display: flex;
gap: 1.25em;
}
.mapri-upload-form__field-row .mapri-upload-form__field {
flex: 1;
min-width: 0;
}
.mapri-upload-form__field label {
display: block;
font-weight: 600;
font-size: 0.9em;
color: var(--mapri-navy);
margin-bottom: 0.35em;
}
.mapri-upload-form__checkbox-label {
display: flex;
align-items: center;
gap: 0.5em;
font-weight: 500;
font-size: 0.95em;
color: #1d2327;
cursor: pointer;
}
.mapri-upload-form__checkbox-label input[type="checkbox"] {
width: 1.1em;
height: 1.1em;
cursor: pointer;
flex-shrink: 0;
}
.mapri-upload-form__field select {
width: 100%;
padding: 0.6em 0.75em;
border: 1px solid var(--mapri-border);
border-radius: 5px;
font-size: 1em;
background: #fff;
}
.mapri-upload-form__field select:focus {
outline: 2px solid var(--mapri-gold);
outline-offset: 1px;
}
.mapri-file-field {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.75em;
flex-wrap: wrap;
}
.mapri-file-field__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mapri-file-field__input:focus + .mapri-file-field__button {
outline: 2px solid var(--mapri-gold);
outline-offset: 1px;
}
.mapri-file-field__input::file-selector-button,
.mapri-file-field__input::-webkit-file-upload-button {
background: var(--mapri-navy);
color: #fff;
border: none;
border-radius: 5px;
padding: 0.55em 1.1em;
font-weight: 600;
cursor: pointer;
}
.mapri-file-field__button {
display: inline-block;
padding: 0.55em 1.1em;
border-radius: 5px;
background: var(--mapri-navy) !important;
color: #fff !important;
font-size: 0.95em;
font-weight: 600;
cursor: pointer;
text-decoration: none;
border: none !important;
}
.mapri-file-field__button:hover {
background: #0b2038 !important;
color: #fff !important;
}
.mapri-file-field__filename {
color: var(--mapri-neutral-text);
font-style: italic;
font-size: 0.92em;
overflow-wrap: anywhere;
}
.mapri-upload-form__hint {
margin: 0.6em 0 0;
font-size: 0.88em;
color: var(--mapri-neutral-text);
}
.mapri-upload-form__actions {
display: flex;
flex-wrap: wrap;
gap: 1em;
margin-top: 1.5em;
}
.mapri-upload-form__note {
font-size: 0.9em;
color: var(--mapri-neutral-text);
border-left: 3px solid var(--mapri-gold);
padding: 0.6em 1em;
background: #fffdf6;
}
@media (max-width: 767px) {
.mapri-upload-form__field-row {
flex-direction: column;
gap: 0;
}
.mapri-upload-form__actions {
flex-direction: column;
}
.mapri-upload-form__actions .mapri-btn {
text-align: center;
width: 100%;
}
}
.mapri-portal__header {
background: #fff;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-portal__header-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0.9em 2em;
display: flex;
align-items: center;
gap: 1.5em;
}
.mapri-portal__brand {
display: flex;
align-items: center;
gap: 0.6em;
text-decoration: none;
flex-shrink: 0;
}
.mapri-portal__logo {
display: block;
height: 2em;
width: auto;
max-width: 160px;
flex-shrink: 0;
}
.mapri-portal__brand-name {
color: var(--mapri-navy);
font-weight: 700;
font-size: 1.1em;
}
.mapri-portal__nav-toggle-input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
.mapri-portal__nav-toggle-label {
display: none;
cursor: pointer;
font-size: 1.5em;
line-height: 1;
color: var(--mapri-navy);
margin-left: auto;
}
.mapri-portal__nav {
display: flex;
flex-wrap: wrap;
gap: 1.25em;
flex-grow: 1;
}
.mapri-portal__nav-link {
color: #555;
text-decoration: none;
font-weight: 600;
font-size: 0.95em;
padding-bottom: 0.35em;
border-bottom: 2px solid transparent;
}
.mapri-portal__nav-link:hover {
color: var(--mapri-navy);
}
.mapri-portal__nav-link--active {
color: var(--mapri-navy);
border-bottom-color: var(--mapri-gold);
}
.mapri-portal__auth {
display: flex;
align-items: center;
gap: 0.9em;
flex-shrink: 0;
margin-left: auto;
}
.mapri-portal__user-name {
color: var(--mapri-navy);
font-weight: 600;
font-size: 0.92em;
}
.mapri-portal__logout-link {
color: #666;
font-size: 0.9em;
text-decoration: none;
}
.mapri-portal__logout-link:hover {
color: var(--mapri-navy);
text-decoration: underline;
}
.mapri-portal__login-btn {
padding: 0.5em 1.1em;
}
.mapri-portal__main {
background: #f4f6f8;
min-height: 60vh;
}
.mapri-portal__notice-card {
max-width: 640px;
margin: 2em auto;
background: #fff;
border: 1px solid var(--mapri-border);
border-left: 4px solid var(--mapri-navy);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.25em 1.5em;
text-align: center;
}
.mapri-portal__notice-card p {
margin: 0;
}
.mapri-portal__setup-notice-title {
margin: 0 0 0.5em;
font-size: 1.25em;
color: var(--mapri-navy);
}
.mapri-portal__setup-notice p + p {
margin-top: 0.75em;
}
.mapri-portal__setup-notice-shortcode code {
background: #f4f6f8;
border: 1px solid var(--mapri-border);
border-radius: 4px;
padding: 0.15em 0.5em;
font-family: monospace;
}
.mapri-portal__footer {
background: var(--mapri-navy);
color: #cfd8e3;
}
.mapri-portal__footer-inner {
max-width: 1320px;
margin: 0 auto;
padding: 1.75em 2em;
}
.mapri-portal__footer-brand {
color: #fff;
font-weight: 700;
margin: 0 0 0.4em;
}
.mapri-portal__footer-note,
.mapri-portal__footer-contact,
.mapri-portal__footer-copy {
margin: 0.3em 0;
font-size: 0.88em;
}
.mapri-portal__footer-contact a {
color: var(--mapri-gold);
text-decoration: none;
}
.mapri-portal__footer-contact a:hover {
text-decoration: underline;
}
.mapri-portal__footer-copy {
color: #9fb0c3;
}
@media (max-width: 767px) {
.mapri-portal {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.mapri-portal__nav-toggle-label {
display: block;
}
.mapri-portal__nav {
display: none;
flex-direction: column;
width: 100%;
gap: 0;
order: 3;
}
.mapri-portal__nav-link {
padding: 0.7em 0;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-portal__auth {
display: none;
width: 100%;
order: 4;
justify-content: space-between;
padding-top: 0.75em;
}
.mapri-portal__nav-toggle-input:checked ~ .mapri-portal__nav {
display: flex;
}
.mapri-portal__nav-toggle-input:checked ~ .mapri-portal__auth {
display: flex;
}
.mapri-portal__header-inner {
flex-wrap: wrap;
padding: 0.9em 1em;
}
.mapri-portal__logo {
height: 1.6em;
max-width: 120px;
}
.mapri-portal__footer-inner {
padding: 1.5em 1em;
}
.mapri-portal__container {
padding: 1.25em 1em;
}
}
.mapri-entry--login {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5em;
align-items: stretch;
}
.mapri-entry__hero {
background: var(--mapri-navy);
color: #fff;
border-radius: 10px;
padding: 2.5em 2em;
}
.mapri-entry__hero-title {
font-size: 2em;
font-weight: 700;
margin: 0 0 0.5em;
}
.mapri-entry__hero-text {
color: #dbe4ef;
margin: 0 0 1.25em;
font-size: 1.02em;
}
.mapri-entry__hero-list {
list-style: none;
margin: 0;
padding: 0;
}
.mapri-entry__hero-list li {
position: relative;
padding-left: 1.4em;
margin-bottom: 0.9em;
color: #eef1f5;
}
.mapri-entry__hero-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: var(--mapri-gold);
}
.mapri-entry__login-card {
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 10px;
box-shadow: var(--mapri-shadow);
padding: 2.5em 2em;
}
.mapri-entry__login-title {
color: var(--mapri-navy);
font-size: 1.5em;
font-weight: 700;
margin: 0 0 0.3em;
}
.mapri-entry__login-subtitle {
color: var(--mapri-neutral-text);
margin: 0 0 1.5em;
}
.mapri-entry__login-form label {
display: block;
font-weight: 600;
font-size: 0.9em;
color: var(--mapri-navy);
margin-bottom: 0.35em;
}
.mapri-entry__login-form p {
margin: 0 0 1.25em;
}
.mapri-entry__login-form input[type="text"],
.mapri-entry__login-form input[type="password"] {
width: 100%;
padding: 0.65em 0.8em;
border: 1px solid var(--mapri-border);
border-radius: 5px;
font-size: 1em;
}
.mapri-entry__login-form input[type="text"]:focus,
.mapri-entry__login-form input[type="password"]:focus {
outline: 2px solid var(--mapri-gold);
outline-offset: 1px;
}
.mapri-entry__login-form .login-remember {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 0.9em;
color: var(--mapri-neutral-text);
}
.mapri-entry__login-form .login-remember label {
display: inline;
font-weight: 400;
margin: 0;
}
.mapri-entry__login-form input[type="submit"] {
width: 100%;
background: var(--mapri-navy) !important;
color: #fff !important;
border: none;
border-radius: 5px;
padding: 0.7em 1em;
font-size: 1em;
font-weight: 600;
cursor: pointer;
}
.mapri-entry__login-form input[type="submit"]:hover {
background: #0b2038 !important;
color: #fff !important;
}
.mapri-entry__login-form input[type="submit"]:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
}
.mapri-entry__lost-password {
margin: 0 0 1.25em;
}
.mapri-entry__lost-password a {
color: var(--mapri-navy);
}
.mapri-entry__support,
.mapri-entry__security-note {
font-size: 0.88em;
color: var(--mapri-neutral-text);
border-top: 1px solid var(--mapri-border);
padding-top: 0.9em;
margin: 0.9em 0 0;
}
.mapri-entry--home {
max-width: none;
}
.mapri-entry__home-title {
color: var(--mapri-navy);
font-size: 1.8em;
font-weight: 700;
margin: 0 0 0.4em;
}
.mapri-entry__home-subtitle {
color: var(--mapri-neutral-text);
margin: 0 0 1.5em;
}
.mapri-entry__quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1em;
}
.mapri-entry__quick-link-card {
display: block;
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.25em 1.5em;
text-decoration: none;
color: var(--mapri-navy);
font-weight: 600;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mapri-entry__quick-link-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(15, 42, 74, 0.1);
}
@media (max-width: 767px) {
.mapri-entry--login {
grid-template-columns: 1fr;
}
.mapri-entry__hero,
.mapri-entry__login-card {
padding: 1.75em 1.5em;
}
}
.mapri-coming-soon {
max-width: 640px;
margin: 2em auto;
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 10px;
box-shadow: var(--mapri-shadow);
padding: 2.5em 2em;
text-align: center;
}
.mapri-coming-soon__title {
color: var(--mapri-navy);
font-size: 1.6em;
font-weight: 700;
margin: 0 0 0.6em;
}
.mapri-coming-soon__description {
color: var(--mapri-neutral-text);
margin: 1em 0;
font-size: 1.02em;
}
.mapri-coming-soon__contact {
font-size: 0.9em;
color: var(--mapri-neutral-text);
border-top: 1px solid var(--mapri-border);
padding-top: 1em;
margin: 1em 0 0;
}
.mapri-my-documents__page-title {
color: var(--mapri-navy);
font-size: 1.8em;
font-weight: 700;
margin: 0 0 0.3em;
}
.mapri-my-documents__page-subtitle {
color: var(--mapri-neutral-text);
margin: 0 0 1.5em;
}
.mapri-my-documents__success-notice p {
padding: 0.9em 1.1em;
border: 1px solid #b7e2b7;
border-radius: 8px;
background: var(--mapri-green-bg);
color: var(--mapri-green-text);
margin: 0 0 1.5em;
}
.mapri-package {
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.25em 1.5em;
margin-bottom: 1.25em;
}
.mapri-package__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5em;
margin: 0 0 0.6em;
}
.mapri-package__title {
margin: 0;
font-size: 1.2em;
color: var(--mapri-navy);
font-weight: 700;
}
.mapri-package__badge {
display: inline-block;
flex-shrink: 0;
padding: 0.25em 0.75em;
border-radius: 999px;
font-size: 0.85em;
font-weight: 600;
white-space: nowrap;
}
.mapri-package__badge--released {
background: var(--mapri-green-bg);
color: var(--mapri-green-text);
}
.mapri-package__badge--pending {
background: var(--mapri-amber-bg);
color: var(--mapri-amber-text);
}
.mapri-package__badge--in-progress {
background: var(--mapri-neutral-bg);
color: var(--mapri-neutral-text);
}
.mapri-package__badge--expired {
background: var(--mapri-red-bg);
color: var(--mapri-red-text);
}
.mapri-package__visibility,
.mapri-package__confirmed-at {
margin: 0 0 0.4em;
color: var(--mapri-neutral-text);
font-size: 0.92em;
}
.mapri-package__receipt-link {
color: var(--mapri-navy);
font-weight: 600;
text-decoration: none;
}
.mapri-package__receipt-link:hover {
text-decoration: underline;
}
.mapri-receipt__title {
color: var(--mapri-navy);
font-size: 1.6em;
font-weight: 700;
margin: 0 0 0.5em;
}
.mapri-receipt__statement {
color: var(--mapri-neutral-text);
font-size: 0.95em;
margin: 0 0 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-receipt__list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.4em 1.5em;
margin: 0 0 1.5em;
}
.mapri-receipt__list dt {
font-weight: 600;
color: var(--mapri-navy);
}
.mapri-receipt__list dd {
margin: 0;
color: #1d2327;
}
.mapri-receipt__subtitle {
color: var(--mapri-navy);
font-size: 1.1em;
font-weight: 700;
margin: 1.5em 0 0.75em;
}
.mapri-receipt__documents {
list-style: none;
margin: 0 0 1.5em;
padding: 0;
}
.mapri-receipt__document {
display: flex;
flex-direction: column;
gap: 0.2em;
padding: 0.6em 0;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-receipt__document:last-child {
border-bottom: none;
}
.mapri-receipt__document-type {
font-weight: 600;
color: var(--mapri-navy);
}
.mapri-receipt__document-hash {
font-size: 0.82em;
color: var(--mapri-neutral-text);
font-family: monospace;
overflow-wrap: anywhere;
}
.mapri-receipt__footer-note,
.mapri-receipt__back-link {
font-size: 0.9em;
color: var(--mapri-neutral-text);
}
@media (max-width: 767px) {
.mapri-receipt__list {
grid-template-columns: 1fr;
gap: 0.1em 0;
}
.mapri-receipt__list dd {
margin-bottom: 0.6em;
}
}
.mapri-package__notice {
margin: 0 0 0.75em;
color: var(--mapri-neutral-text);
}
.mapri-package__documents {
list-style: none;
margin: 0 0 0.75em;
padding: 0;
}
.mapri-document {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5em;
padding: 0.7em 0;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-document:last-child {
border-bottom: none;
}
.mapri-document__info {
display: flex;
flex-direction: column;
gap: 0.15em;
min-width: 0;
}
.mapri-document__title {
font-weight: 500;
overflow-wrap: anywhere;
}
.mapri-document__type {
color: #666;
font-size: 0.9em;
}
.mapri-document__hint {
color: var(--mapri-neutral-text);
font-size: 0.85em;
font-style: italic;
overflow-wrap: anywhere;
}
.mapri-document__action {
flex-shrink: 0;
}
.mapri-package__confirm-form {
margin-top: 0.75em;
}
@media (max-width: 480px) {
.mapri-package {
padding: 1em 1.1em;
}
.mapri-document {
flex-direction: column;
align-items: flex-start;
}
.mapri-document__action {
width: 100%;
}
.mapri-document__action .mapri-btn {
display: block;
text-align: center;
}
}
.mapri-dashboard__header {
padding-bottom: 1em;
margin-bottom: 1.5em;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-dashboard__title {
color: var(--mapri-navy);
font-size: 1.6em;
font-weight: 700;
margin: 0 0 0.3em;
line-height: 1.25;
}
.mapri-dashboard__period {
font-size: 1.05em;
font-weight: 600;
color: var(--mapri-navy);
margin: 0.15em 0;
}
.mapri-dashboard__scope-note {
color: var(--mapri-neutral-text);
margin: 0.35em 0 0;
font-size: 0.95em;
}
.mapri-dashboard__card {
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.25em 1.5em;
margin-bottom: 1.5em;
}
.mapri-dashboard__filters-card {
padding: 1.25em 1.5em;
}
.mapri-dashboard__filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.25em;
}
.mapri-dashboard__filter-group {
display: flex;
flex-direction: column;
gap: 0.35em;
min-width: 9em;
}
.mapri-dashboard__filter-group label {
font-weight: 600;
font-size: 0.82em;
color: var(--mapri-navy);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.mapri-dashboard__filter-group select {
min-width: 100%;
padding: 0.45em 0.6em;
border: 1px solid var(--mapri-border);
border-radius: 5px;
background: #fff;
font-size: 0.95em;
}
.mapri-dashboard__filter-group select:focus {
outline: 2px solid var(--mapri-gold);
outline-offset: 1px;
}
.mapri-dashboard__filter-actions {
display: flex;
align-items: center;
gap: 1em;
margin-left: auto;
}
.mapri-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1em;
margin-bottom: 1.5em;
}
.mapri-kpi-card {
background: #fff;
border: 1px solid var(--mapri-border);
border-top: 3px solid var(--mapri-neutral-bg);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.1em 1.25em;
display: flex;
flex-direction: column;
gap: 0.3em;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mapri-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(15, 42, 74, 0.1);
}
.mapri-kpi-card--accent-green {
border-top-color: #2ea44f;
}
.mapri-kpi-card--accent-red {
border-top-color: #c0392b;
}
.mapri-kpi-card--accent-amber {
border-top-color: var(--mapri-gold);
}
.mapri-kpi-card--accent-neutral {
border-top-color: var(--mapri-navy);
}
.mapri-kpi-card__value {
font-size: 2em;
font-weight: 700;
color: var(--mapri-navy);
line-height: 1.1;
}
.mapri-kpi-card__label {
color: var(--mapri-neutral-text);
font-size: 0.88em;
font-weight: 500;
}
.mapri-completion__header {
display: flex;
align-items: baseline;
gap: 0.6em;
margin-bottom: 0.6em;
flex-wrap: wrap;
}
.mapri-completion__percentage {
font-size: 1.7em;
font-weight: 700;
color: var(--mapri-navy);
line-height: 1;
}
.mapri-completion__label {
margin: 0;
color: var(--mapri-neutral-text);
font-weight: 500;
}
.mapri-completion__bar {
background: var(--mapri-neutral-bg);
border-radius: 999px;
height: 0.75em;
overflow: hidden;
}
.mapri-completion__bar-fill {
background: #2ea44f;
height: 100%;
border-radius: 999px;
transition: width 0.3s ease;
}
.mapri-status-header {
display: block;
padding: 1.1em 1.4em;
border-radius: 8px;
margin-bottom: 1.5em;
}
.mapri-status-header__headline {
margin: 0 0 0.4em;
font-weight: 700;
font-size: 1.15em;
}
.mapri-status-header__reason,
.mapri-status-header__action {
margin: 0.25em 0 0;
font-size: 0.95em;
}
.mapri-status-header__action {
font-weight: 600;
}
.mapri-status-header--ok {
background: var(--mapri-green-bg);
color: var(--mapri-green-text);
}
.mapri-status-header--warning {
background: var(--mapri-amber-bg);
color: var(--mapri-amber-text);
}
.mapri-status-header--critical {
background: var(--mapri-red-bg);
color: var(--mapri-red-text);
}
.mapri-context-strip {
display: flex;
flex-wrap: wrap;
gap: 1em;
margin-bottom: 1.5em;
}
.mapri-context-strip__item {
flex: 1 1 10em;
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 0.85em 1.1em;
display: flex;
flex-direction: column;
gap: 0.2em;
}
.mapri-context-strip__value {
font-size: 1.4em;
font-weight: 700;
color: var(--mapri-navy);
line-height: 1.1;
}
.mapri-context-strip__label {
color: var(--mapri-neutral-text);
font-size: 0.82em;
font-weight: 500;
}
.mapri-ownership__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1em;
}
.mapri-ownership__bucket {
border: 1px solid var(--mapri-border);
border-left: 4px solid var(--mapri-border);
border-radius: 8px;
padding: 1em 1.2em;
}
.mapri-ownership__bucket--error {
border-left-color: #c0392b;
}
.mapri-ownership__bucket--ok {
border-left-color: #2ea44f;
}
.mapri-ownership__bucket-title {
margin: 0 0 0.6em;
color: var(--mapri-navy);
font-size: 1em;
}
.mapri-ownership__bucket-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6em;
}
.mapri-ownership__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6em;
}
.mapri-ownership__row-label {
font-weight: 600;
color: var(--mapri-navy);
flex: 1 1 auto;
}
.mapri-ownership__row-action {
font-size: 0.85em;
color: var(--mapri-neutral-text);
width: 100%;
}
a.mapri-ownership__row-action {
text-decoration: underline;
}
.mapri-readiness__row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.4em;
}
.mapri-readiness__row--spaced {
margin-top: 1.1em;
}
.mapri-readiness__row-label {
font-weight: 600;
color: var(--mapri-navy);
}
.mapri-readiness__row-value {
font-weight: 700;
color: var(--mapri-navy);
font-size: 1.1em;
}
.mapri-readiness__counts {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
margin-top: 1.1em;
color: var(--mapri-neutral-text);
font-size: 0.92em;
}
.mapri-readiness__explanation {
margin: 0.9em 0 0;
padding-top: 0.9em;
border-top: 1px solid var(--mapri-border);
font-weight: 600;
color: var(--mapri-navy);
}
.mapri-activity-summary__note {
margin: 0 0 1em;
color: var(--mapri-neutral-text);
font-size: 0.88em;
}
.mapri-bar-chart {
display: flex;
flex-direction: column;
gap: 0.9em;
}
.mapri-bar-chart__row {
display: grid;
grid-template-columns: minmax(6em, 9em) minmax(0, 1fr) minmax(6.5em, auto);
align-items: center;
gap: 0.5em 1em;
text-decoration: none;
color: inherit;
}
.mapri-bar-chart__row:hover .mapri-bar-chart__label {
text-decoration: underline;
}
.mapri-bar-chart__label {
font-weight: 600;
color: var(--mapri-navy);
font-size: 0.92em;
overflow-wrap: break-word;
}
.mapri-bar-chart__responsible {
display: block;
font-weight: 400;
font-size: 0.78em;
color: var(--mapri-neutral-text);
margin-top: 0.15em;
text-decoration: none;
}
.mapri-bar-chart__track {
background: var(--mapri-neutral-bg);
border-radius: 999px;
height: 0.9em;
overflow: hidden;
min-width: 0;
}
.mapri-bar-chart__fill {
display: block;
height: 100%;
border-radius: 999px;
transition: width 0.3s ease;
}
.mapri-bar-chart__fill--ok {
background: #2ea44f;
}
.mapri-bar-chart__fill--warning {
background: var(--mapri-gold);
}
.mapri-bar-chart__fill--critical {
background: #c0392b;
}
.mapri-bar-chart__fill--neutral {
background: var(--mapri-border);
}
.mapri-bar-chart__value {
font-size: 0.85em;
color: var(--mapri-neutral-text);
text-align: right;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.mapri-attention-panel__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75em;
}
.mapri-attention-panel__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding-bottom: 0.75em;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-attention-panel__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.mapri-attention-panel__label {
font-weight: 600;
color: var(--mapri-navy);
}
.mapri-attention-panel__badge-link {
text-decoration: none;
}
.mapri-dashboard__warning-panel {
border-left: 4px solid var(--mapri-gold);
background: #fffdf6;
}
.mapri-dashboard__warning-panel h3 {
margin: 0 0 0.6em;
color: var(--mapri-navy);
font-size: 1.05em;
}
.mapri-dashboard__warning-panel ul {
margin: 0;
padding-left: 1.25em;
list-style: disc;
}
.mapri-dashboard__warning-panel li {
margin-bottom: 0.5em;
color: var(--mapri-amber-text);
}
.mapri-dashboard__warning-panel li:last-child {
margin-bottom: 0;
}
.mapri-dashboard__empty {
text-align: center;
padding: 2.5em 1.5em;
color: var(--mapri-neutral-text);
}
.mapri-dashboard__empty p {
margin: 0;
font-size: 1.05em;
}
.mapri-dashboard__table-card {
max-width: 100%;
overflow-x: auto;
padding: 0;
}
.mapri-dashboard__table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
table-layout: auto;
}
.mapri-dashboard__table th {
text-align: left;
padding: 0.85em 1em;
background: var(--mapri-navy);
color: var(--mapri-navy-text);
font-size: 0.85em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
.mapri-dashboard__table th:first-child {
border-top-left-radius: 8px;
}
.mapri-dashboard__table th:last-child {
border-top-right-radius: 8px;
}
.mapri-dashboard__table td {
text-align: left;
padding: 0.75em 1em;
border-bottom: 1px solid var(--mapri-border);
overflow-wrap: break-word;
word-break: normal;
vertical-align: middle;
}
.mapri-dashboard__table td:first-child {
min-width: 11em;
}
.mapri-dashboard__table tbody tr:nth-child(even) {
background: #fafbfc;
}
.mapri-dashboard__table tbody tr:hover {
background: #f2f5f9;
}
.mapri-dashboard__table tbody tr:last-child td {
border-bottom: none;
}
.mapri-dashboard__mobile-only {
display: none;
}
.mapri-dashboard__mobile-card {
padding: 1em 1.25em;
}
.mapri-dashboard__mobile-card-status {
margin-bottom: 0.6em;
}
.mapri-dashboard__mobile-card-title {
font-weight: 600;
color: var(--mapri-navy);
font-size: 1.02em;
margin: 0 0 0.6em;
overflow-wrap: anywhere;
}
.mapri-dashboard__mobile-card-meta {
margin: 0.3em 0;
font-size: 0.92em;
color: var(--mapri-neutral-text);
overflow-wrap: anywhere;
}
.mapri-dashboard__mobile-card-meta strong {
color: #1d2327;
}
@media (max-width: 1179px) {
.mapri-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
.mapri-dashboard__filter-actions {
margin-left: 0;
}
}
@media (max-width: 1024px) {
.mapri-dashboard__desktop-only {
display: none;
}
.mapri-dashboard__mobile-only {
display: block;
}
}
@media (max-width: 767px) {
.mapri-dashboard__filters {
flex-direction: column;
align-items: stretch;
}
.mapri-dashboard__filter-group {
min-width: 0;
}
.mapri-dashboard__filter-actions {
flex-direction: column;
align-items: stretch;
}
.mapri-dashboard__filter-actions .mapri-btn {
text-align: center;
}
.mapri-kpi-grid {
grid-template-columns: 1fr 1fr;
}
.mapri-dashboard__card {
padding: 1em 1.1em;
}
.mapri-bar-chart__row {
grid-template-columns: 1fr;
gap: 0.35em;
}
.mapri-bar-chart__value {
text-align: left;
}
.mapri-attention-panel__item {
flex-wrap: wrap;
}
.mapri-ownership__grid {
grid-template-columns: 1fr;
}
.mapri-readiness__row {
flex-direction: column;
gap: 0.15em;
}
}
.mapri-help {
max-width: 720px;
margin: 2em auto;
background: #fff;
border: 1px solid var(--mapri-border);
border-radius: 10px;
box-shadow: var(--mapri-shadow);
padding: 2.5em 2em;
}
.mapri-help__title {
color: var(--mapri-navy);
font-size: 1.6em;
font-weight: 700;
margin: 0 0 0.5em;
}
.mapri-help__intro {
color: var(--mapri-neutral-text);
margin: 0 0 1.5em;
font-size: 1.02em;
}
.mapri-help__section {
border-top: 1px solid var(--mapri-border);
padding-top: 1.25em;
margin-top: 1.25em;
}
.mapri-help__section-title {
color: var(--mapri-navy);
font-size: 1.15em;
font-weight: 700;
margin: 0 0 0.6em;
}
.mapri-help__list {
margin: 0;
padding-left: 1.25em;
color: var(--mapri-neutral-text);
}
.mapri-help__list li {
margin: 0 0 0.5em;
}
.mapri-help__list li:last-child {
margin-bottom: 0;
}
.mapri-help__contact {
font-size: 0.9em;
color: var(--mapri-neutral-text);
border-top: 1px solid var(--mapri-border);
padding-top: 1em;
margin: 1.5em 0 0;
}
.mapri-help__suggestion-link {
margin: 0 0 1.5em;
}
.mapri-suggestion {
max-width: 720px;
margin: 2em auto;
}
.mapri-suggestion__title {
color: var(--mapri-navy);
font-size: 1.6em;
font-weight: 700;
margin: 0 0 0.5em;
}
.mapri-suggestion__intro {
color: var(--mapri-neutral-text);
margin: 0 0 1.5em;
font-size: 1.02em;
}
.mapri-suggestion__card input[type="text"],
.mapri-suggestion__card textarea {
width: 100%;
padding: 0.6em 0.75em;
border: 1px solid var(--mapri-border);
border-radius: 5px;
font-family: inherit;
font-size: 0.95em;
}
.mapri-suggestion__card textarea {
resize: vertical;
}
.mapri-suggestion-cta {
margin: 0.5em 0 0;
}
.mapri-guided-notice {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25em;
background: #fff;
border: 1px solid var(--mapri-border);
border-left: 4px solid var(--mapri-gold);
border-radius: 10px;
box-shadow: var(--mapri-shadow);
padding: 1.5em 1.75em;
margin: 0 0 1.5em;
}
.mapri-guided-notice__body {
flex: 1 1 320px;
min-width: 0;
}
.mapri-guided-notice__title {
color: var(--mapri-navy);
font-size: 1.2em;
font-weight: 700;
margin: 0 0 0.4em;
}
.mapri-guided-notice__text {
color: var(--mapri-neutral-text);
margin: 0;
}
.mapri-guided-notice__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75em;
flex: 0 0 auto;
}
@media (max-width: 767px) {
.mapri-guided-notice {
flex-direction: column;
align-items: stretch;
padding: 1.25em 1.5em;
}
.mapri-guided-notice__actions {
flex-direction: column;
align-items: stretch;
}
.mapri-guided-notice__actions .mapri-btn {
width: 100%;
text-align: center;
}
}
.mapri-release-schedule__title {
color: var(--mapri-navy);
font-size: 1.15em;
font-weight: 700;
margin: 0 0 0.75em;
}
.mapri-release-schedule__warning {
background: var(--mapri-amber-bg);
color: var(--mapri-amber-text);
border: 1px solid #e8d28a;
border-radius: 8px;
padding: 0.75em 1em;
margin: 0 0 1em;
font-size: 0.95em;
}
.mapri-release-schedule__period-form {
margin: 0 0 1.25em;
padding-bottom: 1.25em;
border-bottom: 1px solid var(--mapri-border);
}
.mapri-release-schedule__period-form label {
display: block;
font-weight: 600;
font-size: 0.9em;
color: var(--mapri-navy);
margin-bottom: 0.35em;
}
.mapri-release-schedule__period-fields {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6em;
}
.mapri-release-schedule__status {
color: #1d2327;
margin: 0 0 0.5em;
}
.mapri-release-schedule__advanced {
margin-top: 1em;
}
.mapri-release-schedule__advanced summary {
cursor: pointer;
color: var(--mapri-navy);
font-weight: 600;
font-size: 0.92em;
padding: 0.4em 0;
}
.mapri-release-schedule__form {
margin-top: 0.75em;
padding-top: 0.75em;
}
@media (max-width: 767px) {
.mapri-release-schedule__period-fields {
flex-direction: column;
align-items: stretch;
}
.mapri-release-schedule__period-fields select,
.mapri-release-schedule__period-fields button {
width: 100%;
}
}
.mapri-dashboard__missing-view-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75em 1.5em;
}
.mapri-dashboard__missing-view-title {
color: var(--mapri-navy);
font-size: 1.2em;
font-weight: 700;
margin: 0;
}
.mapri-dashboard__missing-view-period {
color: var(--mapri-neutral-text);
margin: 0;
flex: 1 1 auto;
}
.mapri-dashboard__missing-view-entry {
margin: 0 0 1.5em;
}
.mapri-dashboard__missing-action {
white-space: nowrap;
}
.mapri-dashboard__mobile-card-action {
margin-top: 0.75em;
}
.mapri-dashboard__mobile-card-action .mapri-btn {
width: 100%;
text-align: center;
}
.mapri-dashboard__personal-notice p {
color: var(--mapri-amber-text);
margin: 0;
}
.mapri-upload-form__notice--warning {
background: var(--mapri-amber-bg);
border: 1px solid #e8d28a;
}
.mapri-upload-form__notice--warning p {
color: var(--mapri-amber-text);
margin: 0;
}
.mapri-upload-form__notice--info {
background: var(--mapri-neutral-bg);
border: 1px solid var(--mapri-border);
}
.mapri-upload-form__notice--info p {
color: var(--mapri-navy);
margin: 0;
}
.mapri-package--focus {
border: 1px solid var(--mapri-gold);
box-shadow: 0 0 0 3px rgba(201, 154, 30, 0.18), var(--mapri-shadow);
}
.mapri-hr-employees__mode-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1em;
margin: 1em 0 1.5em;
}
.mapri-hr-employees__mode-card {
background: #fff;
border: 1px solid var(--mapri-border);
border-top: 3px solid var(--mapri-neutral-bg);
border-radius: 8px;
box-shadow: var(--mapri-shadow);
padding: 1.1em 1.25em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.mapri-hr-employees__mode-card--active {
border-top-color: var(--mapri-gold);
box-shadow: 0 0 0 3px rgba(201, 154, 30, 0.18), var(--mapri-shadow);
}
.mapri-hr-employees__mode-card-title {
margin: 0;
color: var(--mapri-navy);
}
.mapri-hr-employees__mode-card-desc {
margin: 0;
flex: 1 1 auto;
}
.mapri-hr-employees__mode-card .mapri-btn {
align-self: flex-start;
}
@media (max-width: 767px) {
.mapri-hr-employees__mode-cards {
grid-template-columns: 1fr;
}
.mapri-hr-employees__mode-card .mapri-btn {
align-self: stretch;
text-align: center;
}
}
.mapri-hr-employees__missing-note {
color: var(--mapri-red-text);
font-size: 0.85em;
}
.mapri-hr-employees__edit-link {
margin-top: 0.5em;
}
.mapri-dashboard__table .mapri-hr-employees__edit-link {
margin-top: 0;
margin-left: 0.5em;
}
.mapri-hr-employees__edit-row td {
background: var(--mapri-neutral-bg);
}
.mapri-hr-employees__edit-form h3 {
margin-top: 0;
color: var(--mapri-navy);
}
.mapri-field--valid {
border-color: #2ea44f !important;
background-color: var(--mapri-green-bg);
}
.mapri-field--invalid {
border-color: #c0392b !important;
outline: 1px solid #c0392b;
}
.mapri-hr-employees__filters {
display: flex;
flex-wrap: wrap;
gap: 1em;
align-items: flex-end;
margin-bottom: 1em;
}
.mapri-hr-bulk-invite__scope {
display: flex;
flex-wrap: wrap;
gap: 1em;
margin: 0.75em 0;
}
.mapri-hr-bulk-invite__scope label {
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.mapri-hr-bulk-invite__preview {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--mapri-border);
}
.mapri-hr-bulk-invite__preview-list {
max-height: 16em;
overflow-y: auto;
margin: 0.5em 0 1em;
padding-left: 1.2em;
}
.mapri-hr-employees__mobile-select {
display: block;
margin-bottom: 0.5em;
}
.mapri-hr-bulk-invite__preview-stats {
display: flex;
flex-wrap: wrap;
gap: 0.5em 1.5em;
list-style: none;
margin: 0 0 1em;
padding: 0;
font-size: 0.95em;
}
.mapri-inactivity-modal {
display: none;
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(15, 42, 74, 0.55);
align-items: center;
justify-content: center;
}
.mapri-inactivity-modal--visible {
display: flex;
}
.mapri-inactivity-modal__box {
background: #fff;
border-radius: 10px;
box-shadow: var(--mapri-shadow);
padding: 2em 2.25em;
max-width: 380px;
width: calc(100% - 2em);
text-align: center;
}
.mapri-inactivity-modal__message {
margin: 0 0 0.75em;
color: var(--mapri-navy);
font-weight: 700;
font-size: 1.1em;
}
.mapri-inactivity-modal__countdown {
margin: 0 0 1.25em;
color: var(--mapri-amber-text);
font-weight: 600;
}