/* =======================================================
   Hofmeister & Meincke Dashboard
======================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{scroll-behavior:smooth;}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#dcefff;
    color:#222;
}

header{
    background:#005a9c;
    color:#fff;
    padding:25px;
    position:relative;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.logo svg{
    width:320px;
    max-width:90%;
    height:auto;
}

.logo h1{
    margin-top:15px;
    font-size:38px;
    font-weight:bold;
}

.logo p{
    margin-top:8px;
    font-size:20px;
    color:#dcefff;
}

.admin-button{
    position:absolute;
    right:25px;
    top:25px;
    background:#fff;
    color:#005a9c;
    text-decoration:none;
    padding:12px 22px;
    border-radius:12px;
    font-weight:bold;
    transition:.3s;
}

.admin-button:hover{background:#d7ecff;}

main{
    width:95%;
    max-width:1800px;
    margin:40px auto;
}

.sensor-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.sensor-card{
    background:#fff;
    border-radius:22px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.3s;
    animation:fadeIn .5s ease;
    min-width:0;
}

.sensor-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    gap:12px;
}

.card-header h2{
    color:#005a9c;
    font-size:30px;
}

.location{
    margin-bottom:22px;
    color:#4b5f72;
    font-size:16px;
}

.status{
    display:inline-block;
    padding:8px 16px;
    border-radius:30px;
    font-size:15px;
    font-weight:bold;
    white-space:nowrap;
}

.online{background:#14b84b;color:#fff;}
.offline{background:#d32f2f;color:#fff;}

.sensor-values{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.value-box{
    background:#eef7ff;
    border-radius:18px;
    padding:20px;
    text-align:center;
    border:1px solid #cfe4ff;
}

.value-box .title{
    font-size:16px;
    color:#666;
    margin-bottom:10px;
}

.value-box .value{
    font-size:28px;
    font-weight:bold;
    color:#005a9c;
}

.last-update{
    margin:18px 0 4px;
    text-align:center;
    color:#647587;
    font-size:14px;
}

.chart-block{
    position:relative;
    margin-top:22px;
    width:100%;
    border:1px solid #cfe4ff;
    border-radius:18px;
    background:#f8fcff;
    overflow:hidden;
}

.chart-block h3{
    padding:15px 16px 0;
    color:#005a9c;
    font-size:17px;
}

.chart-hint{
    padding:6px 16px 0;
    color:#6b7b8b;
    font-size:12px;
    line-height:1.4;
}

.sensor-chart{
    display:block;
    width:100%;
    height:230px;
    cursor:crosshair;
    touch-action:pan-y;
}

.chart-tooltip{
    position:absolute;
    z-index:5;
    min-width:170px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(0,59,111,.96);
    color:#fff;
    text-align:center;
    box-shadow:0 7px 20px rgba(0,0,0,.25);
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-100%);
    transition:opacity .12s ease;
}

.chart-tooltip.visible{opacity:1;}

.chart-tooltip strong,
.chart-tooltip span,
.chart-tooltip small{
    display:block;
}

.chart-tooltip strong{
    font-size:17px;
    margin-bottom:4px;
}

.chart-tooltip span{
    font-size:13px;
}

.chart-tooltip small{
    margin-top:4px;
    color:#dcefff;
    font-size:11px;
}

.empty-dashboard{
    grid-column:1/-1;
    text-align:center;
}

footer{
    margin-top:50px;
    padding:30px;
    background:#005a9c;
    color:#fff;
    text-align:center;
    font-size:18px;
}

footer p + p{margin-top:8px;}

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

.admin-page{
    min-height:100vh;
    background:#dcefff;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    text-align:left;
    padding:20px 5%;
}

.logo-area h1{font-size:28px;}
.logo-area span{display:block;margin-top:5px;color:#dcefff;}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;}

.container{
    width:95%;
    max-width:1400px;
    margin:40px auto;
}

.admin-container{
    background:#fff;
    border-radius:20px;
    padding:28px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.page-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
}

.page-heading p{margin-top:5px;color:#68798a;}

.admin-btn,
button{
    display:inline-block;
    border:0;
    background:#005a9c;
    color:#fff;
    text-decoration:none;
    padding:11px 18px;
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    font-size:15px;
}

.admin-btn:hover,
button:hover{background:#00457a;}

.admin-btn.secondary{background:#fff;color:#005a9c;}
.admin-btn.secondary:hover{background:#d7ecff;}
.admin-btn.danger,.danger-button{background:#b42318;}
.admin-btn.danger:hover,.danger-button:hover{background:#8f1d14;}
.warning-button{background:#c77700;}
.warning-button:hover{background:#9f5e00;}

.table-wrap{overflow-x:auto;}

.admin-table{
    width:100%;
    border-collapse:collapse;
    min-width:950px;
}

.admin-table th,
.admin-table td{
    padding:14px 12px;
    border-bottom:1px solid #dce6ef;
    text-align:left;
    vertical-align:middle;
}

.admin-table th{
    background:#eef7ff;
    color:#005a9c;
}

.admin-table tbody tr:hover{background:#f8fcff;}
.empty-cell{text-align:center!important;color:#6c7a89;}
.action-links{white-space:nowrap;}
.action-links a{color:#005a9c;font-weight:bold;text-decoration:none;margin-right:12px;}
.action-links .delete-link{color:#b42318;}
.api-key-masked{font-size:13px;word-break:break-all;}

.form-container{max-width:760px;}
.form-container h2{margin-bottom:22px;color:#005a9c;}

.admin-form{
    display:grid;
    gap:10px;
}

.admin-form label,
.api-key-box label{
    margin-top:8px;
    font-weight:bold;
    color:#34495e;
}

input,
select{
    width:100%;
    border:1px solid #b8c9d8;
    border-radius:10px;
    padding:12px 13px;
    font-size:16px;
    background:#fff;
}

input:focus,
select:focus{
    outline:2px solid #8bbdf0;
    border-color:#005a9c;
}

.copy-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

.copy-row input{font-family:monospace;}

.api-key-box,
.warning-box{
    margin:20px 0;
    padding:18px;
    border-radius:14px;
    background:#eef7ff;
    border:1px solid #cfe4ff;
}

.api-key-box p,
.warning-box p{margin-top:10px;line-height:1.5;}

.regenerate-form{margin-top:18px;}
.back-link{display:inline-block;margin-top:20px;color:#005a9c;font-weight:bold;text-decoration:none;}

.login-box{
    width:min(92%,460px);
    margin:9vh auto;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.login-box h2{color:#005a9c;margin-bottom:20px;}
.login-box form{display:grid;gap:10px;}
.login-box label{margin-top:8px;font-weight:bold;}

.error,
.success{
    padding:13px 15px;
    border-radius:10px;
    margin-bottom:18px;
    font-weight:bold;
}

.error{background:#ffe3e0;color:#8f1d14;border:1px solid #f0aaa3;}
.success{background:#e0f7e8;color:#116b32;border:1px solid #9bd7ae;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#dcefff;}
::-webkit-scrollbar-thumb{background:#005a9c;border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:#00457a;}

@keyframes fadeIn{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

@media (max-width:1100px){
    .sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:768px){
    header:not(.topbar){padding-top:80px;}
    .admin-button{top:20px;right:20px;padding:10px 18px;font-size:15px;}
    .logo svg{width:240px;}
    .logo h1{font-size:30px;}
    .logo p{font-size:18px;}
    .sensor-grid{grid-template-columns:1fr;}
    .sensor-values{grid-template-columns:1fr;}
    .card-header{flex-direction:column;align-items:flex-start;}
    .card-header h2{font-size:26px;}
    .topbar,.page-heading{flex-direction:column;align-items:flex-start;}
    .topbar-actions{width:100%;}
    .copy-row{grid-template-columns:1fr;}
    .admin-container{padding:20px;}
}

@media (max-width:480px){
    main{width:96%;}
    .sensor-card{padding:18px;}
    .value-box{padding:16px;}
    .value-box .value{font-size:24px;}
    .logo h1{font-size:26px;}
    .logo p{font-size:16px;}
    footer{font-size:16px;}
}


/* ================= FOOTER-LINKS / PROJEKTHINWEIS ================= */

