/**
 * sandbox.css - Styles für Content-Sandbox (CSP-konform)
 * 
 * WICHTIG: Diese Datei wird via <link> in den Sandbox-iframe geladen
 * um 'unsafe-inline' CSP zu vermeiden.
 */

/* ===== BASE STYLES ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #e7ecf3;
    background: #0b1020;
    min-height: 100vh;
}

/* Light theme override (if needed) */
body.light-theme {
    color: #1a1a1a;
    background: #ffffff;
}

/* ===== SECURITY BADGE ===== */
.security-badge {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
    color: white;
}

.security-badge[data-level="STRICT"] {
    background: #28a745;
}

.security-badge[data-level="ISOLATED_SCRIPTS"] {
    background: #ffc107;
}

.security-badge[data-level="INTERACTIVE"] {
    background: #fd7e14;
}

.security-badge[data-level="SAME_ORIGIN_NO_SCRIPTS"] {
    background: #17a2b8;
}

/* ===== CODE BLOCKS ===== */
pre {
    background: #151d34;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 10px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

code {
    background: #1f2a4b;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.9em;
}

pre code {
    background: transparent;
    padding: 0;
}

/* ===== WARNINGS & ALERTS ===== */
.warning {
    background: #ff6b6b22;
    border-left: 4px solid #ff6b6b;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.info {
    background: #17a2b822;
    border-left: 4px solid #17a2b8;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.error {
    background: #dc354522;
    border-left: 4px solid #dc3545;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    color: #ff6b6b;
}

/* ===== STRICT MODE: Disable dangerous elements ===== */
body.strict-mode script,
body.strict-mode iframe,
body.strict-mode object,
body.strict-mode embed,
body.strict-mode applet {
    display: none !important;
}

body.strict-mode form {
    pointer-events: none;
    opacity: 0.5;
}

/* ===== BSV APP COMPATIBILITY ===== */
/* Fallback für alte BSV Apps die diese Klassen nutzen */
.e {
    color: #ff6b6b;
    background: #ff6b6b22;
    padding: 10px;
    border-radius: 4px;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

p {
    margin: 1em 0;
}

a {
    color: #4da6ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== TABLES ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

th, td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #2a3654;
}

th {
    background: #151d34;
    font-weight: 600;
}

/* ===== IMAGES ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 14px;
    }
    
    .security-badge {
        top: 5px;
        right: 5px;
        font-size: 10px;
        padding: 3px 6px;
    }
}