:root{
    --ink:#17202a;
    --muted:#69747f;
    --line:#dfe4e8;
    --bg:#f3f6f8;
    --card:#ffffff;

    /* Blu istituzionale */
    --accent:#003b70;
    --accent2:#002b52;
    --accent-light:#e8f0f7;

    --ok:#18794e;
    --warn:#9b5b00;
    --danger:#b42318;

    --shadow:0 8px 28px rgba(18,35,50,.06);
}


/* ============================================================
   RESET
   ============================================================ */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    line-height:1.45;
}

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


/* ============================================================
   HEADER
   ============================================================ */

.top{
    min-height:72px;
    background:#fff;
    border-bottom:1px solid var(--line);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 34px;

    position:sticky;
    top:0;
    z-index:20;

    box-shadow:0 2px 10px rgba(0,0,0,.025);
}

.top-brand{
    display:flex;
    align-items:center;
    gap:14px;

    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;

    color:var(--accent);
}

.aci-mini,
.aci-mark{
    font-weight:900;
    letter-spacing:-.08em;
}

.aci-mini{
    font-size:22px;
    color:var(--accent);
}

.top nav{
    display:flex;
    align-items:center;
    gap:24px;

    font-size:12px;
    font-weight:700;

    color:var(--muted);
}

.top nav a{
    padding:27px 0 24px;
    border-bottom:3px solid transparent;

    transition:
        color .15s ease,
        border-color .15s ease;
}

.top nav a:hover{
    color:var(--accent);
}

.top nav a.active{
    color:var(--accent);
    border-bottom-color:var(--accent);
}


/* ============================================================
   LAYOUT
   ============================================================ */

.container{
    width:100%;
    max-width:1180px;

    margin:0 auto;

    padding:46px 24px 60px;
}

.narrow{
    max-width:900px;
}

.page-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:20px;

    margin-bottom:30px;
}

.eyebrow{
    font-size:10px;
    font-weight:800;
    letter-spacing:.17em;

    color:var(--accent);

    margin-bottom:9px;
}

h1{
    font-size:38px;
    line-height:1.05;

    margin:0 0 10px;

    letter-spacing:-.035em;
}

h2{
    font-size:21px;
    line-height:1.2;

    margin:0 0 9px;

    letter-spacing:-.015em;
}

p{
    margin-top:0;
}

.muted{
    color:var(--muted);
    line-height:1.55;
}


/* ============================================================
   CARDS
   ============================================================ */

.card{
    background:var(--card);

    border:1px solid var(--line);
    border-radius:14px;

    box-shadow:var(--shadow);
}

.section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;
}


/* ============================================================
   STATISTICHE
   ============================================================ */

.stats{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:16px;

    margin-bottom:22px;
}

.stat{
    background:#fff;

    border:1px solid var(--line);
    border-radius:14px;

    padding:21px 22px;

    position:relative;
    overflow:hidden;
}

.stat::before{
    content:"";

    position:absolute;
    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:var(--accent);
}

.stat span,
.mini-grid span,
.code-box span{
    display:block;

    font-size:9px;
    font-weight:800;

    letter-spacing:.14em;

    color:var(--muted);
}

.stat strong{
    display:block;

    font-size:32px;
    line-height:1;

    margin-top:9px;

    color:var(--accent);
}

.stat small{
    display:block;

    margin-top:9px;

    font-size:11px;
    color:var(--muted);
}


/* ============================================================
   TABELLE
   ============================================================ */

.table-card{
    padding:22px;
}

.table-scroll{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;

    border-collapse:collapse;

    font-size:13px;
}

th{
    text-align:left;

    color:var(--muted);

    font-size:9px;
    font-weight:800;

    letter-spacing:.12em;

    padding:12px;

    border-bottom:1px solid var(--line);

    white-space:nowrap;
}

td{
    padding:14px 12px;

    border-bottom:1px solid var(--line);

    vertical-align:middle;
}

tbody tr:last-child td{
    border-bottom:0;
}

tbody tr:hover{
    background:#fafcfd;
}

td small{
    display:block;

    color:var(--muted);

    margin-top:4px;

    font-size:10px;
}


/* ============================================================
   BADGE
   ============================================================ */

.badge{
    display:inline-block;

    border-radius:999px;

    padding:6px 9px;

    font-size:8px;
    font-weight:800;

    letter-spacing:.08em;

    white-space:nowrap;
}

.badge.on{
    background:#e7f5ee;
    color:var(--ok);
}