.project-disclaimer{
    font-size:15px;
    color:#dcefff;
}

.footer-links{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.footer-links a{
    color:#fff;
    font-weight:bold;
    text-decoration:underline;
    text-underline-offset:3px;
}

.footer-links a:hover{
    color:#d7ecff;
}

/* ================= RECHTLICHE SEITEN ================= */

.legal-page{
    min-height:100vh;
    background:#dcefff;
}

.legal-header{
    background:#005a9c;
    color:#fff;
    padding:42px 5%;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.legal-header h1{
    font-size:38px;
}

.legal-header p{
    margin-top:9px;
    color:#dcefff;
    font-size:18px;
}

.legal-container{
    width:95%;
    max-width:980px;
    margin:38px auto;
}

.legal-card{
    background:#fff;
    margin-bottom:22px;
    padding:26px;
    border-radius:18px;
    box-shadow:0 8px 22px rgba(0,0,0,.10);
}

.legal-card h2{
    color:#005a9c;
    margin-bottom:15px;
    font-size:24px;
}

.legal-card h3{
    color:#005a9c;
    margin:22px 0 10px;
    font-size:19px;
}

.legal-card p{
    margin-top:12px;
    line-height:1.7;
    color:#33485c;
}

.legal-card a,
.legal-link{
    color:#005a9c;
    font-weight:bold;
}

.legal-card code{
    padding:2px 6px;
    border-radius:6px;
    background:#eef7ff;
}

.legal-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:18px;
    margin:28px 0 42px;
}

.legal-link{
    text-decoration:none;
}

.form-intro{
    margin:-10px 0 20px;
    line-height:1.5;
    color:#637587;
}

.password-note{
    margin:3px 0 8px;
    color:#637587;
    font-size:14px;
    line-height:1.45;
}

@media (max-width:768px){
    .legal-header h1{font-size:31px;}
    .legal-card{padding:21px;}
    .legal-card h2{font-size:22px;}
    .legal-actions{align-items:stretch;}
    .legal-actions .admin-btn,
    .legal-actions .legal-link{
        width:100%;
        text-align:center;
    }
}