/* ============================================================
   SCANPAGE.net – Haupt-CSS
   Design: dunkelblau/navy, weiße Texte
   ============================================================ */

:root {
    --navy:        #0a1628;
    --navy2:       #0d1f3c;
    --navy3:       #112448;
    --blue-mid:    #1a3a6b;
    --blue-accent: #2a6dd9;
    --blue-light:  #4a90e2;
    --text-white:  #ffffff;
    --text-light:  #c8d8f0;
    --text-muted:  #7a9cc0;
    --border:      #1e3d6e;
    --card-bg:     #0f2242;
    --card-border: #1e4080;
    --success:     #2ecc71;
    --warning:     #f39c12;
    --danger:      #e74c3c;
    --info:        #3498db;
    --font-factor: 1;
}

*, *::before, *::after { box-sizing: border-box; }

body.sp-body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--navy);
    color: var(--text-white);
    font-size: calc(16px * var(--font-factor));
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ---- HEADER ---- */
.sp-header {
    background: var(--navy2);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 200;
}
.sp-header-left  { display:flex; align-items:center; gap:12px; }
.sp-header-logo  { height:36px; width:auto; }
.sp-header-title { font-size:1.05em; font-weight:600; color:var(--text-white); }
.sp-header-right { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }

.sp-btn-font, .sp-btn-lang, .sp-btn-nav, .sp-btn-admin {
    background: var(--blue-mid);
    border: 1px solid var(--border);
    color: var(--text-light);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82em;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sp-btn-font:hover, .sp-btn-lang:hover, .sp-btn-nav:hover { background: var(--blue-accent); color:#fff; }
.sp-btn-admin { border-color: var(--blue-accent); color: var(--blue-light); }
.sp-btn-admin:hover { background: var(--blue-accent); color: #fff; }
.sp-active { background: var(--blue-accent) !important; color: #fff !important; }

/* ---- FLASH MESSAGES ---- */
.sp-flash {
    padding: 12px 24px;
    font-size: .9em;
    font-weight: 500;
    text-align: center;
}
.sp-flash-error   { background: rgba(231,76,60,.15);  border-bottom: 1px solid rgba(231,76,60,.4);  color: #f39d9d; }
.sp-flash-success { background: rgba(46,204,113,.12); border-bottom: 1px solid rgba(46,204,113,.3); color: #7fe0a8; }

/* ---- HERO ---- */
.sp-hero {
    text-align: center;
    padding: 48px 24px 36px;
    background: linear-gradient(180deg, var(--navy2) 0%, var(--navy) 100%);
}
.sp-hero-logo { width:200px; height:266px; margin:0 auto 22px; display:block; }
.sp-hero h1   { font-size:1.9em; font-weight:700; margin-bottom:10px; }
.sp-hero p    { font-size:1em; color:var(--text-light); max-width:580px; margin:0 auto 6px; }
.sp-badge     { display:inline-block; background:var(--blue-mid); border:1px solid var(--blue-accent);
                color:var(--blue-light); border-radius:20px; padding:4px 16px; font-size:.8em; margin-top:12px; }

/* ---- MAIN ---- */
.sp-main { max-width:980px; margin:0 auto; padding:28px 20px 60px; }

.sp-section-title {
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* ---- STAT CARDS ---- */
.sp-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
}
.sp-stat-icon  { font-size:1.7em; margin-bottom:6px; color:var(--text-muted); }
.sp-stat-value { font-size:1.9em; font-weight:700; line-height:1; margin-bottom:5px; color:var(--text-white); }
.sp-stat-label { font-size:.72em; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; }
.sp-stat-card.sp-success .sp-stat-value { color:var(--success); }
.sp-stat-card.sp-warning .sp-stat-value { color:var(--warning); }
.sp-stat-card.sp-danger  .sp-stat-value { color:var(--danger);  }
.sp-stat-card.sp-info    .sp-stat-value { color:var(--info);    }

/* ---- STATUS CARDS ---- */
.sp-status-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sp-dot          { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.sp-dot-green    { background:var(--success); box-shadow:0 0 6px rgba(46,204,113,.5); }
.sp-dot-orange   { background:var(--warning); box-shadow:0 0 6px rgba(243,156,18,.5); }
.sp-dot-red      { background:var(--danger);  box-shadow:0 0 6px rgba(231,76,60,.5);  }
.sp-status-label { font-size:.88em; font-weight:600; color:var(--text-white); }
.sp-status-sub   { font-size:.75em; color:var(--text-muted); margin-top:2px; }

/* ---- PANELS ---- */
.sp-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 22px;
}
.sp-panel h2 { font-size:.95em; font-weight:600; color:var(--text-white); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ---- FORMS ---- */
.sp-form-group        { margin-bottom:13px; }
.sp-form-group label  { display:block; font-size:.75em; color:var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
.sp-input             { width:100%; background:var(--navy3); border:1px solid var(--border); border-radius:6px;
                        padding:8px 11px; color:var(--text-white); font-size:.9em; outline:none; transition:border-color .2s; }
.sp-input:focus       { border-color:var(--blue-accent); }
.sp-input option      { background:var(--navy2); }

.sp-btn-primary       { width:100%; background:var(--blue-accent); border:none; border-radius:6px;
                        color:#fff; padding:10px; font-size:.95em; font-weight:600; cursor:pointer; transition:background .2s; }
.sp-btn-primary:hover { background:var(--blue-light); }
.sp-btn-danger        { background:rgba(231,76,60,.15); border:1px solid rgba(231,76,60,.5); color:#f39d9d;
                        border-radius:6px; padding:5px 12px; font-size:.82em; cursor:pointer; transition:background .2s; }
.sp-btn-danger:hover  { background:rgba(231,76,60,.3); }
.sp-btn-sm            { background:var(--blue-mid); border:1px solid var(--border); color:var(--text-light);
                        border-radius:5px; padding:3px 9px; font-size:.78em; cursor:pointer; text-decoration:none; }
.sp-btn-sm:hover      { background:var(--blue-accent); color:#fff; }
.sp-btn-sm.sp-btn-danger { background:rgba(231,76,60,.1); border-color:rgba(231,76,60,.4); color:#f39d9d; }

.sp-link-small        { font-size:.78em; color:var(--blue-light); text-decoration:none; display:inline-block; margin-top:8px; }
.sp-link-small:hover  { text-decoration:underline; }
.sp-text-muted        { font-size:.88em; color:var(--text-muted); }

/* ---- BADGES ---- */
.sp-badge-status      { font-size:.72em; border-radius:4px; padding:2px 7px; font-weight:600; text-transform:uppercase; }
.sp-badge-ok          { background:rgba(46,204,113,.15);  color:#7fe0a8; }
.sp-badge-changed     { background:rgba(243,156,18,.15);  color:#f8c776; }
.sp-badge-infected    { background:rgba(231,76,60,.15);   color:#f39d9d; }
.sp-badge-down        { background:rgba(231,76,60,.15);   color:#f39d9d; }
.sp-badge-active      { background:rgba(46,204,113,.15);  color:#7fe0a8; }
.sp-badge-inactive    { background:rgba(122,156,192,.15); color:#7a9cc0; }
.sp-badge-locked      { background:rgba(231,76,60,.15);   color:#f39d9d; }
.sp-badge-admin       { background:rgba(52,152,219,.15);  color:#7ac8f8; font-size:.72em; border-radius:4px; padding:2px 7px; font-weight:600; }

/* ---- ADMIN CARDS ---- */
.sp-admin-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:10px; padding:28px; text-decoration:none; color:var(--text-light);
    transition:background .2s, border-color .2s;
}
.sp-admin-card:hover { background:var(--blue-mid); border-color:var(--blue-accent); color:#fff; }

/* ---- TABLE ---- */
.sp-table-wrap { overflow-x:auto; }
.sp-table      { width:100%; border-collapse:collapse; font-size:.84em; }
.sp-table th   { background:var(--navy3); color:var(--text-muted); padding:8px 10px; text-align:left;
                 font-size:.72em; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--border); }
.sp-table td   { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text-light); vertical-align:middle; }
.sp-table tr:hover td { background:rgba(255,255,255,.03); }

/* ---- FOOTER ---- */
.sp-footer { background:var(--navy2); border-top:1px solid var(--border); padding:18px 24px; }
.sp-footer-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
                   font-size:.82em; color:var(--text-muted); }
.sp-footer-link  { color:var(--text-muted); text-decoration:none; }
.sp-footer-link:hover { color:var(--text-light); }

/* ---- RESPONSIVE ---- */
@media (max-width:600px) {
    .sp-hero h1 { font-size:1.4em; }
    .sp-hero-logo { width:140px; height:187px; }
    .sp-header-title { display:none; }
}

/* ---- PAGER ---- */
.sp-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
}
.sp-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-light);
    text-decoration: none;
    font-size: .82em;
    font-weight: 600;
    transition: background .2s, border-color .2s;
}
.sp-page-btn:hover       { background: var(--blue-accent); border-color: var(--blue-accent); color: #fff; }
.sp-page-active          { background: var(--blue-accent); border-color: var(--blue-accent); color: #fff; cursor: default; }
.sp-page-disabled        { opacity: .35; cursor: default; }
.sp-badge-link_missing { background:rgba(155,89,182,.2); color:#d7bdf7; }