@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --color-bg: #F6F5F1;
    /* Sfondo globale */
    --color-bg-alt: #EDECEA;
    /* Sfondo alternativo */
    --color-surface: #FFF;
    /* card, modali, input */
    --color-surface-raised: #FAFAF8;
    /* elementi elevati */
    --color-overlay: #1c1b1673;

    --color-border: #E3E1DB;
    /* bordo default */
    --color-border-strong: #C9C7BF;
    /* bordo marcato */
    --color-border-focus: #2058E8;
    /* focus input */


    --color-text-primary: #1C1B16;
    --color-text-secondary: #68665D;
    /* label, testo secondario */
    --color-text-muted: #9C9A90;
    /* placeholder, note, timestamp */
    --color-text-inverse: #FFFFFF;
    /* testo su sfondi scuri */
    --color-text-link: #2058E8;
    /* link */
    --color-text-link-hover: #1848CC;

    --color-accent: #2058E8;
    --color-accent-hover: #1848CC;
    --color-accent-light: #1038A8;
    /* sfondo badge */
    --color-accent-subtle: #F2F5FF;
    /* sfondo hover */

    /*
        COLORI DI STATO
    */

    /* Pending */
    --color-pending: #D08A00;
    --color-pending-bg: #FEF3C7;
    --color-pending-text: #7C4F00;
    --color-pending-border: #FBBF24;

    /* In Progress ) */
    --color-in-progress: #2058E8;
    --color-in-progress-bg: #EBF0FF;
    --color-in-progress-text: #1848CC;
    --color-in-progress-border: #93AEFF;

    /* Resolved  */
    --color-resolved: #1A9B6A;
    --color-resolved-bg: #D6F5EB;
    --color-resolved-text: #0D5E40;
    --color-resolved-border: #6DDBB8;

    /* Archived  */
    --color-archived: #7A7870;
    --color-archived-bg: #EEECEA;
    --color-archived-text: #3E3C38;
    --color-archived-border: #C2C0B8;

    /*
        PRIORITA' TICKET
    */

    --color-priority-low: #1A9B6A;
    --color-priority-low-bg: #D6F5EB;
    --color-priority-low-text: #0D5E40;

    --color-priority-medium: #D08A00;
    --color-priority-medium-bg: #FEF3C7;
    --color-priority-medium-text: #7C4F00;

    --color-priority-high: #D42B2B;
    --color-priority-high-bg: #FFE8E8;
    --color-priority-high-text: #8B0000;

    /*
        COLORI RUOLI
    */

    --color-role-client: #7C3AED;
    /* client */
    --color-role-client-bg: #EDE9FE;
    --color-role-operator: #2058E8;
    /* operatore */
    --color-role-operator-bg: #EBF0FF;
    --color-role-admin: #D42B2B;
    /* admin */
    --color-role-admin-bg: #FFE8E8;

    /*
        SIDEBAR
    */
    --color-sidebar-bg: #1C1B16;
    /* sidebar scura */
    --color-sidebar-text: #C8C6BE;
    --color-sidebar-text-active: #FFFFFF;
    --color-sidebar-item-hover: #ffffff12;
    --color-sidebar-item-active: #2058e840;
    --color-sidebar-accent: #2058E8;
    --color-sidebar-border: #ffffff14;

    /*
        CHAT / MESSAGGI
    */

    --color-msg-client-bg: #EBF0FF;
    /* bubble client */
    --color-msg-client-text: #1C1B16;
    --color-msg-operator-bg: #FFFFFF;
    /* bubble operatore */
    --color-msg-operator-text: #1C1B16;
    --color-msg-private-bg: #FFFBE6;
    /* nota privata */
    --color-msg-private-border: #FBBF24;
    --color-msg-private-text: #5C4A00;

    /*
        FONTS
    */

    --font-display: 'Syne', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Dimensioni */
    --text-2xs: 0.6875rem;
    /* 11px — micro label, tag */
    --text-xs: 0.75rem;
    /* 12px — caption, timestamp */
    --text-sm: 0.8125rem;
    /* 13px — badge, note */
    --text-base: 0.9375rem;
    /* 15px — testo corrente */
    --text-md: 1rem;
    /* 16px — testo enfatizzato */
    --text-lg: 1.125rem;
    /* 18px — sottotitoli */
    --text-xl: 1.25rem;
    /* 20px — titolo card */
    --text-2xl: 1.5rem;
    /* 24px — titolo sezione */
    --text-3xl: 1.875rem;
    /* 30px — titolo pagina */
    --text-4xl: 2.25rem;
    /* 36px — hero subtitle */
    --text-5xl: 3rem;
    /* 48px — hero title */
    --text-6xl: 3.75rem;
    /* 60px — hero grande */

    /* Pesi */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /*
        BORDER RADIUS
    */
    --radius-xs: 3px;
    /* tag molto piccoli */
    --radius-sm: 6px;
    /* badge, chip */
    --radius-md: 10px;
    /* input, pulsanti, card piccole */
    --radius-lg: 14px;
    /* card standard */
    --radius-xl: 20px;
    /* card grandi, modal */
    --radius-2xl: 28px;
    /* hero card, pannelli */
    --radius-full: 50%;
    /* pill / avatar */

    /*
        OMBRE
    */
    --shadow-xs: 0 1px 2px rgba(28, 27, 22, 0.05);
    --shadow-sm: 0 1px 4px rgba(28, 27, 22, 0.07),
        0 1px 2px rgba(28, 27, 22, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 27, 22, 0.09),
        0 2px 4px rgba(28, 27, 22, 0.05);
    --shadow-lg: 0 8px 24px rgba(28, 27, 22, 0.11),
        0 3px 8px rgba(28, 27, 22, 0.06);
    --shadow-xl: 0 16px 48px rgba(28, 27, 22, 0.13),
        0 6px 16px rgba(28, 27, 22, 0.07);
    --shadow-2xl: 0 24px 64px rgba(28, 27, 22, 0.15),
        0 8px 24px rgba(28, 27, 22, 0.08);
    --shadow-focus: 0 0 0 3px rgba(32, 88, 232, 0.18);
    /* ring focus input */
    --shadow-focus-error: 0 0 0 3px rgba(212, 43, 43, 0.18);

    --dark-gradient-bg: radial-gradient(ellipse 60% 50% at 75% 0%,
            #2058e82e 0%, transparent 70%), #0B0D14;


    /* ─────────────────────────────────────────
     FEEDBACK SISTEMA (Errori, Successi, Warning)
  ───────────────────────────────────────── */
    --color-error: #D42B2B;
    --color-error-bg: #FFE8E8;
    --color-error-border: #F5A0A0;
    --color-error-text: #8B0000;

    --color-success: #1A9B6A;
    --color-success-bg: #D6F5EB;
    --color-success-border: #6DDBB8;
    --color-success-text: #0D5E40;

    --color-warning: #D08A00;
    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FBBF24;
    --color-warning-text: #7C4F00;

    --color-info: #2058E8;
    --color-info-bg: #EBF0FF;
    --color-info-border: #93AEFF;
    --color-info-text: #1848CC;
}

