/**
    This CSS file is setup with a mobile-first approach.
 */
@font-face {
    font-family: 'Roobert-Regular';
    src: url('/fonts/Roobert-Regular.ttf') format('truetype');
    font-display: swap;
    font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;
}

@font-face {
    font-family: 'Roobert-SemiBold';
    src: url('/fonts/Roobert-SemiBold.ttf') format('truetype');
    font-display: swap;
    font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;
}

html {
    --font-main: 'Roobert-Regular', sans-serif;
    --font-main-bold: 'Roobert-SemiBold';

    --moneygo-svea-interactive-blue: #00699a;
    --moneygo-svea-interactive-blue-rgb: 0, 105, 154;
    --moneygo-svea-interactive-blue-hover: #146790;

    --moneygo-svea-text-link: #006d9f;
    --moneygo-svea-text-link-active: #003551;

    --moneygo-svea-dark-blue: #00325C;
    --moneygo-svea-dark-blue-rgb: 0, 50, 92;

    --moneygo-svea-turquoise: #00AECE;
    --moneygo-svea-turquoise-rgb: 0, 174, 206;

    --moneygo-svea-light-turquoise: #cceff5;
    --moneygo-svea-light-turquoise-rgb: 204, 239, 245;

    --moneygo-svea-electric-blue: #0747C8;
    --moneygo-svea-electric-blue-rgb: 7, 71, 200;

    --moneygo-svea-oat: #F1F3E0;
    --moneygo-svea-oat-rgb: 241, 243, 224;

    --moneygo-svea-purple: #BEB1F2;
    --moneygo-svea-purple-rgb: 190, 177, 242;

    --moneygo-svea-electric-yellow: #e2ff9f;
    --moneygo-svea-electric-yellow-rgb: 226, 255, 159;

    --moneygo-svea-grey-disabled: #949494;
    --moneygo-svea-grey-divider: #ebebeb;
    --moneygo-svea-grey-subtle: #f6f6f6;

    --moneygo-svea-white: #ffffff;
    --moneygo-svea-white-rgb: 255, 255, 255;

    --moneygo-svea-black: #141414;
    --moneygo-svea-black-rgb: 20, 20, 20;

    --moneygo-svea-success: #dbf2c6;
    --moneygo-svea-info: #e8f6f9;
    --moneygo-svea-critical-background: #ffe9e9;
    --moneygo-svea-critical: #c73535;
    --moneygo-svea-pending: #f1f0eb;
    --moneygo-svea-alert: #fff2e2;

    min-height: 100vh;
}

body {
    font-family: var(--font-main);
    background-color: var(--moneygo-svea-white);
    color: var(--moneygo-svea-black);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-wrapper {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

small {
    color: var(--moneygo-svea-dark-blue);
    font-style: italic;
    line-height: 1.7rem;
}

.is-empty {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--moneygo-svea-grey-disabled);
}

.error-msg {
    color: var(--moneygo-svea-critical);
}

.section {
    width: 100%;
    flex: 1
}

.section-turquoise {
    background-color: var(--moneygo-svea-light-turquoise);
    color: var(--moneygo-svea-dark-blue);
}

.section-oat {
    background-color: var(--moneygo-svea-oat);
    color: var(--moneygo-svea-dark-blue);
}

.section-alert {
    background-color: var(--moneygo-svea-alert);
    color: var(--moneygo-svea-black);
}

.section-white {
    background-color: var(--moneygo-svea-white);
    color: var(--moneygo-svea-dark-blue);
}

.section-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 2rem;
    padding: 2rem 1rem;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.content-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
    padding: 1.5rem;
}

.content-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 1.5rem;
}

.edit-mode {
    cursor: pointer;
}

.edit-mode:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(var(--moneygo-svea-interactive-blue-rgb), 0.5);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    border-radius: 1.5rem;
}

.modal-content {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    text-align: center;
    gap: 1.5rem;
}

.modal-title {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.moneygo-light-grey-text {
    color: var(--moneygo-svea-grey-subtle);
}

.moneygo-red-text {
    color: var(--moneygo-svea-critical);
}

.white-box {
    background-color: var(--moneygo-svea-white);
    color: var(--moneygo-svea-dark-blue);
    border-radius: 1.5rem;
}

.oat-box {
    background-color: var(--moneygo-svea-oat);
    color: var(--moneygo-svea-dark-blue);
    border-radius: 1.5rem;
}

.purple-box {
    background-color: var(--moneygo-svea-purple);
    color: var(--moneygo-svea-dark-blue);
    border-radius: 1.5rem;
}

.outline-box-dark-blue {
    border: 2px solid var(--moneygo-svea-dark-blue);
    border-radius: 1.5rem;
}

.outline-box {
    border: 2px solid var(--moneygo-svea-grey-divider);
    border-radius: 1.5rem;
}

.info-label {
    color: var(--moneygo-svea-dark-blue);
    line-height: 1.7rem;
}

.info-value {
    color: var(--moneygo-svea-dark-blue);
    font-family: var(--font-main-bold);
    line-height: 1.7rem;
}

.note-text {
    font-style: italic;
    font-weight: 400;
}

.info-message-container {
    display: block;
    border: 1px solid var(--moneygo-svea-grey-disabled);
    background-color: var(--moneygo-svea-grey-subtle);
    font-family: var(--font-main-bold);
    color: var(--moneygo-svea-black);
    padding: 1.5rem;
    line-height: 1.7rem;
    border-radius: 1rem;
    animation: fadeIn 0.3s ease-out forwards;
}

.loader {
    display: inline-block;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
    box-sizing: border-box;
    border: 0.25em solid var(--moneygo-svea-grey-divider);
    border-top-color: var(--moneygo-svea-white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden-item {
    display: none;
}

/**
    Tablet breakpoint
 */
@media (min-width: 768px) {
    .section-inner {
        grid-template-columns: repeat(12, 1fr);
        padding: 2.5rem 1.5rem;
        gap: 2.5rem;
    }

    .modal-content {
        gap: 2.5rem;
    }
}

/**
    Desktop breakpoint
 */
@media (min-width: 1200px) {
    .section-inner {
        padding: 3rem 3rem;
        gap: 3rem;
    }

    .modal-content {
        gap: 3rem;
    }
}