/* RESET */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    background:
        radial-gradient(circle at top left, rgba(97, 202, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(31, 92, 148, 0.22), transparent 30%),
        linear-gradient(135deg, #0b1f38 0%, #12365d 45%, #1f5c94 100%);
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:32px 18px;
    color:#0f2744;
}

/* CONTAINER */
.container{
    width:100%;
    max-width:980px;
}

/* CARD */
.card{
    position:relative;
    background:#fff;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:42px;
    border-radius:24px;
    box-shadow:0 24px 60px rgba(4, 18, 36, 0.24);
    border:1px solid rgba(255,255,255,0.55);
    text-align:center;
}

/* LOGO */
.logo{
    width:148px;
    height:auto;
    display:block;
    margin:0 auto 18px;
}

/* TITOLI */
.title{
    font-size:clamp(28px, 4vw, 44px);
    line-height:1.08;
    margin-bottom:24px;
    color:#1f5c94;
    font-weight:800;
    letter-spacing:-0.02em;
}

/* FORM */
.trackingForm{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

/* INPUT */
.input{
    padding:16px 18px;
    border-radius:14px;
    border:1px solid #d5deea;
    background:#ffffff;
    font-size:16px;
    width:260px;
    max-width:100%;
    outline:none;
    transition:border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.input:focus{
    border-color:#1f5c94;
    box-shadow:0 0 0 4px rgba(31, 92, 148, 0.12);
}

/* BOTTONE */
.button{
    padding:16px 24px;
    border:none;
    background:linear-gradient(135deg, #1f5c94 0%, #2f7ac0 100%);
    color:white;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:0.25s;
    box-shadow:0 10px 24px rgba(31, 92, 148, 0.22);
}

.button:hover{
    background:linear-gradient(135deg, #143f6a 0%, #1f5c94 100%);
    transform:translateY(-1px);
}

/* INFO AREA */
.info{
    margin-top:28px;
    text-align:left;
}

/* ROW */
.row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:28px;
    padding:18px 0;
    border-bottom:1px solid #eef2f7;
}

/* LABEL */
.label{
    font-weight:700;
    color:#29415a;
    min-width:250px;
    line-height:1.45;
}

/* VALUE */
.value{
    color:#0f2744;
    font-weight:600;
    text-align:right;
    line-height:1.5;
    max-width:100%;
    word-break:break-word;
}

/* BADGE STATO */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #1f5c94 0%, #2f7ac0 100%);
    color:white;
    padding:9px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    text-align:center;
    min-height:36px;
    box-shadow:0 10px 20px rgba(31, 92, 148, 0.16);
}

/* NOTE AREA */
.notes{
    margin-top:28px;
    text-align:left;
}

.notesTitle{
    font-weight:800;
    margin-bottom:12px;
    color:#1f5c94;
    font-size:18px;
    line-height:1.3;
}

.noteBox{
    background:#f3f7fb;
    border:1px solid #e4edf6;
    padding:18px;
    border-radius:16px;
    font-size:15px;
    color:#344054;
    line-height:1.65;
    word-break:break-word;
}

/* LINK */
a{
    color:#1f5c94;
    font-weight:600;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/* ==========================================
   DASHBOARD 3-COLUMN LAYOUT
   ========================================== */

.dashboard-layout{
    display:grid;
    grid-template-columns:240px 1fr 280px;
    gap:24px;
    align-items:start;
}

/* LEFT: PROFILE & RANKING */
.dash-profile{
    background:#fff;
    border-radius:20px;
    padding:28px 22px;
    box-shadow:0 16px 40px rgba(4, 18, 36, 0.18);
    border:1px solid rgba(255,255,255,0.55);
    text-align:center;
    position:sticky;
    top:32px;
}

.profile-photo{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #e4edf6;
    margin-bottom:14px;
}

.profile-photo-placeholder{
    width:90px;
    height:90px;
    border-radius:50%;
    background:linear-gradient(135deg, #e4edf6 0%, #d5deea 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
    font-size:36px;
    color:#8fa4bd;
    font-weight:700;
}

.profile-name{
    font-size:17px;
    font-weight:800;
    color:#0f2744;
    margin-bottom:16px;
    line-height:1.3;
}

.ranking-score{
    font-size:38px;
    font-weight:800;
    color:#1f5c94;
    line-height:1;
    margin-bottom:4px;
}

.ranking-max{
    font-size:16px;
    font-weight:600;
    color:#8fa4bd;
}

.ranking-stars{
    display:flex;
    justify-content:center;
    gap:3px;
    margin:10px 0 6px;
}

.ranking-stars .star{
    font-size:22px;
    color:#d5deea;
}

.ranking-stars .star.filled{
    color:#f0a500;
}

.ranking-stars .star.half{
    color:#f0a500;
}

.ranking-count{
    font-size:12px;
    color:#8fa4bd;
    font-weight:600;
}

.ranking-badge-new{
    display:inline-block;
    background:#f3f7fb;
    border:1px solid #e4edf6;
    border-radius:10px;
    padding:8px 14px;
    font-size:13px;
    color:#5b6776;
    font-weight:600;
    margin-top:8px;
}

.photo-upload-btn{
    display:inline-block;
    margin-top:12px;
    font-size:12px;
    color:#1f5c94;
    cursor:pointer;
    font-weight:600;
    opacity:0.7;
    transition:opacity 0.2s;
}

.photo-upload-btn:hover{
    opacity:1;
    text-decoration:underline;
}

/* CENTER: INBOX */
.dash-inbox{
    min-width:0;
}

.dash-inbox .card{
    padding:30px;
}

/* RIGHT: COMPLETED */
.dash-completed{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.completed-section{
    background:#fff;
    border-radius:20px;
    padding:22px 18px;
    box-shadow:0 16px 40px rgba(4, 18, 36, 0.18);
    border:1px solid rgba(255,255,255,0.55);
}

.completed-section-title{
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.completed-section-title.green{
    color:#1a8a4a;
}

.completed-section-title.red{
    color:#c53030;
}

.completed-card{
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:8px;
    font-size:13px;
    cursor:pointer;
    transition:0.2s;
}

.completed-card:last-child{
    margin-bottom:0;
}

.completed-card.green{
    background:rgba(26, 138, 74, 0.07);
    border:1px solid rgba(26, 138, 74, 0.18);
}

.completed-card.green:hover{
    background:rgba(26, 138, 74, 0.12);
}

.completed-card.red{
    background:rgba(197, 48, 48, 0.07);
    border:1px solid rgba(197, 48, 48, 0.18);
}

.completed-card.red:hover{
    background:rgba(197, 48, 48, 0.12);
}

.completed-card-title{
    font-weight:700;
    color:#0f2744;
    margin-bottom:3px;
    line-height:1.3;
}

.completed-card-date{
    font-size:11px;
    color:#8fa4bd;
    font-weight:600;
}

.completed-card-detail{
    display:none;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,0.06);
    font-size:13px;
    line-height:1.5;
}

.completed-card-motivo{
    margin-top:8px;
    padding:10px 12px;
    border-radius:10px;
    font-size:12px;
    line-height:1.5;
}

.completed-card.green .completed-card-motivo{
    background:rgba(26, 138, 74, 0.06);
    border-left:3px solid #1a8a4a;
    color:#155d35;
}

.completed-card.red .completed-card-motivo{
    background:rgba(197, 48, 48, 0.06);
    border-left:3px solid #c53030;
    color:#8b1a1a;
}

.completed-empty{
    font-size:13px;
    color:#8fa4bd;
    text-align:center;
    padding:16px 0;
}

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

@media (max-width: 1100px){
    .dashboard-layout{
        grid-template-columns:220px 1fr 240px;
        gap:16px;
    }

    .dash-profile{
        padding:22px 16px;
    }

    .profile-photo,
    .profile-photo-placeholder{
        width:76px;
        height:76px;
    }

    .ranking-score{
        font-size:32px;
    }
}

@media (max-width: 900px){
    .card{
        padding:34px 26px;
        border-radius:22px;
    }

    .label{
        min-width:200px;
    }

    .dashboard-layout{
        grid-template-columns:1fr;
        gap:18px;
    }

    .dash-profile{
        position:static;
        display:flex;
        align-items:center;
        gap:18px;
        padding:20px 22px;
        text-align:left;
    }

    .profile-photo,
    .profile-photo-placeholder{
        width:60px;
        height:60px;
        margin-bottom:0;
        flex-shrink:0;
    }

    .profile-photo-placeholder{
        margin:0;
        font-size:24px;
    }

    .profile-name{
        font-size:15px;
        margin-bottom:6px;
    }

    .ranking-score{
        font-size:26px;
    }

    .ranking-stars{
        justify-content:flex-start;
        margin:6px 0 4px;
    }

    .ranking-stars .star{
        font-size:18px;
    }

    .dash-completed{
        flex-direction:row;
        gap:12px;
    }

    .completed-section{
        flex:1;
    }
}

@media (max-width: 650px){
    body{
        padding:18px 12px;
    }

    .container{
        max-width:100%;
    }

    .card{
        padding:26px 18px;
        border-radius:22px;
        box-shadow:0 16px 36px rgba(4, 18, 36, 0.2);
    }

    .logo{
        width:62px;
        margin-bottom:14px;
    }

    .title{
        font-size:32px;
        line-height:1.08;
        margin-bottom:20px;
    }

    .trackingForm{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .input{
        width:100% !important;
        font-size:16px;
        padding:15px 16px;
        border-radius:14px;
    }

    .button{
        width:100%;
        padding:16px 18px;
        border-radius:14px;
    }

    .info{
        margin-top:20px;
    }

    .row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        padding:16px 0;
    }

    .label{
        min-width:auto;
        width:100%;
        font-size:15px;
    }

    .value{
        width:100%;
        text-align:left;
        font-size:17px;
        font-weight:700;
    }

    .badge{
        font-size:13px;
        padding:10px 14px;
        max-width:100%;
        white-space:normal;
        text-align:left;
        justify-content:flex-start;
    }

    .notes{
        margin-top:22px;
    }

    .notesTitle{
        font-size:18px;
        margin-bottom:10px;
    }

    .noteBox{
        padding:16px;
        border-radius:14px;
        font-size:15px;
    }

    textarea.input{
        min-height:140px;
    }

    .dash-completed{
        flex-direction:column;
    }

    .dash-profile{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .ranking-stars{
        justify-content:center;
    }
}

@media (max-width: 420px){
    body{
        padding:14px 10px;
    }

    .card{
        padding:22px 16px;
        border-radius:18px;
    }

    .title{
        font-size:28px;
    }

    .value{
        font-size:16px;
    }

    .notesTitle{
        font-size:16px;
    }

    .noteBox{
        font-size:14px;
        line-height:1.6;
    }
}