.display-xl {
    font-size: var(--text-5xl);
    font-family: var(--font-display);
    font-weight: var(--font-extrabold);
    color: var(--color-text-primary);
}

.display-lg {
    font-size: var(--text-4xl);
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.display-md {
    font-size: var(--text-3xl);
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.title {
    font-size: var(--text-xl);
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.small {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.caption {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.24px;
}

.label-upper {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.96px;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1em;
    box-sizing: border-box;
    transition-duration: 0.15s;
    scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
    background-color: var(--color-surface);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-strong);
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul a {
    color: inherit;
    text-decoration: none;
}

button {
    font-size: inherit;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-lg);
    padding: 1em;
}

@media (max-width: 700px) {

    .btn-sm,
    .btn-md,
    .btn-lg {
        width: 100%;
        text-align: center;
    }
}

/* .header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 5em;
    padding: 0em 2em;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    background-color: var(--color-surface);
}

.header .logo a {
    color: var(--color-text-primary);
    text-decoration: none;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.4em;
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
}

.header .user-section {
    display: flex;
    align-items: center;
    gap: 1em;
}

.header nav {
    margin-left: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.header nav ul li a {
    display: block;
    margin: 0.2em;
}

.header .burger-menu {
    font-size: var(--text-2xl);
    display: none;
    padding: 1em;
    position: absolute;
    right: 0;
}

/* USER PROFILE */
.header .user-profile {
    position: relative;
}

.header .user-profile-button {
    display: flex;
    gap: 0.7em;
    align-items: center;
    border-radius: var(--radius-2xl);
    background-color: var(--color-surface);
    padding: 0.4em;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    font-size: var(--text-sm);
    height: 3.5em;
}

.header .user-profile-button:hover {
    cursor: pointer;
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

#user-profile-avatar {
    background-color: var(--color-bg-alt);
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-bold);
}

#user-profile-avatar.client-avatar {
    background-color: var(--color-role-client-bg);
    color: var(--color-role-client);
}

#user-profile-avatar.operator-avatar {
    background-color: var(--color-role-operator-bg);
    color: var(--color-role-operator);
}

