body
{
font-family: Segoe UI, sans-serif;
font-size: 16px;
margin: 0;
background-color: var(--company-color-navigation-soft);
color: var(--company-color-external-action);
}

/*body.configure
{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}*/
    body.configure {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 20px;
    }
.container.configure {
    text-align: center;
    /*width: min(1200px, 95vw);
    width: 350px;*/
    width: 500px;
    max-width: 95vw;
    background: var(--company-color-surface);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--company-neutral-muted);
    margin: 20px;
}

body.mytextareas {
height: 20vh;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.container.mytextareas {
text-align: left;
width: 100%;
max-width: 900px;
}

.container-centered {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}

.logo {
width: 120px;
margin-bottom: 20px;
}

.page-navigation {
display: flex;
align-items: center;
gap: 20px;
}
.page-navigation a,
.page-navigation a:hover {
color: var(--company-color-navigation);
}
.page-navigation form {
margin: 0;
}
.page-navigation .logout-button {
width: auto;
margin: 0;
padding: 7px 14px;
}

input {
width: 100%;
padding: 12px;
border-radius: 8px;
margin: 10px 0;
border: 1px solid var(--company-neutral-border);
box-sizing: border-box;
}

h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    color: var(--company-color-external-action);
}

.mytextareas-item {
position: relative;
padding-top: 20px;
}

.core-textarea {
padding: 12px;
width: 100%;
min-height: 220px;
padding-top: 20px;
box-sizing: border-box;
display: block;
border: 1px solid var(--company-neutral-muted);
border-radius: 8px;
background: var(--company-color-surface);
resize: vertical;
text-align: left;
line-height: 1.4;
white-space: normal;
}

.cfg-textarea {
padding: 12px;
width: 100%;
min-height: 100px;
padding-top: 20px;
box-sizing: border-box;
display: block;
border: 1px solid var(--company-neutral-muted);
border-radius: 8px;
background: var(--company-neutral-disabled);
resize: vertical;
text-align: left;
}

.cfg-item {
margin-left: 15px;
margin-bottom: 10px;
}

.cfg-array-item {
margin-left: 20px;
border-left: 2px solid var(--company-neutral-border);
padding-left: 10px;
margin-bottom: 10px;
}

.cfg-item label, .cfg-array-item label {
display: block;
margin-bottom: 5px;
}

ul {
text-align: left;
padding-left: 20px;
margin-left: 0;
}

li {
text-align: left;
}

/* LINK ***********************/
a {
color: var(--company-color-external-action);
text-decoration: none;
}
a:hover {
color: var(--company-color-primary-action);
text-decoration: underline;
}


/* BOTTONI ********************/
button {
color: var(--company-color-surface);
border: 1px solid var(--company-color-external-action);
background-color: var(--company-color-external-action);
width: 100%;
padding: 12px;
border-radius: 8px;
margin-bottom: 20px; /*separa i bottoni tra loro */
box-sizing: border-box;
text-align: center;
text-decoration: none;
letter-spacing: 0;
cursor: pointer;
}
    button:hover {
        background-color: var(--company-color-external-action);
        box-shadow: 0 6px 14px var(--company-color-external-action);
        transform: translateY(-1px);
    }
button:active {
transform: translateY(0);
box-shadow: none;
}
button:focus {
outline: 3px solid var(--company-color-primary-action);
outline-offset: 3px;
}
.buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

    .buttons-grid form {
        margin: 0;
    }

    .buttons-grid button {
        width: 220px;
        margin-bottom: 0;
    }

/* customizzazioni */
    button.configure, button.post-date-generate {
        margin-top: 15px;
        background-color: var(--company-color-external-action);
    }
.choose-button, .choose-button-ext {
display: block;
padding: 16px 18px;
margin: 16px 0;
color: var(--company-color-surface);
font-size: 18px;
font-weight: 700;
transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.choose-button-ext {
    background-color: var(--company-color-external-action);
    border-color: var(--company-color-external-action);
}
.choose-button-ext:hover {
    background-color: var(--company-color-external-action);
    border-color: var(--company-color-external-action);
}
.home-app-button {
    background-color: var(--company-color-primary-action);
    border-color: var(--company-color-primary-action);
}
.home-app-button:hover {
    background-color: var(--company-color-primary-action-dark);
    border-color: var(--company-color-primary-action-dark);
}
.logout-button,
.logout-button:hover {
    background-color: var(--company-color-navigation);
    border-color: var(--company-color-navigation);
}
.assistant-button,
.assistant-button:hover {
    color: var(--company-color-external-action);
    background-color: var(--company-color-primary-action);
    border-color: var(--company-color-navigation);
    border-radius: 999px;
}
.choose-button:disabled,
.choose-button:disabled:hover,
.choose-button:disabled:active {
    color: var(--company-neutral-disabled);
    border-color: var(--company-neutral-muted);
    background-color: var(--company-neutral-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.admin-department {
    margin: 28px 0;
    padding: 18px;
    border: 1px solid var(--company-neutral-disabled);
    border-radius: 10px;
    background-color: var(--company-color-navigation-soft);
}
.admin-department h2 {
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--company-color-external-action);
    font-size: 20px;
}
button.obiettpaur {
background-color: var(--company-color-external-action);
}
button.highlight {
background-color: var(--company-color-primary-action);
}