.badge.off{
    background:#fbeaea;
    color:var(--danger);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    border:0;
    border-radius:8px;

    padding:12px 16px;

    font-size:10px;
    font-weight:800;

    letter-spacing:.08em;

    cursor:pointer;

    transition:
        background .15s ease,
        transform .1s ease,
        opacity .15s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn.primary{
    background:var(--accent);
    color:#fff;
}

.btn.primary:hover{
    background:var(--accent2);
}

.btn.secondary{
    background:#edf1f4;
    color:#24313c;
}

.btn.secondary:hover{
    background:#e2e7eb;
}

.btn.danger{
    background:#fbeaea;
    color:var(--danger);
}

.btn.small{
    padding:8px 10px;
    font-size:8px;
}

.btn.disabled{
    opacity:.45;
    cursor:default;
    pointer-events:none;
}


/* ============================================================
   RICERCA
   ============================================================ */

.search{
    display:flex;

    gap:10px;

    margin-bottom:18px;
}

.search input{
    flex:1;
}


/* ============================================================
   FORM
   ============================================================ */

label{
    display:block;

    font-size:12px;
    font-weight:700;

    margin:17px 0 7px;
}

input{
    width:100%;

    border:1px solid #d1d8de;
    border-radius:8px;

    padding:13px 14px;

    font:inherit;

    background:#fff;

    color:var(--ink);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

input:focus{
    outline:none;

    border-color:var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(0,59,112,.10);
}

.form-help{
    color:var(--muted);

    font-size:11px;
    line-height:1.55;

    margin:10px 0 0;
}

.form-card{
    padding:28px;
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-wrap{
    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(280px,520px)
        minmax(320px,480px);

    justify-content:center;
    align-content:center;

    gap:60px;

    padding:40px;

    background:
        radial-gradient(
            circle at 15% 20%,
            #e8f0f7 0,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f3f6f8,
            #fff
        );
}

.brand{
    align-self:center;

    display:flex;

    gap:22px;

    align-items:flex-start;
}

.aci-mark{
    font-size:42px;

    color:var(--accent);

    border:4px solid var(--accent);

    padding:4px 8px;

    line-height:.8;

    transform:skew(-8deg);
}

.brand h1{
    font-size:52px;
}

.brand p{
    max-width:390px;

    color:var(--muted);

    line-height:1.6;
}

.login-card{
    padding:34px;
}

.login-card h2{
    font-size:28px;

    margin-bottom:7px;
}

.login-card form{
    margin-top:24px;
}

.login-card .btn{
    width:100%;
    margin-top:18px;
}

.login-description{
    color:var(--muted);

    font-size:13px;

    line-height:1.6;
}

.admin-login{
    grid-template-columns:
        1fr
        420px;
}

.admin-login .brand h1{
    font-size:42px;
}


/* ============================================================
   MESSAGGI
   ============================================================ */

.notice,
.error{
    padding:12px 14px;

    border-radius:9px;

    font-size:12px;

    margin-top:16px;
}

.notice{
    background:#eef7f2;
    color:#17663f;
    border:1px solid #d7ebdf;
}

.error{
    background:#fceeee;
    color:#9e2118;
    border:1px solid #f2d4d1;
}


/* ============================================================
   AREA PUBBLICA
   ============================================================ */

.footer-note{
    font-size:11px;

    color:var(--muted);

    margin-top:20px;

    text-align:center;
}

.public footer{
    position:fixed;

    bottom:18px;

    left:0;
    right:0;

    text-align:center;

    color:#8a9096;

    font-size:10px;
}


/* ============================================================
   HERO / SESSIONE
   ============================================================ */

.hero{
    display:flex;

    justify-content:space-between;

    gap:30px;

    align-items:center;

    margin-bottom:24px;
}

.session-box{
    background:#fff;

    border:1px solid var(--line);

    border-radius:14px;

    padding:18px 22px;

    text-align:center;

    min-width:190px;

    box-shadow:var(--shadow);
}

.session-box span{
    display:block;

    font-size:9px;

    color:var(--muted);

    letter-spacing:.13em;
}

.session-box strong{
    display:block;

    font-size:25px;

    margin-top:6px;

    color:var(--accent);
}

.launch{
    padding:28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}


/* ============================================================
   NAVIGAZIONE
   ============================================================ */

.back{
    display:inline-block;

    color:var(--muted);

    font-size:12px;

    margin-bottom:24px;
}

.back:hover{
    color:var(--accent);
}


/* ============================================================
   CODICE ACCESSO
   ============================================================ */

.code-box{
    margin-top:26px;

    border-top:1px solid var(--line);

    padding-top:22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}

.code-box strong{
    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size:24px;

    display:block;

    margin-top:7px;

    letter-spacing:.08em;

    color:var(--accent);
}

.actions{
    margin-top:25px;

    border-top:1px solid var(--line);

    padding-top:20px;
}


/* ============================================================
   GRIGLIA UTILIZZO
   ============================================================ */

.mini-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}

.mini-grid > div{
    padding:17px;

    background:#f7f9fa;

    border-radius:10px;

    border:1px solid #e7ebee;
}

.mini-grid strong{
    display:block;

    margin-top:7px;

    font-size:14px;

    word-break:break-word;
}


/* ============================================================
   STATO PROFILO
   ============================================================ */

.profile-status{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-top:8px;
}

.profile-status span{
    display:block;

    color:var(--muted);

    font-size:9px;

    font-weight:800;

    letter-spacing:.14em;
}

.profile-status strong{
    display:block;

    margin-top:6px;

    font-size:16px;
}


/* ============================================================
   LOG
   ============================================================ */

.event{
    display:inline-block;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size:10px;

    background:#edf3f7;

    color:var(--accent);

    padding:5px 7px;

    border-radius:5px;
}

.log-count{
    color:var(--accent);

    font-size:14px;
    font-weight:800;

    text-align:right;
}

.log-count span{
    display:block;

    color:var(--muted);

    font-size:9px;
    font-weight:600;

    margin-top:3px;
}

.nowrap{
    white-space:nowrap;
}


/* ============================================================
   PAGINAZIONE
   ============================================================ */

.pagination{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    padding-top:22px;

    border-top:1px solid var(--line);

    margin-top:20px;
}

.pagination-info{
    color:var(--muted);

    font-size:11px;

    font-weight:700;

    min-width:100px;

    text-align:center;
}


/* ============================================================
   EMPTY STATE / NOTE
   ============================================================ */

.empty-state{
    padding:28px 10px;

    text-align:center;
}

.empty-state strong{
    display:block;

    font-size:14px;

    margin-bottom:6px;
}

.empty-state span{
    color:var(--muted);

    font-size:11px;
}

.report-note{
    padding:24px;

    margin-top:20px;
}

.report-note p{
    color:var(--muted);

    font-size:12px;

    line-height:1.65;

    margin-bottom:0;

    max-width:760px;
}


/* ============================================================
   FOOTER ADMIN
   ============================================================ */

.admin-footer{
    text-align:center;

    color:#8a949c;

    font-size:10px;

    padding-top:34px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

    .top{
        padding:0 20px;
    }

    .top nav{
        gap:15px;
    }

    .login-wrap{
        grid-template-columns:1fr;

        max-width:700px;

        margin:auto;

        gap:30px;
    }

}


@media(max-width:800px){

    .top{
        min-height:64px;
    }

    .top nav{
        gap:10px;
    }

    .top nav a{
        padding:23px 0 20px;

        font-size:10px;
    }

    .top-brand span:last-child{
        display:none;
    }

    .container{
        padding:32px 16px 45px;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .page-title{
        align-items:flex-start;

        flex-direction:column;
    }

    .hero,
    .launch{
        display:block;
    }

    .session-box{
        margin-top:20px;
    }

    .launch .btn{
        margin-top:18px;

        width:100%;
    }

    .mini-grid{
        grid-template-columns:1fr;
    }

    .profile-status{
        align-items:flex-start;

        flex-direction:column;
    }

    .profile-status .btn{
        width:100%;
    }

    .code-box{
        align-items:flex-start;

        flex-direction:column;
    }

    .code-box .btn{
        width:100%;
    }

    .search{
        flex-wrap:wrap;
    }

    .search input{
        flex-basis:100%;
    }

}


@media(max-width:600px){

    .login-wrap{
        padding:24px 18px;
    }

    .brand{
        gap:15px;
    }

    .brand h1{
        font-size:36px;
    }

    .admin-login .brand h1{
        font-size:34px;
    }

    .aci-mark{
        font-size:32px;

        border-width:3px;
    }

    h1{
        font-size:32px;
    }

    .login-card{
        padding:25px;
    }

    .table-card{
        padding:15px;
    }

    .pagination{
        gap:8px;
    }

    .pagination .btn{
        padding:10px 9px;

        font-size:8px;
    }

}