@import url('./main-layout.css');
@import url('./views/tipipermessi-view.css');
@import url('./views/blacklist-view.css');
@import url("./views/dashboard-view.css");
@import url('./views/whitelist-view.css');
@import url('./views/documents-form.css');
@import url('@fontsource/titillium-web/index.css');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@600;700&display=swap');

html {
    --lumo-border-radius-s: 1px;
    --lumo-border-radius-m: 2px;
    --lumo-border-radius-l: 4px;
    --lumo-size-xl: 4rem;
    --lumo-size-l: 3rem;
    --lumo-size-m: 2.5rem;
    --lumo-size-s: 2rem;
    --lumo-size-xs: 1.75rem;
    --lumo-space-xl: 2.5rem;
    --lumo-space-l: 1.75rem;
    --lumo-space-m: 1.125rem;
    --lumo-space-s: 0.75rem;
    --lumo-space-xs: 0.375rem;
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
    --lumo-line-height-m: 1.8;
    --lumo-line-height-s: 1.5;
    --lumo-line-height-xs: 1.3;
    --lumo-font-family: Titillium Web;

}

[theme~="dark"] {

}

.app-logo {
    width: 250px;
    height: 250px;
    background-image: url("images/ztlpass.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo {
    width: 50px;
    height: 50px;
    background-image: url("images/ztlpass.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.richiesta-accettata {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-success-color-10pct);
    color: var(--lumo-success-text-color);
}

.richiesta-rifiutata {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.richiesta-annullata {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.richiesta-in_attesa {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
}

.stato-approvato {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-success-color-10pct);
    color: var(--lumo-success-text-color);
}

.stato-attivo {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-success-color-10pct);
    color: var(--lumo-success-text-color);
}

.stato-revocato {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}


.stato-na_pagamento_scaduto {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.stato-na_pagamento_non_valido {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.stato-rifiutato {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.stato-creato {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-contrast-10pct);
    color: var(--lumo-contrast);
}

.stato-in_attesa_pagamento {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-contrast-10pct);
    color: var(--lumo-contrast);
}

.stato-scaduto {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-warning-color-10pct);
    color: var(--lumo-warning-text-color);
}

.stato-in_attesa_attivazione {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
}

.RUNNING {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-contrast-10pct);
    color: var(--lumo-contrast);
}

.DONE {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-success-color-10pct);
    color: var(--lumo-success-text-color);
}

.ERROR {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    background-color: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.targa-italiana-real {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 7.2em;
    height: 2.45em; /* targa leggermente più alta */
    padding: 0 0.38em;

    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    color: #111;

    border: 1px solid #aeb6bf;
    border-radius: 0.22em;
    box-sizing: border-box;

    font-family: "Titillium Web", sans-serif;
    font-size: 1.15em; /* carattere più grande */
    font-weight: 700;
    letter-spacing: 0.10em;
    line-height: 1;

    text-transform: uppercase;
    white-space: nowrap;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

/* bande blu */
.targa-italiana-real::before,
.targa-italiana-real::after {
    content: "";
    position: absolute;
    top: 0.08em;
    bottom: 0.08em;
    width: 0.44em;
    background: linear-gradient(to bottom, #0a56b5 0%, #003e92 100%);
    border-radius: 0.06em;
}

.targa-italiana-real::before {
    left: 0.08em;
}

.targa-italiana-real::after {
    right: 0.08em;
}

/* testo targa */
.targa-italiana-real .plate-text {
    display: inline-block;
    padding: 0 0.32em;

    transform: scaleY(1.18); /* caratteri più alti */
    transform-origin: center;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.9) transparent;
}

/* Chrome / Edge */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--lumo-primary-color-50pct);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lumo-primary-color);
}