@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

body {font-family: 'Atkinson Hyperlegible Next', sans-serif;background: #d9d9d9;color: #3e3e3e;margin: 0;max-width: 1000px;margin-inline: auto;width: 100vw;}

/* Home icon styling */
.home-icon-container {
    position: fixed;
    z-index: 1000;
    background: rgb(48 48 48 / 90%);
    padding-inline: 2rem;
    left: 0;
    top: 0;
    gap: 1rem;
    opacity: .75;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
}


.incontact-block-cell:has(>em) {
    min-width: 110px;
    max-width: 25%;
}

.incontact-block-row, .incontact-row {
    border-bottom: 1px dotted #5c54605e;
    margin-bottom: 1rem;
}

.home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 0.2s;
}

.home-icon:hover {
    opacity: 0.7;
}

.home-icon img {
    filter: invert(1);
}

.container {/* margin-left: auto; *//* margin-right: auto; */padding: 2em;background: #ffffff;border-radius: 5px;border: 1px solid #c5c5c5;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-top: 6px solid #7200a3;margin-block: 6rem;position: revert-layer;right: auto;display: block;max-width: calc(100vw - 4rem);width: 750px;justify-self: center;box-shadow: 0px 10px 18px #8080804a;}
h1 {/* color: #ffffff; *//* margin-inline: 8px; */margin-top: -2rem;margin-bottom: -.5rem;padding: 1em;margin-inline: -2rem;background-color: #9700d8c4;color: white;text-align: center;}
.incontact-row {display: flex;margin-inline: -2rem;margin-bottom: 1rem;border-bottom: 1px dotted #5c54605e;padding-bottom: 1rem;padding-inline: 2rem;align-items: center;gap: 1.5em;min-height: 2rem;}
.incontact-cell {/* padding: 5px 10px; */flex: 1;max-width: fit-content;}


@media (max-width: 800px) {
   .container {
       margin-block: 4rem;
       margin-bottom: 0;
   }
}

/* Header row styling for << >> surrounds */
.incontact-header-row {
    display: flex;
    margin-inline: -2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #c5c5c5;
    padding-bottom: 1rem;
    padding-inline: 2.5em;
    background: linear-gradient(135deg, rgb(101 101 101 / 17%) 0%, rgb(86 86 86 / 13%) 100%);
    margin-top: -1rem;
    padding-top: 1rem;
}

.incontact-header-cell {
    padding: 8px 12px;
    flex: 1;
    font-weight: bold;
    font-size: 1.1em;
}

.incontact-block-row {display: flex;margin-bottom: 15px;display: flex;margin-inline: -2rem;margin-bottom: 1rem;border-bottom: 1px dotted #5c54605e;padding-bottom: 1rem;padding-inline: 2rem;align-items: center;gap: 1.5em;}
.incontact-block-cell {display: flex;/* padding: .5rem 0; */position: relative;flex: 1;max-width: 100%;width: 100%;}
.incontact-block-cell em {display: inline-block;/* width: 120px; *//* font-weight: bold; */}
.selectable {padding: 1rem;/* margin-left: 10px; */min-width: 200px;width: -webkit-fill-available;font-family: 'Atkinson Hyperlegible Next', sans-serif;border: 0;background-color: #f0f0f0;border-radius: 4px;min-width: 200px;}
.focusable, .focusable-input {background-color: #f0f0f0;padding: 1em;cursor: pointer;border-radius: 3px;width: -webkit-fill-available;display: inline-block;min-height: 19px;min-width: 200px;display: block;}
.focusable:hover { background-color: #e0e0e0; }
.back-button, .button, .construction-button {border: 0;font-size: 1rem;font-family: 'Atkinson Hyperlegible Next', sans-serif;font-weight: 700;display: inline-block;padding: .5rem 1.5rem;background-color: #b0b0b080;color: #464646;text-decoration: none;border-radius: .5rem;border-bottom: 5px solid #bfbfbf;border-right: 5px solid #9b9b9b;border-bottom-left-radius: .5rem;border-bottom-right-radius: .5rem;font-weight: 500;margin-left: -0.25rem;zoom: 1;text-align: center;}
.back-button:hover, .button:hover, .construction-button:hover {background-color: #efefef;/* outline: 3px solid #7c7c7c; *//* border-color: #8f8f8f; */}
em {font-style: italic;color: #555;}
.styled-select {
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #f8f8fc;
    color: #333;
    font-size: 1rem;
    margin-bottom: 12px;
    min-width: 220px;
    transition: border-color 0.2s;
}
.styled-select:focus {
    border-color: #007bff;
    outline: none;
}

.styled-textarea, .multi-focus {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #f8f8fc;
    color: #333;
    font-size: 1rem;
    margin-bottom: 12px;
    resize: vertical;
    transition: border-color 0.2s;
}
.styled-textarea:focus, .multi-focus:focus {
    border-color: #007bff;
    outline: none;
}

.foreach-item {
    border: 3px solid #dfdfdf;
    /* padding: 12px; */
    margin-bottom: 1rem;
    border-radius: 6px;
    padding-top: 1rem;
    padding-bottom: 0px;
    padding-inline: calc(2rem);
    margin-inline: calc(-1rem + 3px);
}

hr {
    margin-bottom: 1rem;
    margin-inline: -2rem;
}

.back-button:active, .construction-button:active, .button:active {
    /* outline: 2px solid #785e86; */
    border-top: 5px solid #ffffff;
    border-left: 5px solid #fff3f3;
    border-right: 0;
    border-bottom: 0;
    background-color: #b5b5b5;
    border-bottom-right-radius: 6px;
    color: white;
    /* outline: 3px solid #9700d8; */
}

h2 {}

h2 {
    margin-block: 1.5em;
}

html {
    display: flex;
}

.incontact-multiline-container > .incontact-row,
.incontact-multiline-container > .incontact-block-row {
    border-bottom: 0;
    display: flex;
    margin-inline: -2rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-inline: 2rem;
    align-items: center;
    gap: 1.5em;
    margin-bottom: 0;

    &:last-child {
        border-bottom: 1px dotted #5c54605e;
        margin-bottom: 1rem;
    }
}

/* Space element for flexible spacing in rows */
.incontact-space {
    flex: 6;
    margin-left: auto;
    margin-right: auto;
}

.incontact-cell:has(.incontact-space) {
    margin-left: auto;
    margin-right: auto;
}

.emoji-btn {
    background-color: transparent;
    border: 0;
    aspect-ratio: 1/1;
    width: 1.5em;
    padding: 0px;
    border-radius: 32px;
    height: 1.5em;
    display: flex;
    zoom: 1.5;
    cursor: pointer;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-sizing: content-box;

    &:hover {
        background-color: transparent;
        scale: 1.1;
        /* padding: 2px; */
        /* outline: 1.5px solid #dbdbdb; */
    }
    &:active {
        border: 0;
        border-radius: 50px;
        background-color: #eeeeee;
    }
}

/* JSON Editor Styling */
.json-editor-container {
    max-width: 100%;
}

.json-editor-container textarea {
    width: 100%;
    min-height: 400px;
    font-family: 'Courier New', Monaco, monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background-color: #f8f8f8;
    resize: vertical;
    box-sizing: border-box;
}

.json-editor-container textarea:focus {
    outline: none;
    border-color: #7200a3;
    background-color: #fff;
}

.json-editor-container button {
    margin-right: 10px;
    margin-bottom: 10px;
}

.json-editor-container h2 {
    color: #7200a3;
    margin-bottom: 20px;
}

.json-editor-container p {
    margin: 5px 0;
    font-weight: 500;
}

#validationResult {
    /* padding: 10px; */
    border-radius: 10px;
    font-weight: bold;
}

#validationResult div[style*="color: green"] {
    background-color: #d4edda;
    border: 0px solid #c3e6cb;
    color: #155724 !important;
}

#validationResult div[style*="color: red"] {
    background-color: #f8d7da;
    border: 0px solid #f5c6cb;
    color: #721c24 !important;
}

#validationResult > div {
    padding: 1em;
}

.incontact-multiline-container > .incontact-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0;
}

textarea {
    width: 100%;
    overflow: auto;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    color: #818181;
    padding: 2em 1em;
    box-sizing: border-box;
}

.foreach-item > :last-child {
    margin-bottom: 0;
    border-bottom: none;
}