body {
    background: #f4f6f9;
}

.login-body {
    background: #2c3e50;
}

.login-box {
    margin-top: 10vh;
    color: #fff;
}

.login-box .panel {
    color: #333;
}

.loading-spinner {
    padding: 30px;
    text-align: center;
    color: #888;
}

.spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mml-output {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 4px;
    max-height: 500px;
    overflow: auto;
    font-size: 12px;
}

/* Karty ONU / porty PON - kafelki w stylu SmartOLT */
.pon-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 15px;
    display: block;
    text-decoration: none;
    color: #333;
    transition: box-shadow .15s ease;
}

.pon-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    text-decoration: none;
    color: #333;
}

.pon-card .pon-title {
    font-weight: 600;
    font-size: 15px;
}

.pon-card .pon-stats {
    margin-top: 8px;
}

/* Status ONU / portów */
.status-square {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

.status-square-online {
    background-color: #2ecc71;
}

.status-square-offline {
    background-color: #e74c3c;
}

.status-square-unknown {
    background-color: #95a5a6;
}

.onu-row:hover {
    background-color: #eef6ff !important;
}

.badge-status-online {
    background-color: #2ecc71;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.badge-status-offline {
    background-color: #e74c3c;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.badge-status-unknown {
    background-color: #95a5a6;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.badge-status-up {
    background-color: #2ecc71;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.badge-status-down {
    background-color: #e74c3c;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.signal-highlight {
    background: #f8f9fb;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    padding: 12px 0;
    margin-bottom: 15px;
}

.signal-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: .5px;
}

.signal-value {
    font-size: 26px;
    font-weight: 700;
    color: #333;
}

.optical-good  { color: #2ecc71; font-weight: 600; }
.optical-warn  { color: #e67e22; font-weight: 600; }
.optical-bad   { color: #e74c3c; font-weight: 600; }

table.table td, table.table th {
    vertical-align: middle !important;
}