@font-face {
    font-family: "Instrument Sans";
    src: url("/fonts/InstrumentSans-VariableFont_wdth,wght.ttf");
    font-style: normal;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("/fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf");
    font-style: italic;
}

html {
    font-family: "Instrument Sans", system-ui, sans-serif;
    color: #2a2a2a;
}

html, body {
    padding: 0;
    margin: 0;
}

/* Stili header */

.header {
    height: 6vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
    background-color: #FAFAFA;
}

.header-left {
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    box-sizing: border-box;
}

.nav-item-anchor {
    height: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.nav-item-anchor .nav-item {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.nav-item-anchor:hover .nav-item {
    border-bottom: 1px solid #25D366;
}

.nav-item-anchor.selected {
    font-weight: bold;
}

.nav-item-anchor.selected .nav-item {
    border-bottom: 3px solid #25D366;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1rem;
    gap: 0.5rem;
}

#extension {
    position: relative;
}

#extension-button {
    padding: 0.35rem;
    color: inherit;
    border-radius: 6px;
    border: none;
    background-color: transparent;
    outline: none;
}

#extension-button:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

#extension-dropdown {
    width: 20rem;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    top: 120%;
    background-color: white;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    box-sizing: border-box;
    right: 0;
}

#extension-dropdown.hidden {
    display: none;
}

.extension-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.extension-item {
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    padding: 0.6rem;
}

.extension-item:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

#user {
    position: relative;
}

#user-button {
    padding: 0.5rem;
    border-radius: 6px;
    border: none;
    background-color: transparent;
    outline: none;
}

#user-button:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

#user-dropdown {
    position: absolute;
    top: 120%;
    width: 100%;
    background-color: white;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#user-dropdown.hidden {
    display: none;
}

/* Stili elementi default */

input, select, button {
    font: inherit;
    color: inherit;
    border-radius: 8px;
    outline: none;
    border: 1px solid rgb(118, 118, 118);
    padding: 0.3rem;
    background-color: transparent;
}

input:hover,
select:hover,
button:hover,
textarea:hover {
    border: 1px solid rgb(0, 0, 0);
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    border: 1px solid rgb(0, 0, 0);
    outline: 1px solid rgb(0, 0, 0);
}

input[type=button], button {
    cursor: pointer;
    padding: 0.5rem 1rem;
    background-color: rgb(240, 240, 240);
}

input[type=button]:disabled, button:disabled {
    cursor: not-allowed;
}

input[type=file] {
    cursor: pointer;
}

textarea {
    font: inherit;
    border-radius: 8px;
    padding: 0.5rem;
}

table {
    position: relative;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-spacing: 0;
    border-radius: 14px;
}

table thead {
    background-color: white;
    position: sticky;
    top: 0;
}

table tbody tr:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}

table thead tr th {
    background-color: #25D366;
    color: #3a3a3a;
    font-weight: 500;
}

table tbody tr td,
table thead tr th {
    padding: 1rem;
}

table thead tr:first-child th:first-child {
    border-top-left-radius: 14px;
}

table thead tr:first-child th:last-child {
    border-top-right-radius: 14px;
}

table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 14px;
}

table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 14px;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.card {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding: 1.5rem;
    border-radius: 16px;
}