@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
    --blue:#005eb8;
    --bg:#eef2f7;
    --card:#ffffff;
    --line:#d9e2ef;
    --text:#1f2937;
    --muted:#6b7280;
    --shadow:0 10px 28px rgba(17,24,39,.12);
    --radius:10px;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
}

a{color:#004fd6;text-decoration:none;font-weight:700}

.topbar{
    height:70px;
    background:linear-gradient(180deg,#006fc9,#005aaa);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    box-shadow:0 3px 12px rgba(0,0,0,.20);
    position:sticky;
    top:0;
    z-index:99999 !important;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:24px;
    font-weight:900;
    letter-spacing:-.04em;
}

.brand small{
    display:block;
    font-size:12px;
    font-weight:600;
    opacity:.92;
}

.topbar-user{
    display:flex;
    align-items:center;
    gap:18px;
    font-weight:700;
}

.online-dot{
    width:10px;
    height:10px;
    background:#31d158;
    border-radius:50%;
    display:inline-block;
    margin-right:6px;
}

.logout-link{
    background:#e83d55;
    color:white!important;
    padding:9px 14px;
    border-radius:7px;
}

.main-nav{
    min-height:52px;
    background:#0068b9;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    box-shadow:0 3px 10px rgba(0,0,0,.16);
    position:sticky;
    top:70px;
    z-index:99998 !important;
    padding:6px 10px;
}

.main-nav a{
    color:#fff;
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 12px;
    border-radius:7px;
    font-weight:800;
}

.main-nav a:hover,
.main-nav a.active{background:#00519a}

.ico{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ffb020;
    display:inline-block;
    border:2px solid #fff;
}

.page-shell{
    display:grid;
    grid-template-columns:290px minmax(700px,1fr) 400px;
    gap:18px;
    padding:18px;
    max-width:1900px;
    margin:0 auto;
}

.left-rail,.right-rail{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.content{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.card-body{padding:16px}

.card-title{
    background:linear-gradient(180deg,#056fd0,#0058b6);
    color:#fff;
    padding:10px 13px;
    font-size:16px;
    font-weight:900;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

h1{
    font-size:26px;
    margin:0 0 15px;
    text-align:center;
    color:#263143;
    font-weight:900;
}

.muted{color:var(--muted)}

.callsign-big{
    font-size:31px;
    font-weight:900;
    color:#263143;
    margin:4px 0;
}

.avatar-block{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo-avatar{
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffb020,#005eb8);
}

.btn{
    border:0;
    padding:10px 16px;
    border-radius:7px;
    color:white!important;
    background:#0b6fd3;
    cursor:pointer;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-decoration:none;
}

.btn.green{background:#22b85a}
.btn.yellow{background:#ffbd37;color:#111!important}
.btn.red{background:#e63946}
.btn.gray{background:#eef2f6;color:#435169!important;border:1px solid var(--line)}

input,select,textarea{
    width:100%;
    border:1px solid #cfd9e8;
    border-radius:7px;
    padding:11px 12px;
    font-family:inherit;
    font-size:14px;
    background:white;
    outline:none;
    margin-bottom:12px;
}

label{
    display:block;
    font-size:13px;
    font-weight:900;
    color:#263143;
    margin-bottom:7px;
}

.form-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.qso-panel{padding:18px}
.qso-section{border-bottom:1px solid var(--line);padding:16px 0}
.lookup-row{
    display:grid;
    grid-template-columns:1.3fr 110px 1fr 1fr 80px;
    gap:12px;
    align-items:end;
}

.operator-photo{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#d1d5db;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:white}
th,td{
    border:1px solid #dce3ee;
    padding:9px 8px;
    text-align:left;
    font-size:13px;
    white-space:nowrap;
}
th{background:#f5f7fa;color:#4b5563;font-weight:900}

.chat-list{display:flex;flex-direction:column;gap:12px;max-height:330px;overflow:auto}
.chat-bubble{background:#dfffcf;padding:12px;border-radius:8px;font-size:13px}
.chat-time{font-size:12px;margin-top:9px;color:#111}
.chat-form{display:grid;grid-template-columns:1fr 70px;gap:8px;margin-top:12px}

.mini-table td,.mini-table th{font-size:12px;padding:7px}

.map-box{
    height:300px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid #dce3ee;
    background:linear-gradient(135deg,#dbeafe,#f8fafc);
    position:relative;
}

.map-legend{
    position:absolute;
    left:10px;
    bottom:10px;
    background:white;
    border-radius:6px;
    padding:8px 10px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    font-size:12px;
}

.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.quick{
    background:#f4f7fb;
    border:1px solid var(--line);
    border-radius:9px;
    padding:14px 8px;
    text-align:center;
    font-weight:800;
}
.quick-icon{font-size:30px;display:block;margin-bottom:8px}

.notice{
    padding:12px 14px;
    background:#e8fff0;
    color:#087a3a;
    border:1px solid #b7efc5;
    border-radius:8px;
    font-weight:800;
    margin-bottom:12px;
}

.error{background:#fff0f0;color:#c81e1e;border-color:#ffc6c6}

.footer{
    background:#003b78;
    color:white;
    padding:10px 18px;
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-top:10px;
}

.login-wrap{max-width:430px;margin:80px auto}
.login-wrap .card{padding:22px}

@media(max-width:1280px){
    .page-shell{grid-template-columns:240px 1fr}
    .right-rail{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;align-items:start}
}

@media(max-width:900px){
    .main-nav{overflow:auto;justify-content:flex-start}
    .page-shell{grid-template-columns:1fr}
    .left-rail,.right-rail{display:flex}
    .form-grid,.form-grid-4,.form-grid-3,.form-grid-2,.lookup-row,.quick-grid{grid-template-columns:1fr}
    .topbar{height:auto;min-height:70px;align-items:flex-start;padding:12px}
    .topbar-user{flex-direction:column;align-items:flex-end;gap:5px}
}


/* =========================================================
   HamLogBook - Fix completo mappe/menu + responsive V2
   ========================================================= */

/* Menu sempre sopra mappe Leaflet/iframe */
.topbar{
    z-index:99999 !important;
}

.main-nav{
    z-index:99998 !important;
}

.leaflet-container,
.leaflet-pane,
.leaflet-map-pane,
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom{
    z-index:1 !important;
}

iframe{
    z-index:1 !important;
}

.map-box,
.card,
.widget,
.map-widget{
    position:relative;
    z-index:1;
}

/* Migliore gestione mappe integrate */
#activeActivatorsMap,
#potaLiveMap,
#map,
#real-map{
    position:relative;
    z-index:1;
    min-height:260px;
}

/* Desktop grandi */
@media (min-width:1500px){
    .page-shell{
        max-width:1900px;
        grid-template-columns:290px minmax(700px,1fr) 400px;
    }
}

/* Notebook / tablet orizzontale */
@media (max-width:1350px){
    .page-shell{
        grid-template-columns:260px minmax(520px,1fr);
        gap:16px;
    }

    .right-rail{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
        align-items:start;
    }

    .form-grid,
    .form-grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .quick-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* Tablet */
@media (max-width:1024px){
    .topbar{
        position:relative;
        top:auto;
        z-index:99999 !important;
    }

    .main-nav{
        position:sticky;
        top:0;
        z-index:99998 !important;
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        white-space:nowrap;
        padding:8px 10px;
        -webkit-overflow-scrolling:touch;
    }

    .main-nav a{
        flex:0 0 auto;
        font-size:13px;
        padding:9px 10px;
    }

    .page-shell{
        grid-template-columns:1fr;
        padding:14px;
        gap:14px;
    }

    .left-rail,
    .right-rail,
    .content{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    .right-rail{
        grid-column:auto;
    }

    .form-grid-3,
    .form-grid-2{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .lookup-row{
        grid-template-columns:1fr 110px;
    }

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

    table{
        min-width:820px;
    }

    #activeActivatorsMap,
    #potaLiveMap,
    #map,
    #real-map,
    .map-box{
        min-height:280px;
    }
}

/* Smartphone */
@media (max-width:720px){
    body{
        font-size:13px;
    }

    .topbar{
        height:auto;
        min-height:auto;
        padding:12px;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        position:relative;
        top:auto;
    }

    .brand{
        font-size:21px;
        line-height:1.05;
    }

    .brand small{
        font-size:11px;
        margin-top:3px;
    }

    .topbar-user{
        width:100%;
        justify-content:space-between;
        gap:8px;
        font-size:12px;
        flex-direction:row;
        align-items:center;
    }

    .main-nav{
        position:sticky;
        top:0;
        z-index:99998 !important;
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        white-space:nowrap;
        gap:8px;
        padding:9px;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
    }

    .main-nav a{
        scroll-snap-align:start;
        min-width:max-content;
        border-radius:999px;
        padding:9px 12px;
        font-size:12px;
        background:rgba(255,255,255,.10);
    }

    .ico{
        width:14px;
        height:14px;
    }

    .page-shell{
        grid-template-columns:1fr;
        padding:10px;
        gap:12px;
    }

    .card{
        border-radius:9px;
        box-shadow:0 5px 14px rgba(17,24,39,.10);
    }

    .card-title{
        font-size:13px;
        padding:10px 12px;
        letter-spacing:0;
    }

    .card-body{
        padding:12px;
    }

    h1{
        font-size:21px;
        text-align:left;
        margin-bottom:12px;
    }

    h3{
        font-size:16px;
    }

    .callsign-big{
        font-size:25px;
    }

    .logo-avatar{
        width:54px;
        height:54px;
    }

    .qso-panel{
        padding:12px;
    }

    .qso-section{
        padding:14px 0;
    }

    .form-grid,
    .form-grid-2,
    .form-grid-3,
    .form-grid-4,
    .lookup-row,
    .quick-grid{
        grid-template-columns:1fr !important;
        gap:8px;
    }

    input,
    select,
    textarea{
        font-size:16px;
        padding:11px;
        margin-bottom:9px;
    }

    label{
        font-size:12px;
        margin-bottom:5px;
    }

    .btn{
        width:100%;
        padding:11px 12px;
        font-size:13px;
    }

    .action-row{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .operator-photo{
        width:58px;
        height:58px;
        font-size:28px;
    }

    .quick-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .quick{
        padding:10px 6px;
        font-size:12px;
        min-height:82px;
    }

    .quick-icon{
        font-size:24px;
        margin-bottom:5px;
    }

    .chat-list{
        max-height:260px;
    }

    .chat-form{
        grid-template-columns:1fr;
        gap:6px;
    }

    .chat-bubble{
        font-size:12px;
        padding:10px;
    }

    .mini-table,
    .mini-table tbody,
    .mini-table tr,
    .mini-table td,
    .mini-table th{
        font-size:11px;
    }

    .table-wrap{
        margin-left:-4px;
        margin-right:-4px;
        padding-bottom:4px;
    }

    table{
        min-width:760px;
    }

    th,
    td{
        padding:8px 7px;
        font-size:12px;
    }

    #activeActivatorsMap,
    #potaLiveMap,
    #map,
    #real-map,
    .map-box{
        height:240px !important;
        min-height:240px;
    }

    canvas{
        max-width:100%;
    }

    .notice{
        font-size:12px;
        padding:10px;
    }

    .footer{
        flex-direction:column;
        gap:4px;
        text-align:center;
        font-size:11px;
        padding:10px;
    }

    .login-wrap{
        max-width:none;
        margin:30px 10px;
    }
}

/* Smartphone piccoli */
@media (max-width:420px){
    .brand{
        font-size:19px;
    }

    .topbar-user{
        flex-direction:column;
        align-items:flex-start;
    }

    .quick-grid{
        grid-template-columns:1fr !important;
    }

    .main-nav a{
        font-size:11px;
        padding:8px 10px;
    }

    #activeActivatorsMap,
    #potaLiveMap,
    #map,
    #real-map,
    .map-box{
        height:220px !important;
        min-height:220px;
    }
}