#user-profile-avatar.admin-avatar {
    background-color: var(--color-role-admin-bg);
    color: var(--color-role-admin);
}

.header .user-profile-button #user-profile-display {
    white-space: nowrap;
}

.header .user-profile-button .icon {
    font-size: 0.7em;
    margin-right: 0.7em;
}

.header .user-section-dropdown {
    position: absolute;
    top: 3em;
    right: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    padding: 1em;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    z-index: 1000;
}

.header .user-section-dropdown nav {
    padding: 0;
}

.header .user-section-dropdown .label-upper {
    margin-bottom: 0.5em;
}

.header .user-section-dropdown hr {
    margin: 1em 0;
}

.header .user-section-dropdown.closed {
    max-height: 0;
    padding: 0;
    box-shadow: none;
    border-width: 0;
}

.user-section #dashboard,
.user-section #user-profile {
    display: none;
}

.header.logged .user-section #login,
.header.logged .user-section #register {
    display: none;
}

.header.logged .user-section #dashboard,
.header.logged .user-section #user-profile {
    display: inherit;
}

@media (max-width: 700px) {
    .header nav.menu.menu-closed {
        max-height: 0;
        padding: 0;
    }

    .header nav.menu {
        height: auto;
        overflow-y: auto;
        transition: max-height 0.3s, padding 0.3s;
        position: absolute;
        margin-left: 0;
        left: 0;
        top: 5em;
        padding: 1em;
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        gap: 2em;
        max-height: calc(100vh - 10em);
    }

    .header nav ul {
        flex-direction: column;
        order: 2;
        flex-shrink: 0;
    }

    .header nav .user-section {
        order: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        flex-shrink: 0;
    }

    .header .burger-menu {
        display: block;
    }

    .header nav .user-section .user-profile {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .header nav .user-section .user-section-dropdown {
        max-height: 50vh;
        height: 20em;
        position: relative;
        width: 100%;
        margin-top: 1em;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .header nav .user-section .user-section-dropdown.closed {
        max-height: 0;
        min-height: 0;
    }

    .user-profile-button .icon {
        position: absolute;
        right: 1em;
    }
}





/* FOOTER */
footer {
    background-color: var(--color-surface);
    padding: 3em 0;
    border-top: 1px solid var(--color-border);
}

footer .footer-content {
    width: 80%;
    margin: auto;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

footer .columns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3em;
}

footer .columns ul {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
}

footer .columns ul li {
    line-height: 2em;
}

footer .columns .col {
    max-width: 30%;
}

footer .columns .desc {
    color: var(--color-text-muted);
    line-height: 1.5em;
    margin-top: 2em;
}

footer .columns h4 {
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
}

footer a:hover {
    color: var(--color-text-primary);
}

hr {
    border: 1px solid var(--color-border);
}

footer .copyright {
    margin: 2em 0 0 0;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 700px) {
    footer .footer-content {
        width: 95%;
    }

    footer .columns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    footer .columns .col {
        max-width: 100%;
        text-align: center;
    }

    footer .columns .col:first-child {
        grid-column: span 3;
    }
}