@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --bg: #0f172a;
    font-size: 14px;
}

@supports (height: 100dvh) {
    :root {
        --viewport-height: 100dvh;
    }
}

body, html {
    width: 100%;
    height: var(--viewport-height);
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: white;
    scrollbar-color: #8b8b8b transparent;
}

body * {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

body, h1, h2, h3, h4, h5,
.ui, .ui.button, .ui.menu, .ui.table, .ui.label, .ui.statistic > .value, .ui.statistic > .label,
.ui.statistics .statistic > .label, .ui.statistics .statistic > .value,
.ui.dropdown, .ui.input > input {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

body > .ui.active.dimmer:not(.modals) {
    background-color: var(--bg);
}

.ui.modal>.close {
    top: 1rem !important;
    right: 1rem !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

.ui.dimmer.modals {
    z-index: 9999;
}

.ui.mini.modal.login,
.ui.mini.modal.autentica,
.ui.tiny.modal[class*="modal-errore"] {
    left: 50% !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 0 !important;
    /*overflow-y: auto;*/
    transform: translate(-50%, -50%) !important;
}

.ui.mini.modal.login,
.ui.mini.modal.autentica {
    width: min(360px, calc(100vw - 2rem)) !important;
}

.ui.tiny.modal[class*="modal-errore"] {
    width: min(540px, calc(100vw - 2rem)) !important;
}

body.login-page {
    overflow-y: auto;
    background: url("./img/login.jpg") center / cover fixed;
}

body.login-page > .ui.active.dimmer:not(.modals) {
    background: transparent;
}
.login-page-layout {
    --login-radius: .28571429rem;
    --login-border-width: 4px;
    --login-margin-x: max(.75rem, calc((100vw - 48rem) / 10));
    --login-foreground: #f5f6fa;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - var(--login-margin-x) * 4);
    min-height: calc(100dvh - 4rem);
    margin: 2rem auto;
    border: var(--login-border-width) solid var(--bg);
    border-radius: var(--login-radius);
}
.login-page-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22rem;
    border-radius: var(--login-radius);
    box-shadow: 0 0 0 var(--login-border-width) var(--bg);
}
.login-page-brand { width: min(200px, 60%); height: auto; }
.login-page-access {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 3rem 2rem;
    color: var(--login-foreground);
    background: var(--bg);
}
.login-page-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    flex-shrink: 0;
}
.login-page-logo > .loader-immagine {
    position: absolute;
    inset: 0;
    margin: 0;
}
.login-page-logo > .image.logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.login-page-main {
    display: flex;
    flex: 1;
    padding: 3rem 0;
}
.login-page-content {
    width: min(460px, 100%);
    margin: auto;
}
.login-page-welcome {
    margin-bottom: 4rem;
    text-align: center;
}
.login-page-welcome h1 {
    margin-bottom: .25rem;
    font-size: clamp(2rem, 3vw, 4rem);
    font-weight: 400;
}
.login-page-access .ui.form .field > label,
.login-page-access .password-dimenticata {
    color: inherit;
    font-weight: 400;
}
.login-page-access .ui.form .input > input { height: 36px; }
.login-page-access .ui.form :where(.field:not(.error) .input:not(.error)) > input:not(.error) {
    background: var(--login-foreground);
}
.login-page-access .ui.button.login {
    margin-bottom: 1rem;
}
.login-page-footer {
    position: absolute;
    right: 2rem;
    bottom: 1rem;
    left: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    color: var(--bg);
}
@media only screen and (max-width: 1024px) {
    .login-page-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
    .login-page-access { grid-row: 1; padding: 2rem; }
    .login-page-visual { min-height: 12rem; padding-bottom: 2rem; }
    .login-page-main { padding: 1rem 0; }
    .login-page-welcome { margin-bottom: 2rem; }
    .login-page-welcome h1 { font-size: clamp(2rem, 5vw, 4rem); }
}
@media only screen and (max-width: 480px) {
    .login-page-layout { min-height: calc(100dvh - 2rem); margin: 1rem auto; }
    .login-page-access { padding: 2rem 1rem 5rem; }
    .login-page-visual { position: static; height: 0; min-height: 0; padding: 0; box-shadow: none; }
    .login-page-brand { display: none; }
    .login-page-footer { right: 1rem; left: 1rem; color: var(--login-foreground); }
}